@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

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

@@ -0,0 +1,1447 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { isMac as isMacFn, prepareTSVContent, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @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
+*/
+
+/** Fired before selectionChanged. We can cancel the select operation by setting `cancel` property on the event arugment to true<br>
+* Note that selection by JavaScript APIs cannot be prevented using this event.
+* @event RowSelectionPlugin#beforeSelection
+* @example
+* let ext = new RowSelectionPlugin();
+* ext.listen("beforeSelection" function(e) {
+*   e.cancel = true; // Cancel user selection
+* });
+*/
+
+/** @typedef {(Object|string)} RowSelectionPlugin~Options
+* @description Extension options available in main grid configuration under `rowSelection` property
+* @property {boolean=} singleSelection=false If enabled, user can have one selection at any moment
+* @property {Function=} selectionChanged=null Handler executed after selection is made
+* @property {Function=} beforeSelection=null Handler executed before selection is made
+* @property {boolean=} basedOnContent=false Normally row selection will not move when data sorted, with this option turn on then selection will relocate strictly with row data.
+* @property {string=} selectionField=SELECTED_ROW Normally basedOnContent will set selection state in row data with field name "SELECTED_ROW" but you can change field name here.
+* @property {Function=} menuClicked=null Event Handler when user clicks on menu icon.
+* @property {string=} menuPosition="outside" show icon in column grid that have style outside and non-outside
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {RowSelectionPlugin~Options=} options
+*/
+let RowSelectionPlugin = function (options) {
+	let t = this;
+	t._onMouseDown = t._onMouseDown.bind(t);
+	t._onClick = t._onClick.bind(t);
+	t._onKeyDown = t._onKeyDown.bind(t);
+	t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
+	t._onReselection = t._onReselection.bind(t);
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._onRowPositionChanged = t._onRowPositionChanged.bind(t);
+	t._updateMenuIcon = t._updateMenuIcon.bind(t);
+
+	t._hosts = [];
+	t._textRange = document.createRange();
+	t._headerSelection = {};
+
+	if(options) {
+		t.config({ "rowSelection": options });
+	}
+};
+Ext.inherits(RowSelectionPlugin, GridPlugin);
+
+/** @type {Object}
+* @private
+* @description Core grid instance
+*/
+RowSelectionPlugin.prototype._activeGrid = null;
+/** @type {Object}
+* @private
+* @description Grid section object
+*/
+RowSelectionPlugin.prototype._anchorSection = null;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._singleSelMode = false;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._clickToggleMode = false;
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._pendingClickIndex = -1;
+/** @type {Array<string>}
+* @private
+*/
+RowSelectionPlugin.prototype._basedOnContent = false;
+/** @type {string}
+* @private
+*/
+RowSelectionPlugin.prototype._selectionField = "SELECTED_ROW";
+/** @type {string}
+* @private
+* @description use with _basedOnContent mode for tracking current anchor row
+*/
+RowSelectionPlugin.prototype._anchorRowId = "";
+/** @type {Range}
+* @private
+*/
+RowSelectionPlugin.prototype._textRange = null;
+/** @type {Function}
+* @private
+*/
+RowSelectionPlugin.prototype._onMenuClicked = null;
+/** @type {Element}
+* @private
+*/
+RowSelectionPlugin.prototype._menuButton = null;
+/** @type {string}
+* @private
+*/
+RowSelectionPlugin.prototype._menuPosition = "outside";
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._timerId = 0;
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._timerMenuId = 0;
+/** @type {(number|null)}
+* @private
+*/
+RowSelectionPlugin.prototype._pendingSelection = null;
+/** @type {Object}
+* @private
+*/
+RowSelectionPlugin.prototype._headerSelection = null;
+
+/** @private
+* @return {string}
+*/
+RowSelectionPlugin._styleCalculator = function() {
+	let styles = [
+		".row-selection-menu", [
+			"position: absolute;",
+			"background-color: var(--grid-column-menu-icon-bgcolor);",
+			"color: var(--grid-column-menu-icon-color);",
+			"z-index: 1;",
+			"cursor: pointer;",
+			"text-align: center;",
+			"width: 16px;",
+			"height: 16px;",
+			"padding: 6px;"
+		],
+		".row-selection-menu:hover", [
+			"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
+		],
+		".row-selection-menu-inside", [
+			"padding: 4px;"
+		]
+	];
+	return prettifyCss(styles);
+};
+
+/** @public
+* @return {string}
+*/
+RowSelectionPlugin.prototype.getName = function () {
+	return "RowSelectionPlugin"; // Read Only
+};
+
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype.hasMultiTableSupport = function () {
+	return true;
+};
+
+/** @public
+* @param {Object} host Core grid instance
+* @param {Object=} options Grid configuration object
+*/
+RowSelectionPlugin.prototype.initialize = function (host, options) {
+	if(this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("click", this._onClick);
+	host.listen("keydown", this._onKeyDown);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.listen("rowPositionChanged", this._onRowPositionChanged);
+
+	let wrapper = this.getGridApi(host);
+	if(wrapper) {
+		wrapper.listen("beforeRowRemoved", this._onBeforeRowRemoved);
+	}
+
+	// TODO:: listen to copy and cut event when implement autoCopy config
+
+	this.config(options);
+
+	if(this._onMenuClicked) { // use styles menu icon only when want to use icon menu
+		this.applyStaticStyles(RowSelectionPlugin._styleCalculator);
+	}
+};
+
+/** @public
+* @param {Object=} host core grid instance
+*/
+RowSelectionPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if(at < 0) { return; }
+
+	host.unlisten("mousedown", this._onMouseDown);
+	host.unlisten("click", this._onClick);
+	host.unlisten("keydown", this._onKeyDown);
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.unlisten("rowPositionChanged", this._onRowPositionChanged);
+
+	this._hosts.splice(at, 1);
+
+	if(!this._hosts.length) {
+		if(this._timerId) {
+			clearTimeout(this._timerId);
+			this._timerId = 0;
+			this._timerMenuId = 0;
+			this._pendingSelection = null;
+		}
+	}
+
+	this._dispose();
+};
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+RowSelectionPlugin.prototype.config = function (options) {
+	if(!options) {
+		return;
+	}
+
+	let pluginOptions = options["rowSelection"];
+
+	if(pluginOptions) {
+		if(typeof pluginOptions === "object") {
+			if(pluginOptions["singleSelection"]) {
+				this._singleSelMode = true;
+			}
+			if(pluginOptions["clickToggle"]) {
+				this._clickToggleMode = true;
+			}
+			if(pluginOptions["basedOnContent"]) {
+				this._basedOnContent = true;
+			}
+			if(pluginOptions["selectionField"]) {
+				this._selectionField = pluginOptions["selectionField"];
+			}
+			let val = pluginOptions["menuClicked"];
+			if(typeof val === "function"){
+				this._onMenuClicked = val;
+			}
+			val = pluginOptions["menuPosition"];
+			if(val) {
+				this._menuPosition = val;
+			}
+		} else if(pluginOptions === "single") {
+			this._singleSelMode = true;
+		}
+
+		this.addListener(pluginOptions, "selectionChanged");
+		this.addListener(pluginOptions, "beforeSelection");
+	} else if(pluginOptions != null) {
+		this.disable();
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj.rowSelection;
+	if(!extOptions) {
+		extOptions = obj.rowSelection = {};
+	}
+	if(this._singleSelMode) {
+		extOptions.singleSelection = this._singleSelMode;
+	}
+	if(this._clickToggleMode) {
+		extOptions.clickToggle = this._clickToggleMode;
+	}
+	if(this._basedOnContent) {
+		extOptions.basedOnContent = this._basedOnContent;
+	}
+	if(this._selectionField !== "SELECTED_ROW") {
+		extOptions.selectionField = this._selectionField;
+	}
+
+	return obj;
+};
+
+/** Clear all row selection on the active grid
+* @public
+* @param {boolean=} preserveAnchor=true If false, User cannot call Row Selection's apis if not specify an activeGrid. In most case, this argument should be true.
+* @param {Object=} activeGrid Grid for taking user key inputs after clearing
+*/
+RowSelectionPlugin.prototype.clearAllSelections = function (preserveAnchor, activeGrid) {
+	if(preserveAnchor == null) {
+		preserveAnchor = true;
+	}
+	this._clearSelectedRows(preserveAnchor);
+
+	if(activeGrid) {
+		this._activeGrid = activeGrid;
+	}
+};
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @param {boolean=} preserveAnchor
+* @param {Object=} activeGrid core grid instance
+* @see {@link RowSelectionPlugin#clearAllSelections}
+*/
+RowSelectionPlugin.prototype.clearSelectedRows = RowSelectionPlugin.prototype.clearAllSelections;
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @param {boolean=} preserveAnchor
+* @param {Object=} activeGrid core grid instance
+* @see {@link RowSelectionPlugin#clearAllSelections}
+*/
+RowSelectionPlugin.prototype.clearSelection = RowSelectionPlugin.prototype.clearAllSelections;
+
+
+/** @public
+* @return {Object} core grid instance
+*/
+RowSelectionPlugin.prototype.getActiveGrid = function () {
+	return this._activeGrid;
+};
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number} rowIndex of anchor
+*/
+RowSelectionPlugin.prototype.getRowAnchor = function (sectRef) {
+	if(this._basedOnContent) {
+		let dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if( dv && this._anchorRowId){
+			return dv.getRowIndex(this._anchorRowId);
+		}
+	} else {
+		let section = this._getSection(sectRef);
+		if(section && section.getRowAnchor){
+			return section.getRowAnchor();
+		}
+	}
+	return -1;
+};
+
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number|null}
+*/
+RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
+	let section = this._getSection(sectRef);
+	if(!section) {
+		return null;
+	} 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;
+		for(let rowIndex = 0; rowIndex < count; rowIndex++) {
+			if(this._isContentRowSelected(dv, rows[rowIndex], rowIndex)) {
+				return rowIndex;
+			}
+		}
+		return null;
+	} else {
+		return section.getFirstSelectedRow();
+	}
+};
+
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number|null}
+*/
+RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
+	let section = this._getSection(sectRef);
+	if(!section) {
+		return null;
+	} 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;
+		for(let rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
+			if(this._isContentRowSelected(dv, rows[rowIndex], rowIndex)) {
+				return rowIndex;
+			}
+		}
+		return null;
+	} else {
+		return section.getLastSelectedRow();
+	}
+};
+
+/** Returns null if there is no selection
+* @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {Array.<number>}
+*/
+RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
+	let section = this._getSection(sectRef);
+	if(!section) {
+		return null;
+	} 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 = [];
+		for(let rowIndex = 0; rowIndex < count; rowIndex++) {
+			if(this._isContentRowSelected(dv, rows[rowIndex], rowIndex)) {
+				selectedRows.push(rowIndex);
+			}
+		}
+		return selectedRows.length ? selectedRows : null;
+	} else {
+		return section.getSelectedRows();
+	}
+};
+/**
+* @private
+* @param {Object} dv
+* @param {Array<string>} rids
+* @param {boolean=} selected
+*/
+RowSelectionPlugin.prototype._setHeaderSelections = function(dv, rids, selected) {
+	if(selected == null) {
+		selected = true;
+	}
+	let len = rids.length;
+	for (let i = 0; i < len; i++) {
+		this._setHeaderSelection(dv, rids[i], selected);
+	}
+};
+
+/**
+* @private
+* @param {Object} dv
+* @param {sting|number} rowRef
+* @param {boolean=} selected
+*/
+RowSelectionPlugin.prototype._setHeaderSelection = function(dv, rowRef, selected) {
+	let rowId = this._getRowId(dv, rowRef);
+	if(rowId) {
+		this._headerSelection[rowId] = (selected == null) ? true : selected;
+	}
+};
+
+/**
+* @private
+* @param {Object} dv
+* @param {sting|number} rowRef
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._isHeaderSelection = function(dv, rowRef) {
+	return this._headerSelection[this._getRowId(dv, rowRef)] ? true : false;
+};
+
+/**
+* @private
+*/
+RowSelectionPlugin.prototype._clearHeaderSelection = function() {
+	this._headerSelection = {};
+};
+
+/**
+* @private
+* @param {Object} dv
+* @param {Object} rowData
+* @param {string|number} rowRef
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._isContentRowSelected = function(dv, rowData, rowRef) {
+	let dataRow = this._rowGetter(rowData);
+	if((dataRow && dataRow[this._selectionField]) || this._isHeaderSelection(dv, rowRef)) {
+		return true;
+	}
+	return false;
+};
+
+/**
+* @private
+* @param {number} rowIndex
+* @param {boolean=} select
+* @return {string|null} rowId of rowIndex
+*/
+RowSelectionPlugin.prototype._addSelectionField = function(rowIndex, select) {
+	if(select == null) {
+		select = true;
+	}
+	let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+	if(!dv) {
+		return null;
+	}
+	let dataRow = this._getRow(dv, rowIndex);
+	if(dataRow) {
+		this._setData(dv, rowIndex, this._selectionField, select);
+	} else {
+		this._setHeaderSelection(dv, rowIndex, select);
+	}
+	let rowId = dv.getRowId(rowIndex) || null;
+	return rowId;
+};
+
+/**
+* @private
+* @param {Object} dv
+* @param {string|number} rowRef
+* @return {string}
+*/
+RowSelectionPlugin.prototype._getRowId = function(dv, rowRef) {
+	let rowId = rowRef;
+	if(typeof rowRef === "number") {
+		rowId = dv.getRowId(rowRef);
+	}
+	return rowId;
+};
+
+/** Returns null if there is no selection
+* @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {Array.<string>}
+*/
+RowSelectionPlugin.prototype.getSelectedRowIds = function (sectRef) {
+	let rids = null;
+	let len, i;
+
+	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) {
+			rids[i] = rowIds[selRows[i]] || "";
+		}
+	}
+
+	return rids;
+};
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number}
+*/
+RowSelectionPlugin.prototype.getSelectedRowCount = function (sectRef) {
+	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();
+	}
+};
+/** @public
+* @param {number} rowIndex
+* @param {boolean=} opt_select
+* @param {Object=} sectRef Grid SectionReference
+*/
+RowSelectionPlugin.prototype.setSelectedRow = function (rowIndex, opt_select, sectRef) {
+	let section = this._getSection(sectRef);
+	if(!section) { return; }
+	this._sectionSetSelectedRow(section, rowIndex, opt_select);
+	this._updateContentRowSelectionUI(section, rowIndex, 1, opt_select); // Force update header without data changed
+};
+/**
+* @public
+* @param {number} rowIndex
+* @param {Object=} sectRef Grid SectionReference
+* @param {Object=} activeGrid core grid instance
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype.selectSingleRow = function (rowIndex, sectRef, activeGrid) {
+	if(!(rowIndex >= 0)) { return false; }
+
+	let prevGrid = null;
+	if(activeGrid) {
+		prevGrid = this._activeGrid;
+		if(prevGrid) { // In case of multi-table, clear selection on the previous active grid
+			this._clearSelectedRows();
+		}
+		this._activeGrid = activeGrid;
+	}
+
+	// WANRING: this._getSection will modify activeGrid, if it does not exist
+	let section = this._getSection(sectRef);
+	if(this._selectSingleRow(section, rowIndex)) { // This will also clear existing selection in the active grid
+		this._scrollToRow(rowIndex);
+		return true;
+	}
+
+	if(prevGrid) {
+		this._activeGrid = prevGrid; // If the selection is unsuccessful, restore previous active grid
+	}
+	return false;
+};
+/** @public
+* @param {Object=} activeGrid core grid instance
+*/
+RowSelectionPlugin.prototype.selectAllRows = function (activeGrid) {
+	if(activeGrid) {
+		this._activeGrid = activeGrid;
+	} else if(!this._activeGrid) {
+		this._activeGrid = this._hosts[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) {
+				this._anchorSection = sections[i];
+			}
+		}
+	}
+	this._updateMenuIcon();
+};
+
+/** @public
+* @param {number} rowIndex
+* @param {number} length
+* @param {Object=} sectRef Grid SectionReference
+* @param {boolean=} opt_scrollToRow
+*/
+RowSelectionPlugin.prototype.selectRowRange = function (rowIndex, length, sectRef, opt_scrollToRow) {
+	this._selectRowRange(rowIndex, length, sectRef);
+
+	if(opt_scrollToRow) {
+		this._scrollToRow(rowIndex);
+	}
+	this._updateContentRowSelectionUI(sectRef, rowIndex, length, true); // This method can't de-select
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowSelectionPlugin.prototype.disable = function (disabled) {
+	this._disabled = disabled !== false;
+};
+/** @public
+* @return {boolean} enabled
+*/
+RowSelectionPlugin.prototype.isEnabled = function () {
+	return !this._disabled;
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowSelectionPlugin.prototype.disableMultiSelection = function (disabled) {
+	this._singleSelMode = disabled !== false;
+};
+
+/** Focus the active grid only if there is no selected text
+* @private
+* @param {boolean=} force
+* @returns {boolean} Returns true if there is any change
+*/
+RowSelectionPlugin.prototype._focusGrid = function (force) {
+	if(this._activeGrid) {
+		if(force || !window.getSelection().toString()) {
+			this._activeGrid.focus();
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onClick = function (e) {
+	if(this._pendingClickIndex >= 0) {
+		let performClick = (this._activeGrid && this._anchorSection) ? true : false;
+		if(performClick) {
+			let curPos = this._activeGrid.getRelativePosition(e);
+			performClick = curPos.rowIndex === this._pendingClickIndex && curPos.section === this._anchorSection;
+		}
+		if(performClick) {
+			this._selectSingleRow(this._anchorSection, this._pendingClickIndex);
+			this._focusGrid();
+
+			if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+				this._updateMenuIcon();
+			}
+			this._dispatchSelectionChanged(e);
+		}
+		this._pendingClickIndex = -1;
+	}
+};
+/** @public
+* @description Select a specified row as if it were clicked by a mouse. This is for testing purpose.
+* @ignore
+* @param {number} rowIndex
+* @param {Object=} mouseEvt
+*/
+RowSelectionPlugin.prototype.selectByMouse = function (rowIndex, mouseEvt) {
+	let eventObj = this._mockMouseEvent(0, rowIndex, mouseEvt);
+	this._onMouseDown(eventObj);
+};
+
+/** @public
+* @description Select a specified row as if it were modified by a keyboard input. This is for testing purpose.
+* @ignore
+* @param {number|string} keyCode Use key code number or "up", "down" string
+* @param {Object=} keyboardEvt
+*/
+RowSelectionPlugin.prototype.selectByKey = function (keyCode, keyboardEvt) {
+	let eventObj = this._mockKeyboardEvent(keyCode, keyboardEvt);
+	this._onKeyDown(eventObj);
+};
+
+/** @private
+* @description Left click will cause single row selection <br>
+* Shift + left click will cause range selection <br>
+* Ctrl + left click will cause inclusion selection <br>
+* Shift/Ctrl + right click will cause single row selection <br>
+* Middle click has no effect
+* @suppress {checkTypes}
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onMouseDown = function (e) {
+	if(this._disabled) {
+		return;
+	}
+	if(e.button === 2) { // Right click
+		if(e.shiftKey || e.ctrlKey) {
+			return;
+		}
+	}
+
+	this._pendingClickIndex = -1;
+	let host = this.getRelativeGrid(e);
+
+	if(!host) {
+		return;
+	}
+
+	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;
+			}
+		}
+	}
+	let rowIndex = ctx["rowIndex"];
+
+	if(this._dispatchBeforeSelection(e, ctx)) {
+		return;
+	}
+
+	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.
+			this._selectFromAnchorToTarget(section, rowIndex);
+		} 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
+		this._anchorSection = section;
+		if(prevSel) { // Click on the selected row
+			// Delay the operation to allow drag and drop operation
+			this._pendingClickIndex = rowIndex;
+			return;
+		} else { // Perform single click immediately
+			let prevGrid = this._activeGrid;
+
+			// clear selection row in prevGrid first if prev and current host not the same
+			if(prevGrid !== host) {
+				this._clearSelectedRows(true);
+				this._activeGrid = host;
+			}
+
+			this._selectSingleRow(this._anchorSection, rowIndex);
+		}
+	}
+
+	if(this._focusGrid(!prevSel)) {
+		e.preventDefault(); // Prevent changing focus due to clicking on unfocusable element
+	}
+
+	if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+		this._updateMenuIcon();
+	}
+
+
+	this._dispatchSelectionChanged(e, rowIndex, section);
+};
+
+/** @private
+* @param {KeyboardEvent} e
+*/
+RowSelectionPlugin.prototype._onKeyDown = function (e) {
+	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.
+	//Page Up/Down move a row selection up/down by page scroll.
+	//Page Up/Down and shift select every rows from anchor point to the next page scroll, compared to the current position.
+	switch (e.keyCode) {
+	case 33: //Page up
+		this._selectByKey(-1, e, true);
+		break;
+	case 34: //Page down
+		this._selectByKey(1, e, true);
+		break;
+	case 35: //End
+		this._selectByKey(1, e, true);
+		break;
+	case 36: //Home
+		this._selectByKey(-1, e, true);
+		break;
+	case 37: //Left arrow
+		if(this._dispatchBeforeSelection(e)) {
+			return;
+		}
+		if(this._gotoPrevGrid()) {
+			EventDispatcher.preventDefault(e);
+		}
+		break;
+	case 38: //Up arrow
+		this._selectByKey(-1, e);
+		break;
+	case 39: //Right arrow
+		if(this._dispatchBeforeSelection(e)) {
+			return;
+		}
+		if(this._gotoNextGrid()) {
+			EventDispatcher.preventDefault(e);
+		}
+		break;
+	case 40: //Down arrow
+		this._selectByKey(1, e);
+		break;
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onBeforeRowRemoved = function (e) {
+	if(this._timerId) {
+		return;
+	}
+
+	this._pendingSelection = this.getFirstSelectedIndex();
+	this._timerId = setTimeout(this._onReselection, 10);
+};
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onReselection = function (e) {
+	this._timerId = 0;
+
+	if(this._pendingSelection != null) {
+		let firstSel = this.getFirstSelectedIndex();
+		if(firstSel == null) { // Only perform reselection if the last selection has been removed
+			this.setSelectedRow(this._pendingSelection, true);
+		}
+	}
+
+	this._pendingSelection = null;
+};
+
+/** @private
+* @param {Object} e postSectionDataBinding event context
+*/
+RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
+	if(!this._basedOnContent || e.sectionType !== "content") {
+		return;
+	}
+	let section = e.section;
+	let dv = e.dataSource;
+
+	section.clearSelectedRows();
+
+	let fromR = section.getFirstIndexInView();
+	let toR = section.getLastIndexInView();
+	for(let r = fromR; r <= toR; ++r) {
+		if(this._isContentRowSelected(dv, dv.getRowDataAt(r), r)) {
+			section.setSelectedRow(r, true);
+		}
+	}
+	this._updateMenuIcon();
+};
+
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} startRowIndex
+* @param {number} length
+* @param {boolean} select
+*/
+RowSelectionPlugin.prototype._updateContentRowSelectionUI = function (section, startRowIndex, length, select) {
+	if(!this._basedOnContent) {
+		return;
+	}
+	let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+	if(!dv) {
+		return;
+	}
+	if(section == null) {
+		section = this._getSection();
+	}
+
+	let len = startRowIndex + length;
+	for (let r = startRowIndex; r <= len; r++) {
+		if(this._isContentRowSelected(dv, dv.getRowDataAt(r), r)) {
+			section.setSelectedRow(r, select);
+		}
+	}
+
+	this._updateMenuIcon();
+};
+
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onRowPositionChanged = function (e) {
+	if(this._timerMenuId) {
+		return;
+	}
+	if(e.sender && e.sender === this._activeGrid) {
+		this._clearMenuIcon(); // Clear icon before re-renderer
+		this._timerMenuId = setTimeout(this._updateMenuIcon, 800);
+	}
+};
+
+/** Get text from selected cells. If no selection, return empty string. <br>
+* Text will be converted to Tab-separated values format, representing tabular structure. <br>
+* Newlines (\n, \r), Tab (\t) and <br> will be converted to single space. Connecting spaces will remain intact.
+* @public
+* @return {string}
+*/
+RowSelectionPlugin.prototype.getSelectedText = function () {
+	// work only with composit and realtime
+	if(!this._compositeGrid && !this._realTimeGrid) return "";
+
+	let selectedRows = this.getSelectedRows();
+	let rowCount = selectedRows ? selectedRows.length : 0;
+	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
+
+			// data row
+			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
+				let cField = this._getField(colIndex);
+				text += prepareTSVContent(rowData[cField]);
+			}
+		}
+	}
+	return text;
+};
+
+/** @private
+* @param {Object=} sectRef Grid SectionReference
+* @return {Object} ILayoutGrid
+*/
+RowSelectionPlugin.prototype._getSection = function (sectRef) {
+	if(!this._activeGrid) {
+		this._activeGrid = this._hosts[0];
+		if(this._activeGrid) {
+			this._anchorSection = this._activeGrid.getSection("content");
+			if(!this._anchorSection) {
+				this._activeGrid = null;
+			}
+		}
+	}
+	if(sectRef) {
+		return this._activeGrid.getSection(sectRef);
+	}
+
+	if(this._anchorSection) {
+		if(!this._anchorSection.getElement()) { // The section may has been disposed.
+			this._anchorSection = null;
+		}
+	}
+
+	return this._anchorSection;
+};
+
+/** @private
+* @param {boolean=} preserveAnchor
+*/
+RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { // Slow
+	if(!this._activeGrid) {
+		return;
+	}
+	if(this._basedOnContent) {
+		let dv = this._activeGrid.getDataSource();
+		if(dv) {
+			let dt = dv.getDataSource();
+			this._setColumnData(dt, this._selectionField, false);
+			this._clearHeaderSelection();
+		}
+	} else {
+		let sections = this._activeGrid.getAllSections("content");
+		for(let i = sections.length; --i >= 0;) {
+			this._sectionClearSelectedRows(sections[i], preserveAnchor);
+		}
+	}
+
+	if(!preserveAnchor) {
+		this._anchorSection = null;
+	}
+	this._pendingClickIndex = -1;
+	this._clearMenuIcon();
+};
+/** @private
+* @suppress {missingProperties}
+* @param {number} direction
+* @param {KeyboardEvent} e
+* @param {boolean=} pageKey
+*/
+RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
+	e.preventDefault();
+
+	if(!this._anchorSection) { return; }
+
+	this._focusGrid(true);
+
+	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) {
+				next = this.getLastSelectedIndex(this._anchorSection) >= info["lastFullRow"] ? info["nextPageRowIndex"] : info["lastFullRow"];
+			} else {
+				next = rowLimit;
+			}
+		}
+	} else {
+		if(direction === -1) {
+			next = this.getFirstSelectedIndex(this._anchorSection) + direction;
+		} else {
+			next = this.getLastSelectedIndex(this._anchorSection) + direction;
+		}
+	}
+	if(next < 0) {
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(!shiftKey && csp && csp["isEnabled"]()) {
+			csp["selectSingleColumn"](null, this._activeGrid);
+
+			this.clearAllSelections();
+			return;
+		}
+		this._scrollToRow(0);
+		return;
+	} else if(next > rowLimit) {
+		this._scrollToRow(rowLimit);
+		return;
+	}
+
+	if(this._dispatchBeforeSelection(e)) {
+		return;
+	}
+
+	if(shiftKey && !this._singleSelMode) {
+		this._selectFromAnchorToTarget(this._anchorSection, next);
+	} else {
+		this._selectSingleRow(this._anchorSection, next);
+	}
+
+	this._scrollToRow(next);
+	if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+		this._updateMenuIcon();
+	}
+	this._dispatchSelectionChanged(e, next);
+};
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+* @param {boolean} select
+*/
+RowSelectionPlugin.prototype._sectionSetSelectedRow = function (section, rowIndex, select) {
+	// set selection state to rowData when _basedOnContent === true
+	if(this._basedOnContent) {
+		let rowId = this._addSelectionField(rowIndex, select);
+		if(select && rowId != null) {
+			this._anchorRowId = rowId;
+		}
+	} else {
+		section.setSelectedRow(rowIndex, select);
+	}
+	this._pendingSelection = null; // New selection happens before resolving the pending selection
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number|null} rowIndex
+* @param {number|null} length
+*/
+RowSelectionPlugin.prototype._selectRangeOnSection = function (section, rowIndex, length) {
+	if(rowIndex == null) {
+		rowIndex = 0;
+	}
+	if(this._basedOnContent) { // TODO: handle the case where section is not content section
+		let dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+
+		if(dv) {
+			let rids = dv.getVisibleRowIds(true);
+			if(length == null) {
+				length = rids.length;
+			}
+			let toRowIndex = rowIndex + length;
+			if(toRowIndex > rids.length) {
+				toRowIndex = rids.length;
+			}
+			let ridList = [];
+			let valueList = [];
+			let ridHeaders = [];
+			for(let r = rowIndex; r < toRowIndex; r++) {
+				let dataRow = this._getRow(dv, r);
+				if(dataRow) {
+					ridList.push(rids[r]);
+					valueList.push(true);
+				} else {
+					ridHeaders.push(r);
+				}
+			}
+
+			this._setColumnData(dv, this._selectionField, valueList, ridList);
+			this._setHeaderSelections(dv, ridHeaders);
+		}
+	} else {
+		if(length == null) {
+			length = section.getRowCount();
+		}
+		section.selectRowRange(rowIndex, length);
+	}
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {boolean=} preserveAnchor
+*/
+RowSelectionPlugin.prototype._sectionClearSelectedRows = function (section, preserveAnchor) {
+	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);
+				this._setHeaderSelections(dv, selectedRowIds, false);
+			}
+		}
+		if(!preserveAnchor) {
+			this._anchorRowId = "";
+		}
+	} else {
+		section.clearSelectedRows();
+	}
+};
+
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._selectSingleRow = function (section, rowIndex) {
+	if(!section) { return false; }
+
+	this._clearSelectedRows(); // Deselect all rows
+	this._sectionSetSelectedRow(section, rowIndex, true); // The anchor row is set
+	this._anchorSection = section;
+	return true;
+};
+
+/** @private
+* @return {boolean} return true if can added icon
+*/
+RowSelectionPlugin.prototype._updateMenuIcon = function () {
+	this._timerMenuId = 0;
+	if(!this._onMenuClicked) {
+		return false;
+	}
+	let host = this._activeGrid;
+	let startRowIndex = this.getFirstSelectedIndex();
+	if(startRowIndex == null || !host) { // have no selected rows
+		return false;
+	}
+	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);
+		let coralIcon = document.createElement("ef-icon");
+		coralIcon.icon = "most-detail";
+		this._menuButton.appendChild(coralIcon);
+	}
+
+	parentEl.appendChild(this._menuButton);
+
+	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;
+	}
+
+	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;
+
+		if(rowRect.top < menuIconSize) {
+			topOffset = rowRect.top + rowRect.scrollViewTop;
+		}
+
+	} else {
+		if(rowRect.top <= 0) {
+			topOffset = rowRect.scrollViewTop;
+		}
+
+		if(rowRect.top + menuIconSize >= rowRect.scrollViewSize) { // when move from top to bottom and try to set new position icon
+			topOffset = rowRect.scrollViewSize;
+		}
+	}
+
+	this._menuButton.style.left = leftOffset + "px";
+	this._menuButton.style.top = topOffset + "px";
+	return true;
+};
+
+/** @private */
+RowSelectionPlugin.prototype._clearMenuIcon = function () {
+	if(this._menuButton && this._menuButton.parentNode) {
+		this._menuButton.parentNode.removeChild(this._menuButton);
+	}
+};
+/** @private
+* @param {number|null} rowIndex
+* @param {number|null} length
+* @param {Object=} sectRef Grid SectionReference
+*/
+RowSelectionPlugin.prototype._selectRowRange = function (rowIndex, length, sectRef) {
+	let section = this._getSection(sectRef);
+	if(section) {
+		this._selectRangeOnSection(section, rowIndex, length);
+	}
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+*/
+RowSelectionPlugin.prototype._selectFromAnchorToTarget = function (section, 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
+			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) {
+				//Make sure that the anchor stays at the same position
+				this._anchorSection.setRowAnchor(anchorRow);
+			}
+		}
+	}
+};
+
+/** @private
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._gotoPrevGrid = function () {
+	if(!this._activeGrid) { return false; }
+
+	if(this._activeGrid === this._hosts[0]) { // This is the first grid
+		return false;
+	} else {
+		let curIndex = this._hosts.indexOf(this._activeGrid);
+		if(curIndex > 0) {
+			this._gotoGrid(curIndex - 1);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._gotoNextGrid = function () {
+	if(!this._activeGrid) { return false; }
+
+	let lastIndex = this._hosts.length - 1;
+	if(this._activeGrid === this._hosts[lastIndex]) { // This is the last grid
+		return false;
+	} else {
+		let curIndex = this._hosts.indexOf(this._activeGrid);
+		if(curIndex >= 0) {
+			this._gotoGrid(curIndex + 1);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {number} gridIndex
+*/
+RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
+	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
+	this._focusGrid(true);
+};
+
+/** @private
+* @param {number} rowIndex
+*/
+RowSelectionPlugin.prototype._scrollToRow = function (rowIndex) {
+	let host = this._hosts[0];
+	if(host) {
+		host.scrollToRow(null, rowIndex);
+	}
+};
+
+/** Dispatch beforeSelection event and return rather clients prefer cancel selection or not
+* @private
+* @param {Event} e
+* @param {Object=} ctx
+* @return {boolean} return rather clients prefer cancel selection or not
+*/
+RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
+	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"]) {
+			return true; // return true if clients want to cancel this event
+		}
+	}
+
+	return false;
+};
+/** @private
+* @param {Event} e
+* @param {number=} rowIndex
+* @param {Object=} section ILayoutGrid
+*/
+RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
+	if(this._activeGrid) {
+		let csp = this._getPlugin("ColumnSelectionPlugin");
+		if(csp && csp["isEnabled"]()) {
+			csp["clearSelection"]();
+		}
+		let cep = this._getPlugin("CellEditingPlugin");
+		if(cep) {
+			cep.closeCellEditor();
+		}
+		cep = this._getPlugin("InCellEditingPlugin");
+		if(cep) {
+			cep.closeCellEditor();
+		}
+	}
+
+	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;
+		obj["event"] = e;
+		obj["grid"] = this._activeGrid;
+		this._dispatch("selectionChanged", obj);
+	}
+};
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+RowSelectionPlugin.prototype._getEventHandlers = function() {
+	return {
+		"mousedown": this._onMouseDown,
+		"click": this._onClick,
+		"keydown": this._onKeyDown
+	};
+};
+
+
+
+export default RowSelectionPlugin;
+export { RowSelectionPlugin, RowSelectionPlugin as RowSelection, RowSelectionPlugin as RowSelectionExtension };