@refinitiv-ui/efx-grid 6.0.28 → 6.0.30

package/lib/rt-grid/es6/ColumnDefinition.d.ts

@@ -91,6 +91,8 @@ declare class ColumnDefinition {
 
     public isTimeSeries(): boolean;
 
+    public isTimeSeriesChild(): boolean;
+
     public isFormulaField(): boolean;
 
     public static isFormulaField(field: string): boolean;

package/lib/rt-grid/es6/ColumnDefinition.js

@@ -590,6 +590,12 @@ ColumnDefinition.prototype.isTimeSeries = function() {
 /** @public
 * @return {boolean}
 */
+ColumnDefinition.prototype.isTimeSeriesChild = function() {
+	return FieldDefinition.isTimeSeriesChild(this.getField());
+};
+/** @public
+* @return {boolean}
+*/
 ColumnDefinition.prototype.isFormulaField = function() {
 	return this._formula ? true : false;
 };

package/lib/rt-grid/es6/FieldDefinition.d.ts

@@ -20,12 +20,16 @@ declare namespace FieldDefinition {
 
     function setFieldCaching(caching: boolean): void;
 
+    function disableTimeSeriesExpansion(disabled: boolean): void;
+
     function isFormula(field: string): boolean;
 
     function isAdc(field: string): boolean;
 
     function isRealTimeField(field: string): boolean;
 
+    function isTimeSeriesChild(field: string): boolean;
+
     function isTimeSeries(field: string): boolean;
 
 }

package/lib/rt-grid/es6/FieldDefinition.js

@@ -182,6 +182,11 @@ FieldDefinition._lang = 'en';
 * @private
 */
 FieldDefinition._caching = false;
+/**
+* @type {boolean}
+* @private
+*/
+FieldDefinition._timeSeriesExpansion = true;
 
 /**
  * @type {Object.<string, boolean>}
@@ -269,6 +274,14 @@ FieldDefinition.setFieldCaching = function (caching) {
 	FieldDefinition._caching = caching;
 };
 
+/** @public
+* @function
+* @param {boolean} disabled=true if disable it, time series will not be expand
+*/
+FieldDefinition.disableTimeSeriesExpansion = function(disabled) {
+	FieldDefinition._timeSeriesExpansion = disabled != false ? false : true;
+};
+
 /** @public
 * @param {string} field
 * @return {boolean}
@@ -301,7 +314,7 @@ FieldDefinition.isRealTimeField = function(field) {
 		return false;
 	}
 
-	if(FieldDefinition.getFieldProperty(field, "timeSeriesChild")) {
+	if(FieldDefinition.isTimeSeriesChild(field)) {
 		return false;
 	}
 
@@ -312,6 +325,14 @@ FieldDefinition.isRealTimeField = function(field) {
 	return FieldDefinition.getFieldProperty(field, "IsRealtimeField") !== false;
 };
 
+/** @public
+* @param {string} field
+* @return {boolean}
+*/
+FieldDefinition.isTimeSeriesChild = function(field) {
+	return FieldDefinition.getFieldProperty(field, "timeSeriesChild") ? true : false;
+};
+
 /** @public
 * @param {string} field
 * @return {boolean}=true if field is time series field
@@ -321,6 +342,11 @@ FieldDefinition.isTimeSeries = function (field) {
 		return false;
 	}
 
+	// If we disable time series expansion, the grid won't have a time series field.
+	if(!FieldDefinition._timeSeriesExpansion) {
+		return false;
+	}
+
 	// We can check time series using a cache to avoid duplicating checks in regular expressions.
 	var timeSeriesField = FieldDefinition.getFieldProperty(field, "timeSeries");
 	if (timeSeriesField != null) {

package/lib/rt-grid/es6/Grid.d.ts

@@ -81,6 +81,7 @@ declare namespace Grid {
         formulaEngine?: boolean|null,
         adcPollingInterval?: number|null,
         fieldCaching?: boolean|null,
+        timeSeriesExpansion?: boolean|null,
         childDataField?: string|null,
         topSection?: boolean|null
     };

package/lib/rt-grid/es6/Grid.js

@@ -84,6 +84,7 @@ import { ElementWrapper } from "../../core/es6/grid/components/ElementWrapper.js
 * @property {boolean=} formulaEngine=false If enabled, field with leading equal sign will be treated as a formula and rows will be filled with the calculated values.
 * @property {number=} adcPollingInterval=0 Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.
 * @property {boolean=} fieldCaching=false If enabled, field definition will be caching internal mechanism
+* @property {boolean=} timeSeriesExpansion=true If disabled, the time series field will be treated as a normal field and not expanded.
 * @property {string=} childDataField=CHILD_VALUES The given field will be used to store children's static data, such as row color assignment.
 * @property {boolean=} topSection=true If disabled, title section will not be rendered
 */
@@ -530,6 +531,11 @@ Grid.prototype._pollingEnabled = true;
 * @private
 */
 Grid.prototype._fieldCaching = false;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._timeSeriesExpansion = true;
+
 /** @type {string}
 * @private
 */
@@ -790,6 +796,11 @@ Grid.prototype.initialize = function(gridOption) {
 		FieldDefinition.setFieldCaching(t._fieldCaching);
 	}
 
+	if(gridOption["timeSeriesExpansion"] != null) {
+		t._timeSeriesExpansion = gridOption["timeSeriesExpansion"];
+		FieldDefinition.disableTimeSeriesExpansion(!t._timeSeriesExpansion);
+	}
+
 	if (gridOption["icons"] && gridOption["icons"]["rowGrouping"] && gridOption["icons"]["rowGrouping"]["expander"]) {
 		StyleLoader.chainIcon = gridOption["icons"]["rowGrouping"]["expander"];
 	}
@@ -1112,6 +1123,9 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	if(this._fieldCaching) {
 		obj["fieldCaching"] = this._fieldCaching;
 	}
+	if(this._timeSeriesExpansion != true) {
+		obj["timeSeriesExpansion"] = this._timeSeriesExpansion;
+	}
 
 	if(this._childDataField) {
 		obj["childDataField"] = this._childDataField;

package/lib/rt-grid/es6/RowDefinition.d.ts

@@ -136,7 +136,7 @@ declare class RowDefinition {
 
 declare const ROW_DEF: string;
 
-declare const ROW_TYPES: RowDefinition.RowTypes|null;
+declare const ROW_TYPES: RowDefinition.RowTypes;
 
 declare function rowData(userInput: string): boolean;
 

package/lib/rt-grid/es6/RowDefinition.js

@@ -17,12 +17,12 @@ import { DataTable } from "../../core/es6/data/DataTable.js";
 */
 
 /** @typedef {Object} RowDefinition~RowTypes
-* @property {string} CONTENT="CONTENT"
-* @property {string} CHAIN="CHAIN"
-* @property {string} CONSTITUENT="CONSTITUENT"
-* @property {string} GROUP_HEADER="GROUP_HEADER"
-* @property {string} SUBGROUP_HEADER="SUBGROUP_HEADER"
-* @property {string} GROUP_MEMBER="GROUP_MEMBER"
+* @property {string} CONTENT="CONTENT" Regular row
+* @property {string} CHAIN="CHAIN" Chain RIC row
+* @property {string} CONSTITUENT="CONSTITUENT" Constituent row
+* @property {string} GROUP_HEADER="GROUP_HEADER" Row of segment separator at the very top
+* @property {string} SUBGROUP_HEADER="SUBGROUP_HEADER" Row of nested segment separator
+* @property {string} GROUP_MEMBER="GROUP_MEMBER" Child row displayed under segment separator
 */
 
 /** @type {string}
@@ -31,7 +31,7 @@ import { DataTable } from "../../core/es6/data/DataTable.js";
 */
 var ROW_DEF = "ROW_DEF";
 
-/** @type {RowDefinition~RowTypes}
+/** @type {!RowDefinition~RowTypes}
 * @public
 * @const
 */

package/lib/rt-grid/es6/SnapshotFiller.js

@@ -381,6 +381,9 @@ SnapshotFiller.prototype._onRTKSuccess = function (fields, serverResult) {
 		var dataRow = data2D[i];
 		ric = dataRow[0];
 
+		if (ricMap[ric]) {
+			continue; // we interested only first row of ric
+		}
 		var snapData = ricMap[ric] = {};
 
 		// loop for create rowData for update

package/lib/tr-grid-column-stack/es6/ColumnStack.d.ts

@@ -129,6 +129,12 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public moveColumnById(srcCol: number|string|null, destCol?: (number|string)|null): boolean;
 
+    public hideStack(stackId: string): void;
+
+    public showStack(stackId: string): void;
+
+    public isStackHidden(stackId: string): boolean|null|null;
+
 }
 
 export default ColumnStackPlugin;

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -336,6 +336,7 @@ ColumnStackPlugin.prototype.config = function (options) {
 */
 ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
+	var host = this._host || this._hosts[0];
 
 	var columnOptions = obj["columns"];
 
@@ -351,7 +352,7 @@ ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 			for(var i = 0; i < memberIndices.length; i++){
 				var colIndex = memberIndices[i];
 				var colOption = columnOptions[colIndex];
-				if(colOption){
+				if(colOption && host.isColumnVisible(colIndex)){
 					colOption.hidden = colIndex !== activeColIndex;
 				}
 			}
@@ -1310,6 +1311,10 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 				} else {
 					stackOpt.activeColumn = stackOpt.stackRefs[0];
 				}
+
+				// TODO: Add a proper way to set visibility to activeColumn when activeColumn is changed
+				var activeColIndex = this._getColumnIndex(stackOpt.activeColumn);
+				this._setColumnVisibility(activeColIndex, true);
 				this._updateUI();
 			}
 		}
@@ -1871,6 +1876,70 @@ ColumnStackPlugin.prototype.moveColumnById = function(srcCol, destCol) {
 	return dirty;
 };
 
+/** @private
+* @description Set stack visibility to the specific stack
+* @param {string} stackId
+* @param {boolean} visible
+*/
+ColumnStackPlugin.prototype._setStackVisibility = function(stackId, visible) {
+	var stackOption = this._stacks[stackId];
+	if(!stackOption){
+		return;
+	}
+
+	if(stackOption["spreading"] && !stackOption["collapsed"]){
+		var stackRefs = stackOption["stackRefs"];
+		for(var i = 0; i < stackRefs.length; i++){
+			var colIndex = this._getColumnIndex(stackRefs[i]);
+			this._setColumnVisibility(colIndex, visible);
+		}
+	} else {
+		var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+		this._setColumnVisibility(activeColIndex, visible);
+	}
+};
+
+/** @public
+* @description Hide specific stack from grid
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.hideStack = function(stackId) {
+	if(!stackId){
+		return;
+	}
+	this._setStackVisibility(stackId, false);
+};
+
+/** @public
+* @description Show specific stack from grid
+* @param {string} stackId
+*/
+ColumnStackPlugin.prototype.showStack = function(stackId) {
+	if(!stackId){
+		return;
+	}
+	this._setStackVisibility(stackId, true);
+};
+
+/** @public
+* @description Get hidden status of specific stack
+* @param {string} stackId
+* @return {boolean|null}
+*/
+ColumnStackPlugin.prototype.isStackHidden = function(stackId) {
+	var stackOption = this._stacks[stackId];
+	var host = this._host || this._hosts[0];
+
+	if(!stackOption || !host){
+		return null;
+	}
+
+	var activeColIndex = this._getColumnIndex(stackOption.activeColumn);
+	var isVisible = host.isColumnVisible(activeColIndex);
+
+	return !isVisible;
+};
+
 
 
 export default ColumnStackPlugin;

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.d.ts

@@ -1,39 +1,44 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { extendObject } from '../../tr-grid-util/es6/Util.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {extendObject, injectCss, prettifyCss} from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 
 declare namespace ConditionalColoringPlugin {
 
+    type Options = {
+        predefinedColors?: any
+    };
+
     type ColumnOptions = {
-        conditions?: (ConditionalColoringPlugin.Condition)[],
-        colorText?: (string|boolean),
-        tickColor?: (string|boolean),
-        blinking?: (ConditionalColoringPlugin.Blinking|boolean),
-        field?: string
+        conditions?: (ConditionalColoringPlugin.Condition)[]|null,
+        colorText?: (string|boolean)|null,
+        tickColor?: (string|boolean)|null,
+        blinking?: (ConditionalColoringPlugin.Blinking|boolean)|null,
+        field?: string|null
     };
 
     type ConditionalColoringOptions = {
-        conditions?: (ConditionalColoringPlugin.Condition)[],
-        colorText?: (string|boolean),
-        tickColor?: (string|boolean),
-        field?: string
+        conditions?: (ConditionalColoringPlugin.Condition)[]|null,
+        colorText?: (string|boolean)|null,
+        tickColor?: (string|boolean)|null,
+        field?: string|null
     };
 
     type Condition = {
-        expression?: (string|((...params: any[]) => any)),
-        backgroundColor?: string,
-        color?: string
+        expression?: (string|((...params: any[]) => any))|null,
+        backgroundColor?: string|null,
+        color?: string|null,
+        cssClass?: string|null
     };
 
     type Blinking = {
-        border?: boolean,
-        field?: string,
-        up?: string,
-        down?: string,
-        level?: (string|boolean)
+        border?: boolean|null,
+        field?: string|null,
+        up?: string|null,
+        down?: string|null,
+        level?: (string|boolean)|null
     };
 
 }
@@ -56,21 +61,23 @@ declare class ConditionalColoringPlugin extends GridPlugin {
 
     public getColumnColoring(colIndex: number, options?: any): ConditionalColoringPlugin.ColumnOptions;
 
-    public setColumnColoring(colIndex: number, columnOptions?: (ConditionalColoringPlugin.ColumnOptions|null)): void;
+    public setColumnColoring(colIndex: number, columnOptions?: (ConditionalColoringPlugin.ColumnOptions|null)|null): void;
 
-    public setConditionalColoring(colIndex: number, coloringOptions?: (ConditionalColoringPlugin.ConditionalColoringOptions|null)): void;
+    public setConditionalColoring(colIndex: number, coloringOptions?: (ConditionalColoringPlugin.ConditionalColoringOptions|null)|null): void;
 
-    public setColumnBlinking(colIndex: number, blinkingOptions?: (boolean|ConditionalColoringPlugin.Blinking), field?: string): void;
+    public setColumnBlinking(colIndex: number, blinkingOptions?: (boolean|ConditionalColoringPlugin.Blinking)|null, field?: string|null): void;
 
     public blinkRow(rowIndex: number, blinkSignal: number, host?: any): void;
 
+    public setPredefinedColors(predefinedColors: any): void;
+
     public getColumnPainter(colIndex: number): CellPainter|null;
 
     public applyColor(colIndex: number, cell: any, rowData?: any): void;
 
     public static cleanUpPrevRows(): void;
 
-    public static setThemeColors(colors: { [key: string]:  string }): void;
+    public static setThemeColors(colors: { [key: string]:  string }|null): void;
 
     public reloadThemeColors(): Promise<any>|null;
 

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -1,10 +1,15 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { extendObject } from '../../tr-grid-util/es6/Util.js';
+import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
+import {extendObject, injectCss, prettifyCss} from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 
+/** @typedef {Object} ConditionalColoringPlugin~Options
+* @description The options can be specified by `conditionalColoring` property of the main grid's options
+* @property {Object=} predefinedColors Predefined color object map for conditional coloring
+*/
+
 /** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option:
 * @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
@@ -27,6 +32,7 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {(string|Function)=} expression Expression could be `[FIELD_1] > 0`
 * @property {string=} backgroundColor="" CSS color (e.g. #ffffff, black)
 * @property {string=} color CSS="" color (e.g. #000000, white)
+* @property {string=} cssClass cssClass="" Predefined color class name
 */
 
 /** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~Blinking
@@ -79,6 +85,10 @@ Ext.inherits(ConditionalColoringPlugin, GridPlugin);
 * @private
 */
 ConditionalColoringPlugin._cleanUpTimer = 0;
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._controlClass = "predefined-conditional-color";
 
 /** @type {boolean}
 * @private
@@ -89,6 +99,10 @@ ConditionalColoringPlugin.prototype._blinkingEnabled = false; // WORKAROUND: To
 * @private
 */
 ConditionalColoringPlugin.prototype._pendingFields;
+/** @type {Object}
+* @private
+*/
+ConditionalColoringPlugin.prototype._predefinedColors = null;
 
 /** @override
 * @return {string}
@@ -118,6 +132,15 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 
 	hosts.push(host);
 
+	var extOptions = options["conditionalColoring"];
+	if (extOptions) {
+		var predefinedColors = extOptions["predefinedColors"];
+		if (predefinedColors != null && typeof predefinedColors === "object") {
+			this._injectStyles(predefinedColors);
+			host.enableClass(ConditionalColoringPlugin._controlClass);
+		}
+	}
+
 	if(hosts.length === 1) {
 		this.config(options);
 	} else {
@@ -206,6 +229,14 @@ ConditionalColoringPlugin.prototype.config = function (options) {
 ConditionalColoringPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
 
+	if(this._predefinedColors != null) {
+		var extOptions = obj["conditionalColoring"];
+		if(!extOptions) {
+			extOptions = obj["conditionalColoring"] = {};
+		}
+		extOptions["predefinedColors"] = this._predefinedColors;
+	}
+
 	var columns = obj.columns;
 	if (!columns) {
 		columns = obj.columns = [];
@@ -244,7 +275,8 @@ ConditionalColoringPlugin.prototype.getColumnColoring = function(colIndex, optio
 			extendObject(exCondition, conditions[n], [
 				"expression",
 				"backgroundColor",
-				"color"
+				"color",
+				"cssClass"
 			]);
 
 			options.conditions.push(exCondition);
@@ -824,6 +856,49 @@ ConditionalColoringPlugin._mergeUpdates = function(e) {
 	return changedRows;
 };
 /** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+ConditionalColoringPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .tr-lg .cell";
+	var css = [];
+	var ss, styles, value;
+	for (var className in predefinedColors) {
+		css.push(prefix + "." + className);
+		ss = [];
+		styles = predefinedColors[className];
+
+		value = styles["backgroundColor"];
+		if(value) {
+			ss.push("background-color: " + value + ";");
+		}
+
+		value = styles["color"];
+		if(value) {
+			ss.push("color: " + value + ";");
+		}
+
+		css.push(ss);
+	}
+
+	// TODO: support multitable
+	var host = this._hosts[0];
+
+	if(this._styleTag) {
+		this._styleTag.parentNode.removeChild(this._styleTag);
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+	this._predefinedColors = predefinedColors;
+};
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._injectStyles(predefinedColors);
+	}
+};
+/** @private
 * @function
 * @return {!FilterBuilder}
 */

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -83,6 +83,8 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @description Fired after the text editor has been closed and all operations are done. This is useful to clean up left over resource and get result text entered.
 * @type {Object}
 * @property {string=} text Text that user has entered
+* @property {boolean=} groupHeader if the row is header of row, it will be groupHeader
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
 * @property {boolean} cancelled Readonly flag. Indicates whether the commit operation has been cancelled
 * @property {boolean} committed Readonly flag. The opposite of `cancelled` flag
 */
@@ -92,6 +94,8 @@ import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 * @type {Object}
 * @property {string=} text Text that user has entered
 * @property {boolean=} cancel Set to true to cancel the commit operation.
+* @property {boolean=} groupHeader if the row is header of row, it will be groupHeader
+* @property {Object} suggestionDetail Suggestion detail for auto suggest "item-select" event
 * @example
 * var cep = new InCellEditingPlugin();
 * cep.listen("beforeCommit", function(e) {
@@ -1450,15 +1454,20 @@ InCellEditingPlugin.prototype._onPopupHide = function (e) {
 * @param {Object} event
 */
 InCellEditingPlugin.prototype._onAutoSuggestItemSelected = function (event) {
-  if (event.detail.target) {
-    var method = event.detail.method;
-    var value = event.detail.target.value;
-    if (method === 'enter' || method === 'click') {
-      if (value) {
-        this.setText(value);
-        this._commitText(true);
-      }
-    }
+  var eventDetail = event.detail;
+  if (!eventDetail) {
+    return;
+  }
+  var targetSelected = eventDetail.target;
+  if (!targetSelected) {
+    return;
+  }
+  var suggestionMethod = eventDetail.method;
+  // Need to check the details of the methods, another method like a navigation, reset, clear shouldn't commit text
+  // TODO: We need to handled tab to move. Currently, the property suggestionDetail in 'beforeCommit' event doesn't handlded when we use autosuggest with tab to move.
+  if (suggestionMethod === "click" || suggestionMethod === "enter") {
+    this.setText(targetSelected.value);
+    this._commitText(true, eventDetail.suggestion);
   }
 };
 
@@ -1554,8 +1563,9 @@ InCellEditingPlugin.prototype._onTextKeyUp = function (e) {
 /** Commit text from editor to cell.
 * @private
 * @param {boolean} committed
+* @param {Object} suggestionDetail suggestion detail for auto suggest element
 */
-InCellEditingPlugin.prototype._commitText = function (committed) {
+InCellEditingPlugin.prototype._commitText = function (committed, suggestionDetail) {
   var t = this;
   var arg = t._activePos;
   if (!t.isEditing() || !arg) {
@@ -1566,6 +1576,10 @@ InCellEditingPlugin.prototype._commitText = function (committed) {
   var enteredValue = arg["text"] = this.getValue();
   var groupHeader = arg["groupHeader"] || false;
   if (committed) {
+    if (suggestionDetail) {
+      // This property is only available when the user commits text from the 'item-select' event of the auto suggest.
+      arg["suggestionDetail"] = suggestionDetail;
+    }
     if (t.hasListener("beforeCommit")) {
       t._dispatch("beforeCommit", arg);
       committed = !arg["cancel"];

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

@@ -19,7 +19,8 @@ declare namespace CellPainter {
         fontWeight?: string|null,
         fontStyle?: string|null,
         textAlign?: string|null,
-        textDecoration?: string|null
+        textDecoration?: string|null,
+        cssClass?: string|null
     };
 
     type ThemeColors = {