@refinitiv-ui/efx-grid 6.0.19 → 6.0.20

package/lib/column-selection-dialog/lib/column-selection-dialog.d.ts

@@ -22,7 +22,8 @@ declare namespace ColumnSelectionDialog {
         excludedLeftColumns?: number|null,
         excludedRightColumns?: number|null,
         unmovableColumns?: number|null,
-        descriptionBox?: boolean|null
+        descriptionBox?: boolean|null,
+        middleSeparator?: string|null
     };
 
 }

package/lib/column-selection-dialog/lib/column-selection-dialog.js

@@ -21,6 +21,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
  * @property {number=} excludedRightColumns Number of columns on the right side that should be hidden from Visible Columns.
  * @property {number=} unmovableColumns Depricated, Alias with stationary column option. Number of columns that is unmovable in Visible Columns.
  * @property {boolean=} descriptionBox Show description box
+ * @property {string=} middleSeparator Field of column which used as middle separator to divide grid into two sides
 */
 
 /** Insert multiple items to the given array. This is an in-place modification.
@@ -492,6 +493,7 @@ class ColumnSelectionDialog extends BasicElement {
 		this._highlightedElem = null; // There can only one highlighted elem
 		this._pendingTreeRefresh = false;
 		this._pendingResetSearchInput = false;
+		this._middleSeparator = "";
 
 		this._allItemMapping = {};
 		this._filterItemMapping = {};
@@ -838,6 +840,7 @@ class ColumnSelectionDialog extends BasicElement {
 		var itemCount = visibleItems.length;
 
 		var autoGeneratedColumnCount = _countAutoGenerated(visibleItems);
+		var middleSeparator = config.middleSeparator;
 
 		var excludedLeftColumns = config.excludedLeftColumns;
 		if (excludedLeftColumns == null && config.excludedColumns != null) {
@@ -869,6 +872,11 @@ class ColumnSelectionDialog extends BasicElement {
 				}
 			}
 
+			if(middleSeparator && item.field === middleSeparator){
+				item.disabled = true;
+				this._middleSeparator = middleSeparator;
+			}
+
 		}
 
 		this._allColumnList = allItems.map(function (obj) {
@@ -973,7 +981,25 @@ class ColumnSelectionDialog extends BasicElement {
 			return false;
 		}
 
-		return _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
+		var colItem = this._allItemMapping[obj.value];
+		var movable = _ensurePositiveNumber(itemIndex) >= this._unmovableColumns;
+		if(this._middleSeparator && colItem.rawValue == this._middleSeparator){
+			movable = false;
+		}
+
+		return movable;
+	}
+
+	/** Get visible middle separator  column index
+	 * @private
+	 * @return {number}
+	 */
+	 _getVisibleSeparatorIndex() {
+		if(!this._middleSeparator){
+			return -1;
+		}
+		var separatorCol = this._allItemMapping[this._middleSeparator];
+		return getItemIndex(this._visibleColumnList, separatorCol.value, "value");
 	}
 
 	/** This will also remove focused state set by ef-item
@@ -1420,6 +1446,27 @@ class ColumnSelectionDialog extends BasicElement {
 				break;
 			}
 		}
+
+		// disabled move button when selection are in different section between separator
+		if(c > 1 && this._middleSeparator){
+			var separatorIndex = this._getVisibleSeparatorIndex();
+			var aboveSeparator = false;
+			var belowSeparator = false;
+
+			for(i = 0; i < c; i++){
+				selectedIndex = moveableList[i];
+				if(selectedIndex < separatorIndex){
+					aboveSeparator = true;
+				} else if(selectedIndex > separatorIndex){
+					belowSeparator = true;
+				}
+				if(aboveSeparator && belowSeparator){
+					this._downItem.disabled = true;
+					this._upItem.disabled = true;
+					break;
+				}
+			}
+		}
 	}
 
 	/**
@@ -1507,6 +1554,9 @@ class ColumnSelectionDialog extends BasicElement {
 	_selectAllCheckedChanged(e) {
 		var selected = e.detail.value;
 		var items = [];
+
+		var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
+
 		for (var key in this._filterItemMapping) {
 			var item = this._filterItemMapping[key];
 			if (item.disabled || item.isGroup) continue; // ignore disabled item and groupItem
@@ -1517,7 +1567,7 @@ class ColumnSelectionDialog extends BasicElement {
 		}
 
 		if (selected) {
-			this._addToVisibleColumn(items);
+			this._addToVisibleColumn(items, highligtedRows);
 		} else {
 			this._removeFromVisibleColumn(items);
 		}
@@ -1540,6 +1590,8 @@ class ColumnSelectionDialog extends BasicElement {
 			selectedMapping[value] = true;
 		}
 
+		var highligtedRows = _getSelectedItemIndexes(this._visibleColumnList);
+
 		// clear all selected item on visible column
 		this._visibleColumnList.forEach(deselectItem);
 
@@ -1562,7 +1614,7 @@ class ColumnSelectionDialog extends BasicElement {
 			}
 		}
 		this._removeFromVisibleColumn(removeList);
-		this._addToVisibleColumn(addList);
+		this._addToVisibleColumn(addList, highligtedRows);
 		this._updateSelectAllStatus();
 		this.requestUpdate();
 	}
@@ -1581,12 +1633,16 @@ class ColumnSelectionDialog extends BasicElement {
 
 	/**
 	* @param {Array} items
+	* @param {Array<number>=} highligtedRows
 	* @private
 	*/
-	_addToVisibleColumn(items) {
-		var c = items.length;
-		if (c === 0) return;
-		for (var i = 0; i < c; i++) {
+	_addToVisibleColumn(items, highligtedRows) {
+		var itemCount = items.length;
+		var separatorIndex = this._middleSeparator ? getItemIndex(this._allColumnList, this._middleSeparator, 'rawValue') : -1;
+		var i, j;
+		if (itemCount === 0) return;
+		for (i = 0; i < itemCount; i++) {
+			var visibleSeparatorIndex = this._getVisibleSeparatorIndex();
 			var item = items[i];
 			if(item.isUnique) {
 				continue;
@@ -1597,8 +1653,33 @@ class ColumnSelectionDialog extends BasicElement {
 			if(this._allItemMapping[rawValue].isDuplicate && this._allItemMapping[item.value].strGroup) {
 				coralItem.label = coralItem.label + ' (' + this._allItemMapping[item.value].strGroup + ')';
 			}
+			var index = getItemIndex(this._allColumnList, item.value, 'value');
 			coralItem.selected = true;
-			this._visibleColumnList.push(coralItem);
+
+			var isInserted = false;
+			if(separatorIndex !== -1 && index < separatorIndex){
+				for(j = 0; j < highligtedRows.length; j++){
+					if(highligtedRows[j] < visibleSeparatorIndex){
+						this._visibleColumnList.splice(highligtedRows[j], 0, coralItem);
+						isInserted = true;
+						break;
+					}
+				}
+				if(!isInserted){
+					this._visibleColumnList.splice(visibleSeparatorIndex, 0, coralItem);
+				}
+			} else {
+				for(j = 0; j < highligtedRows.length; j++){
+					if(highligtedRows[j] > visibleSeparatorIndex){
+						this._visibleColumnList.splice(highligtedRows[j], 0, coralItem);
+						isInserted = true;
+						break;
+					}
+				}
+				if(!isInserted){
+					this._visibleColumnList.push(coralItem);
+				}
+			}
 		}
 		this._pendingScroll = true;
 		this._pendingButtonUpdate = true;

package/lib/filter-dialog/lib/checkbox-list.js

@@ -5,59 +5,72 @@ import "@refinitiv-ui/elements/item";
 import "@refinitiv-ui/elements/checkbox";
 import translation from "./locale/translation.js";
 
-/**
+/** @type {number}
 * @private
-* @param {Object=} states
+* @constant
+*/
+const ITEM_LIMIT = 500;
+
+/** @private
+* @function
+* @param {*=} val
 * @return {string}
 */
-const _getStateText = function(states) {
-	if(typeof states === "string") {
-		return states;
-	} else if(states) {
-		return states.title || states.label || "";
+const _toLabelText = function(val) {
+	if(typeof val === "string") {
+		return val;
+	} else if(val) {
+		return val.title || val.label || "";
 	}
 	return "";
 };
-/**
-* @private
-* @param {Element} item
-* @param {Object=} states
+/** @private
+* @function
+* @param {*} val
+* @param {number} idx
+* @return {!Object}
 */
-const _updateItemStates = function(item, states) {
-	item._label.textContent = _getStateText(states);
-	item._checkbox.checked = (states && states.checked) ? true : false;
+const _toItemStates = function(val, idx) {
+	return {
+		label: _toLabelText(val),
+		checked: (val && val.checked) ? true : false,
+		index: idx,
+		elem: null
+	};
 };
-/**
-* @private
-* @param {Array.<Element>} ary Array of Items
-* @param {(string|Function)=} inputFilter
-* @return {!Array} Array containing filtered data objects
+/** @private
+* @function
+* @param {!Object} state
+* @param {*} val
 */
-const _filter = function(ary, inputFilter) {
-	var len = ary ? ary.length : 0;
-	if(!len || !inputFilter) {
-		return ary; // No new copy is generated
+const _assignItemState = function(state, val) {
+	state.label = _toLabelText(val);
+	state.checked = (val && val.checked) ? true : false;
+	if(state.elem) {
+		_updateElement(state.elem, state.label, state.checked);
 	}
-
-	var filterMethod, ctx;
-	if(typeof inputFilter === "function") {
-		filterMethod = inputFilter;
-		ctx = ary;
-	} else {
-		filterMethod = _caseInsensitiveFilter;
-		ctx = (inputFilter + "").toLowerCase(); // Convert to lowercased string for case insensitive comparison
+};
+/** @private
+* @function
+* @param {!Object} state
+* @return {boolean}
+*/
+const _getCheckedState = function(state) {
+	return state.elem ? state.elem._checkbox.checked : state.checked;
+};
+/** @private
+* @function
+* @param {!Element} elem
+* @param {string} txt
+* @param {boolean} checked
+*/
+const _updateElement = function(elem, txt, checked) {
+	if(elem._label.textContent !== txt) {
+		elem._label.textContent = txt;
 	}
-
-	var filteredList = [];
-	for(var i = 0; i < len; ++i) {
-		var elem = ary[i];
-		var str = elem._label.textContent;
-		if(filterMethod(str, i, ctx)) {
-			filteredList.push(elem);
-		}
+	if(elem._checkbox.checked !== checked) {
+		elem._checkbox.checked = checked;
 	}
-
-	return filteredList;
 };
 /** @private
 * @param {string} str
@@ -81,16 +94,19 @@ class CheckboxList extends BasicElement {
 	constructor() {
 		super();
 
-		this.lang = "en";
-		this._translation = translation;
 		this.selectAll = this.selectAll.bind(this);
 		this.deselectAll = this.deselectAll.bind(this);
 		this._onItemClicked = this._onItemClicked.bind(this);
+		this._toItemElement = this._toItemElement.bind(this);
+		this._byLabelText = this._byLabelText.bind(this);
+
+		this.lang = "en";
+		this._translation = translation;
 
 		this._config = {};
+		this._states = []; // Item states before filtering
 		this._cachedItems = []; // To avoid repeatedly creating the same item element
 		this._items = []; // Actual existing elements (filtered items)
-		this._origItems = this._items; // Original items before being filtered
 		this._inputFilter = null;
 	}
 
@@ -152,38 +168,40 @@ class CheckboxList extends BasicElement {
 
 	updated(changedProps) {
 		if (changedProps.has("data")) {
-			var list = this.data;
-			var len = list ? list.length : 0;
-
+			var dataList = this.data;
+			var len = dataList ? dataList.length : 0;
 			if (this._cachedItems.length < len) {
 				this._cachedItems.length = len;
 			}
-			this._items = new Array(len);
-
-			for (var i = 0; i < len; i++) {
-				var item = this._cachedItems[i]; // ef-item
-				if (!item) {
-					item = this._cachedItems[i] = this._templateItemEl.cloneNode(true);
-					item.addEventListener("click", this._onItemClicked);
-
-					var itemContainer = item.firstChild; // div.item-container
-					item._checkbox = itemContainer.firstChild; // ef-checkbox
-					item._label = itemContainer.lastChild; // label
-				}
-				this._items[i] = item;
 
-				_updateItemStates(item, list[i]);
-			}
+			this._states = dataList.map(_toItemStates);
+			this._filterItems();
+			this._renderItems();
+		}
+	}
 
-			if (this._inputFilter) {
-				this._origItems = this._items;
-				this._items = _filter(this._origItems, this._inputFilter);
-			} else {
-				this._origItems = this._items;
+	/** @private
+	* @param {!Object} state
+	* @return {!Element}
+	*/
+	_toItemElement(state) {
+		var elem = state.elem;
+		if(!elem) {
+			var idx = state.index;
+			elem = this._cachedItems[idx];
+			if(!elem) {
+				elem = this._cachedItems[idx] = this._templateItemEl.cloneNode(true);
+				elem.addEventListener("click", this._onItemClicked);
+
+				var itemContainer = elem.firstChild; // div.item-container
+				elem._checkbox = itemContainer.firstChild; // ef-checkbox
+				elem._label = itemContainer.lastChild; // label
 			}
 
-			this._renderItems();
+			_updateElement(elem, state.label, state.checked);
+			state.elem = elem;
 		}
+		return elem;
 	}
 	/**
 	* @private
@@ -198,9 +216,11 @@ class CheckboxList extends BasicElement {
 		while(container.lastChild) {
 			container.removeChild(container.lastChild);
 		}
-		var len = this._items.length;
+
+		var ary = this._items;
+		var len = ary.length;
 		for(var i = 0; i < len; ++i) {
-			container.appendChild(this._items[i]);
+			container.appendChild(ary[i]);
 		}
 		this._updateSelectAllState();
 	}
@@ -228,9 +248,10 @@ class CheckboxList extends BasicElement {
 			return;
 		}
 
-		var len = this._items.length;
+		var states = this._states;
+		var len = states.length;
 		for(var i = 0; i < len; ++i) {
-			_updateItemStates(this._items[i], this.data[i]);
+			_assignItemState(states[i], this.data[i]);
 		}
 
 		this._updateSelectAllState();
@@ -242,11 +263,13 @@ class CheckboxList extends BasicElement {
 	*/
 	getSelectedItems() {
 		var items = [];
-		var len = this._items.length;
+		var states = this._states;
+		var len = states.length;
 		for(var i = 0; i < len; ++i) {
-			if(this._items[i]._checkbox.checked) {
+			var state = states[i];
+			if(_getCheckedState(state)) {
 				items.push({
-					title: this._items[i]._label.textContent,
+					title: state.label,
 					index: i
 				});
 			}
@@ -260,9 +283,10 @@ class CheckboxList extends BasicElement {
 	*/
 	selectAll(selected) {
 		selected = selected !== false;
-		var len = this._items.length;
+		var ary = this._items;
+		var len = ary.length;
 		for(var i = 0; i < len; ++i) {
-			this._items[i]._checkbox.checked = selected;
+			ary[i]._checkbox.checked = selected;
 		}
 		this._updateSelectAllState(selected);
 	}
@@ -288,18 +312,60 @@ class CheckboxList extends BasicElement {
 			dirty = true;
 		}
 		if(dirty) {
-			this._items = _filter(this._origItems, this._inputFilter);
+			this._filterItems();
 			this._renderItems();
 		}
 	}
 
+	/**
+	* @private
+	*/
+	_filterItems() {
+		var states = this._states;
+		var len = states ? states.length : 0;
+		if(!len) {
+			this._items.length = 0;
+			return; // No new copy is generated
+		}
+
+		var inputFilter = this._inputFilter;
+		if(inputFilter) {
+			if(typeof inputFilter === "function") {
+				this._filterMethod = inputFilter;
+				this._filterCtx = states;
+			} else {
+				this._filterMethod = _caseInsensitiveFilter;
+				this._filterCtx = (inputFilter + "").toLowerCase(); // Convert to lowercased string for case insensitive comparison
+			}
+			states = states.filter(this._byLabelText);
+
+			this._filterMethod = null;
+			this._filterCtx = null;
+		}
+
+		if(states.length > ITEM_LIMIT) {
+			states = states.slice(0, ITEM_LIMIT);
+		}
+
+		this._items = states.map(this._toItemElement);
+	}
+	/**
+	* @private
+	* @param {Object} state
+	* @param {number} idx
+	* @return {boolean}
+	*/
+	_byLabelText(state, idx) {
+		return this._filterMethod(state.label, idx, this._filterCtx);
+	}
+
 	/**
 	* @private
 	* @param {Event} e
 	*/
 	_onItemClicked(e) {
-		var itemEl = e.currentTarget;
 		if(e.target.tagName !== "EF-CHECKBOX") { // checkbox may already toggle its state
+			var itemEl = e.currentTarget;
 			itemEl._checkbox.checked = !itemEl._checkbox.checked;
 		}
 		this._updateSelectAllState();
@@ -315,10 +381,11 @@ class CheckboxList extends BasicElement {
 		}
 
 		if(selected == null) {
-			var len = this._items.length;
+			var ary = this._items;
+			var len = ary.length;
 			selected = len ? false : true;
 			for (var i = 0; i < len; i++) {
-				if (this._items[i]._checkbox.checked) {
+				if (ary[i]._checkbox.checked) {
 					selected = true;
 					break;
 				}

package/lib/filter-dialog/lib/filter-dialog.js

@@ -31,6 +31,11 @@ import "./checkbox-list.js";
  * @property {Function=} sortChanged Sort changed handler
 */
 
+/** @type {number}
+* @private
+* @constant
+*/
+const ITEM_LIMIT = 500;
 /** @type {Array.<Array>}
 * @private
 * @constant
@@ -411,8 +416,10 @@ class FilterDialog extends BasicElement {
 		if (changedProps.has("isShown")) {
 			if (this.isShown) {
 				this._updateUIState(); // should updateUIState everytime popup being show
-				this._popup.show(true); // Update positioning
+				this._popup.show(); // Update position
 				setTimeout(this._afterDialogOpened, 0); //use setTimeout to make sure everything is rendered before focus
+			} else { // This is to handle the case where isShown is directly modified from the dialog. We need to synchronize the states
+				this._popup.hide();
 			}
 		}
 	}
@@ -426,7 +433,7 @@ class FilterDialog extends BasicElement {
 			this._updateDialogHeight(true);
 			if(!this._firstRendered) {
 				this._firstRendered = true;
-				this._popup.show(true); // Update positioning
+				this._popup.show(); // Update position
 			}
 		}
 	}
@@ -837,19 +844,25 @@ class FilterDialog extends BasicElement {
 	* @private
 	*/
 	_updateValueSelector() {
-		this._dataSelector.data = this.data; // Preserve original referencing
-
-		let data = this.data || [];
-		let items = null;
+		let data = this.data;
+		let ary = null;
 		if (Array.isArray(data)) {
-			items = data;
+			ary = data;
+		} else if(data) {
+			ary = Object.keys(data); // TODO: Obsolete this
 		} else {
-			items = Object.keys(data); // TODO: Obsolete this
+			ary = [];
 		}
 
+		// Data selector can take large number of items
+		this._dataSelector.data = ary; // Preserve original referencing
+
 		// Value selector for Filter by Condition
-		this._generalComboBoxes[1].data = items.map(this._toComboBoxItem);
-		this._generalComboBoxes[3].data = items.map(this._toComboBoxItem);
+		if(ary.length > ITEM_LIMIT) {
+			ary = ary.slice(0, ITEM_LIMIT); // Prevent combo box from over population
+		}
+		this._generalComboBoxes[1].data = ary.map(this._toComboBoxItem);
+		this._generalComboBoxes[3].data = ary.map(this._toComboBoxItem);
 	}
 	/**
 	* @private

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.19" };
+window.EFX_GRID = { version: "6.0.20" };

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -4,27 +4,28 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
 import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowDraggingPlugin {
 
     type Options = {
-        dragBox?: boolean,
-        disabled?: boolean,
-        mouseInput?: boolean,
-        dataTransfer?: boolean,
-        autoScroll?: boolean,
-        dragBoxRenderer?: ((...params: any[]) => any),
-        dragStart?: ((...params: any[]) => any),
-        drag?: ((...params: any[]) => any),
-        dragEnd?: ((...params: any[]) => any),
-        dataMoved?: ((...params: any[]) => any)
+        dragBox?: boolean|null,
+        disabled?: boolean|null,
+        mouseInput?: boolean|null,
+        dataTransfer?: boolean|null,
+        autoScroll?: boolean|null,
+        dragBoxRenderer?: ((...params: any[]) => any)|null,
+        dragStart?: ((...params: any[]) => any)|null,
+        drag?: ((...params: any[]) => any)|null,
+        dragEnd?: ((...params: any[]) => any)|null,
+        dataMoved?: ((...params: any[]) => any)|null
     };
 
 }
 
 declare class RowDraggingPlugin extends GridPlugin {
 
-    constructor(options?: RowDraggingPlugin.Options);
+    constructor(options?: RowDraggingPlugin.Options|null);
 
     public hasMultiTableSupport(): boolean;
 
@@ -38,7 +39,7 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public getConfigObject(out_obj?: any): any;
 
-    public startDrag(startRef: any, opt_suppressEvent?: boolean): void;
+    public startDrag(startRef: any, opt_suppressEvent?: boolean|null): void;
 
     public stopDrag(): void;
 
@@ -46,11 +47,11 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public getGuideline(): Element|null;
 
-    public disable(disabled?: boolean): void;
+    public disable(disabled?: boolean|null): void;
 
     public isDisabled(): boolean;
 
-    public disableUIs(disabled?: boolean): void;
+    public disableUIs(disabled?: boolean|null): void;
 
 }
 

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -4,6 +4,7 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
 import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Object} RowDraggingPlugin~Options
 * @description Available options describing `rowDragging` object specified in grid's option
@@ -198,6 +199,14 @@ RowDraggingPlugin.prototype._autoScroll = true;
 */
 RowDraggingPlugin.prototype._dragUI = null;
 
+/** @private Applied theme color in row dragging and dragUI
+* @param {Object} host core grid instance
+*/
+var _applyStyles = function(host) {
+	RowDraggingPlugin._applyThemeColor(host);
+	DragUI.applyThemeColor(host);
+};
+
 /** Prevent built-in config
 * @public
 * @ignore
@@ -252,12 +261,12 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 	});
 
 	// Share dragging styles
-	if(DragUI.stylePromise) {
-		DragUI.applyThemeColor(host);
-	} else {
+	if(!DragUI.stylePromise) {
 		DragUI.stylePromise = ElfUtil.getThemeColors();
 		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
 	}
+	// TODO: Create a manager to manage styles. Currently, we have to use setTimeout to wait for an element to be created before applying styles
+	setTimeout(_applyStyles.bind(this, host), 0);
 
 	// In case of lazy loading
 	// host.getAllSections("content").forEach(this._registerSection);
@@ -284,10 +293,34 @@ RowDraggingPlugin.prototype.unload = function (host) {
 /** @private
 */
 RowDraggingPlugin.prototype._onThemeLoaded = function() {
+	if(!RowDraggingPlugin._styles) {
+		var styles = [
+			":host .row-dragging .cover-layer .selection-bound", [
+				"border: var(--grid-drag-indicator)"
+			],
+			":host .row-dragging .tr-lg .cell.selected-row", [
+				"background-color: unset;"
+			]
+		];
+		RowDraggingPlugin._styles = prettifyCss(styles);
+	}
+
 	var colors = ElfUtil.getColors();
 	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
 	for(var i = this._hosts.length; --i >= 0;) {
-		DragUI.applyThemeColor(this._hosts[i]);
+		_applyStyles(this._hosts[i]);
+	}
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+RowDraggingPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._rowDraggingStyles) {
+		return;
+	}
+	if(RowDraggingPlugin._styles) {
+		grid._rowDraggingStyles = true; // Prevent loading the same style twice
+		injectCss(RowDraggingPlugin._styles, grid.getParent());
 	}
 };
 
@@ -528,7 +561,9 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
 		// we should do something to overwrite pointer-events first
 		// then set cursor move will have an effect
-		grid.getElement().classList.add("mouse-dragging");
+		var gridElem = grid.getElement();
+		gridElem.classList.add("mouse-dragging");
+		gridElem.classList.add("row-dragging");
 
 		this._updateGuidePosition();
 
@@ -609,7 +644,10 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 	}
 
 	var srcGrid = this._startingGrid || this._hosts[0];
-	srcGrid.getElement().classList.remove("mouse-dragging");
+
+	var srcGridElem = srcGrid.getElement();
+	srcGridElem.classList.remove("mouse-dragging");
+	srcGridElem.classList.remove("row-dragging");
 
 	var destPos = this._pos; // This can be null
 	if(!this._isDragCancelled()) {

package/lib/types/es6/RowDragging.d.ts

@@ -4,27 +4,28 @@ import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
 import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowDraggingPlugin {
 
     type Options = {
-        dragBox?: boolean,
-        disabled?: boolean,
-        mouseInput?: boolean,
-        dataTransfer?: boolean,
-        autoScroll?: boolean,
-        dragBoxRenderer?: ((...params: any[]) => any),
-        dragStart?: ((...params: any[]) => any),
-        drag?: ((...params: any[]) => any),
-        dragEnd?: ((...params: any[]) => any),
-        dataMoved?: ((...params: any[]) => any)
+        dragBox?: boolean|null,
+        disabled?: boolean|null,
+        mouseInput?: boolean|null,
+        dataTransfer?: boolean|null,
+        autoScroll?: boolean|null,
+        dragBoxRenderer?: ((...params: any[]) => any)|null,
+        dragStart?: ((...params: any[]) => any)|null,
+        drag?: ((...params: any[]) => any)|null,
+        dragEnd?: ((...params: any[]) => any)|null,
+        dataMoved?: ((...params: any[]) => any)|null
     };
 
 }
 
 declare class RowDraggingPlugin extends GridPlugin {
 
-    constructor(options?: RowDraggingPlugin.Options);
+    constructor(options?: RowDraggingPlugin.Options|null);
 
     public hasMultiTableSupport(): boolean;
 
@@ -38,7 +39,7 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public getConfigObject(out_obj?: any): any;
 
-    public startDrag(startRef: any, opt_suppressEvent?: boolean): void;
+    public startDrag(startRef: any, opt_suppressEvent?: boolean|null): void;
 
     public stopDrag(): void;
 
@@ -46,11 +47,11 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public getGuideline(): Element|null;
 
-    public disable(disabled?: boolean): void;
+    public disable(disabled?: boolean|null): void;
 
     public isDisabled(): boolean;
 
-    public disableUIs(disabled?: boolean): void;
+    public disableUIs(disabled?: boolean|null): void;
 
 }
 

package/lib/types/es6/RowGrouping.d.ts

@@ -29,6 +29,7 @@ declare namespace RowGroupingPlugin {
         colorTag?: boolean|null,
         predefinedColors?: any,
         groupColors?: any,
+        defaultCollapse?: boolean|null,
         clicked?: ((...params: any[]) => any)|null,
         groupAdded?: ((...params: any[]) => any)|null,
         beforeGroupAdded?: ((...params: any[]) => any)|null,
@@ -84,6 +85,10 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setPredefinedColors(predefinedColors: any): void;
 
+    public setDefaultCollapse(collapse: boolean): void;
+
+    public getDefaultCollapse(): boolean;
+
     public sortGroups(): void;
 
     public updateHeaders(): void;

package/lib/versions.json

@@ -23,7 +23,7 @@
 	"tr-grid-percent-bar": "1.0.22",
 	"tr-grid-printer": "1.0.16",
 	"tr-grid-range-bar": "1.0.9",
-	"tr-grid-row-dragging": "1.0.23",
+	"tr-grid-row-dragging": "1.0.24",
 	"tr-grid-row-filtering": "1.0.55",
 	"tr-grid-row-grouping": "1.0.80",
 	"tr-grid-row-selection": "1.0.21",
@@ -31,7 +31,7 @@
 	"tr-grid-textformatting": "1.0.44",
 	"tr-grid-titlewrap": "1.0.19",
 	"@grid/formatters": "1.0.49",
-	"@grid/column-selection-dialog": "4.0.45",
-	"@grid/filter-dialog": "4.0.55",
+	"@grid/column-selection-dialog": "4.0.46",
+	"@grid/filter-dialog": "4.0.56",
 	"@grid/column-format-dialog": "4.0.43"
 }

package/package.json

@@ -58,5 +58,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.19"
+	"version": "6.0.20"
 }