@refinitiv-ui/efx-grid 6.0.136 → 6.0.138

package/lib/core/es6/grid/Core.js

@@ -621,7 +621,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.130";
+	return "5.1.133";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -2068,7 +2068,7 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 		this.setColumnData(index, value);
 	}
 
-	let formatter = jsonObj["formatter"] || jsonObj["binding"]; // support both composite and real-time grid
+	let formatter = jsonObj["binding"] || jsonObj["formatter"]; // support both composite and real-time grid, binding have piority first
 	if(Array.isArray(formatter)) {
 		formatter = formatter[0]; // Support only one formatter in the array
 	}

package/lib/core/es6/grid/LayoutGrid.js

@@ -262,10 +262,6 @@ LayoutGrid.prototype._colBounds = null;
 * @private
 */
 LayoutGrid.prototype._colBoundCache = null;
-/** @type {boolean}
-* @private
-*/
-LayoutGrid.prototype._colSelDirty = false;
 /** @type {HScrollbar}
 * @private
 */
@@ -300,7 +296,6 @@ LayoutGrid.prototype.dispose = function () {
 
 	this._colCount = this._rowCount = this._activeRowEnd = this._availableRowCount = 0;
 	this._colBounds = this._colBoundCache = null;
-	this._colSelDirty = false;
 
 	this._highlightedCells.length = 0;
 	this._ctx = null;
@@ -2011,7 +2006,7 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 	if(!stretchSize && ctx) {
 		if(ctx["getWidth"]) {
 			let contentWidth = this.getContentWidth();
-			stretchSize = ctx["getWidth"]();
+			stretchSize = ctx["getWidth"]() - this._rightSpaceSize;
 			if(stretchSize) { // Grid may not be in the document
 				if(contentWidth < stretchSize) { // If view width is larger than actual content
 					stretchSize = contentWidth;
@@ -2247,8 +2242,6 @@ LayoutGrid.prototype.selectColumn = function (colIndex, selected) {
 	this.enableColumnClass(colIndex, "selected-column", selected);
 
 	if(selected) {
-		this._colSelDirty = true;
-
 		let boundLayer = this._boundLayer;
 		if(!boundLayer) {
 			this._initBoundLayer();
@@ -2376,10 +2369,6 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 * @param {number=} topPx Top position of bound
 */
 LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
-	if(!this._colSelDirty) {
-		return;
-	}
-
 	let cbs = this._colBounds;
 	let cbc = this._colBoundCache;
 	if(!cbs) {
@@ -2406,7 +2395,6 @@ LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx)
 	cbs.length = activeCount = rangeCount;
 
 	if(!rangeCount) {
-		this._colSelDirty = false;
 		return;
 	}
 
@@ -2493,7 +2481,7 @@ LayoutGrid.prototype.updateColumnSeparators = function () {
 		let colWidth = this._trackX.getLaneEnd(colCount - 1) - this._trackX.getLaneStart(colCount - pinnedRightCount);
 		let viewSize = this._getViewSize();
 
-		colSeparator.style.left = (viewSize - colWidth - this._rightSpaceSize) + "px";
+		colSeparator.style.left = (viewSize - colWidth) + "px";
 		colSeparator.style.height = this._trackY.getTrackSize() + "px";
 	} else {
 		if (colSeparator && colSeparator.parentNode) {
@@ -2891,6 +2879,20 @@ LayoutGrid.prototype._onMouseOut = function (e) {
 	this.setRowHighlight(-1);
 };
 
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+LayoutGrid.prototype._getEventHandlers = function () {
+	return {
+		"mouseout": this._onMouseOut,
+		"mousemove": this._onMouseMove
+	};
+};
+
+
+
 /**
  * @private
  * @param {number} rowIndex

package/lib/filter-dialog/lib/filter-dialog.d.ts

@@ -29,6 +29,7 @@ declare namespace FilterDialog {
         filterUI?: boolean|null,
         advancedFilter?: boolean|null,
         compactMode?: boolean|null,
+        dateTimeFormat?: string|null,
         blankValues?: (string|boolean)|null,
         filterChanged?: ((...params: any[]) => any)|null,
         confirm?: ((...params: any[]) => any)|null,

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

@@ -23,11 +23,12 @@ import "./checkbox-list.js";
  * @typedef {Object} FilterDialog~Config
  * @property {Object} data Column data
  * @property {string=} sortState "a" for ascending or "d" for descending
- * @property {boolean=} sortUI Show Sort area
- * @property {boolean=} filterUI Show Filter area
- * @property {boolean=} advancedFilter Show advanced tab
- * @property {boolean=} compactMode Force compact mode in dialog
- * @property {(string|boolean)=} blankValues Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
+ * @property {boolean=} sortUI=true Show Sort area
+ * @property {boolean=} filterUI=true Show Filter area
+ * @property {boolean=} advancedFilter=true Show advanced tab
+ * @property {boolean=} compactMode=false Force compact mode in dialog
+ * @property {string=} dateTimeFormat="dd-MM-yy" Specifies the string format for the date time picker in the filter dialog based on date-fns format, follow https://date-fns.org/v3.6.0/docs/format.
+ * @property {(string|boolean)=} blankValues=false Display a Blanks item in the filter dialog to represent an empty value. If a string is passed, it will be used as the label for the blank item
  * @property {Function=} filterChanged Filter changed handler
  * @property {Function=} confirm Alias of filterChanged
  * @property {Function=} cancel Alias of dialog cancel
@@ -77,6 +78,14 @@ const BLANK_FILTERS = [
 	["EQ_BLANK", "Equal To Blank Value"],
 	["NEQ_BLANK", "Does Not Equal To Blank Value"]
 ];
+/** @type {Object.<string, boolean>}
+* @private
+* @constant
+*/
+const BLANK_VALUES = {
+	"EQ_BLANK": true,
+	"NEQ_BLANK": true
+};
 /** @type {Array.<Array>}
 * @private
 * @constant
@@ -179,6 +188,7 @@ class FilterDialog extends BasicElement {
 		this._blankValuesChecked = false;
 		this._compactMode = false;
 		this.useUTCTime = true;
+		this._dateTimeFormat = "dd-MM-yy";
 		this._popup = new Popup({
 			"shown": this._onPopupShown.bind(this),
 			"hidden": this._onPopupHidden.bind(this),
@@ -222,6 +232,10 @@ class FilterDialog extends BasicElement {
 					this.hiddenFilterUI = options.filterUI === false;
 				}
 
+				if (options.dateTimeFormat != null) {
+					this._dateTimeFormat = options.dateTimeFormat;
+				}
+
 				if(options.advancedFilter != null) {
 					this.hiddenAdvancedFilter = options.advancedFilter === false;
 				}
@@ -294,6 +308,7 @@ class FilterDialog extends BasicElement {
 	render() {
 		let lang = this._translation[this._lang] ? this._lang : "en";
 		let t =  this._translation[lang];
+		let dateTimeFormat = this._dateTimeFormat;
 		return html`
 			<ef-panel id="root_panel" spacing with-shadow with-border>
 				<div id="filterDialogContent" class="filter-dialog dialog-theme-wrapper">
@@ -336,14 +351,14 @@ class FilterDialog extends BasicElement {
 								</div>
 								<div class="input-group hide" id="datetime_conditon">
 									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
-									<ef-datetime-picker placeholder="DD-MM-YY" format="dd-MM-yy" lang="${lang}"></ef-datetime-picker>
+									<ef-datetime-picker placeholder="${dateTimeFormat}" format="${dateTimeFormat}" lang="${lang}"></ef-datetime-picker>
 
 									<div class="radio-group">
 										<ef-radio-button name="filterRadio" value="AND" checked>${t["And"]}</ef-radio-button>
 										<ef-radio-button name="filterRadio" value="OR" >${t["Or"]}</ef-radio-button>
 									</div>
 									<ef-combo-box placeholder="${t["Show rows where"]}:" lang="${lang}"></ef-combo-box>
-									<ef-datetime-picker placeholder="DD-MM-YY" format="dd-MM-yy" lang="${lang}"></ef-datetime-picker>
+									<ef-datetime-picker placeholder="${dateTimeFormat}" format="${dateTimeFormat}" lang="${lang}"></ef-datetime-picker>
 								</div>
 							</div>
 						</div>
@@ -871,7 +886,6 @@ class FilterDialog extends BasicElement {
 	* @private
 	*/
 	_updateAdvanceFilterUI() {
-		// Reset Advance Filter UIs
 		this._clearAdvanceFilterUI();
 
 		let userConditions = this.conditions || null;
@@ -883,66 +897,66 @@ class FilterDialog extends BasicElement {
 			}
 		}
 
-		if (!Array.isArray(userConditions)) {
+		if (!Array.isArray(userConditions)) { // Expect 2D array
 			return;
 		}
 
-		const con1 = userConditions[0];
-		let validCon1 = false;
-		let conOp1 = "";
-		let conVal1 = "";
-		let connector = "";
-		if(Array.isArray(con1)) {
-			conOp1 = con1[0];
-			if(con1.length && con1[0]) {
-				conVal1 = con1[1];
-				if(conVal1 || conVal1 === 0 || conVal1 === false || conOp1 === BLANK_FILTERS[0][0] || conOp1 === BLANK_FILTERS[1][0]) {
-					validCon1 = true;
-					connector = con1[2] || "";
-				} else {
-					conVal1 = "";
-				}
-			}
+		const isDateType = toDateTimeType(this.fieldDataType);
+		const con1 = this._toConditionObject(userConditions[0], isDateType);
+		const con2 = con1 ? this._toConditionObject(userConditions[1], isDateType) : null;
+
+		let conSel1 = this._generalComboBoxes[0];
+		let valInput1 = this._generalComboBoxes[1];
+		let conSel2 = this._generalComboBoxes[2];
+		let valInput2 = this._generalComboBoxes[3];
+		let connectors = this._generalRadioBtns;
+
+		if (isDateType) {
+			conSel1 = this._dateTimeComboBoxes[0];
+			valInput1 = this._dateTimePickers[0];
+			conSel2 = this._dateTimeComboBoxes[1];
+			valInput2 = this._dateTimePickers[1];
+			connectors = this._dateTimeRadioBtns;
 		}
-
-		const con2 = userConditions[1];
-		let validCon2 = false;
-		let conOp2 = "";
-		let conVal2 = "";
-		if(validCon1 && Array.isArray(con2)) {
-			conOp2 = con2[0];
-			if(con2.length && conOp2) {
-				conVal2 = con2[1];
-				if(conVal2 || conVal2 === 0 || conVal2 === false || conOp2 === BLANK_FILTERS[0][0] || conOp2 === BLANK_FILTERS[1][0]) {
-					validCon2 = true;
-				} else {
-					conVal2 = "";
-				}
-			}
+		if (con1) {
+			this._updateConditionUIs(conSel1, valInput1, con1.operator, con1.value);
 		}
-
-		let firstRadioState = true;
-		if(validCon1 && validCon2) {
-			firstRadioState = connector !== "OR";
+		if (con2) {
+			this._updateConditionUIs(conSel2, valInput2, con2.operator, con2.value);
 		}
 
-		if (toDateTimeType(this.fieldDataType)) {
-			if (validCon1) {
-				this._updateConditionUIs(this._dateTimeComboBoxes[0], this._dateTimePickers[0], conOp1, this._getDateString(conVal1));
-			}
-			if (validCon2) {
-				this._updateConditionUIs(this._dateTimeComboBoxes[1], this._dateTimePickers[1], conOp2, this._getDateString(conVal2));
-			}
-			this._updateConnectorUIs(this._dateTimeRadioBtns, firstRadioState);
-		} else {
-			if (validCon1) {
-				this._updateConditionUIs(this._generalComboBoxes[0], this._generalComboBoxes[1], conOp1, conVal1);
-			}
-			if (validCon2) {
-				this._updateConditionUIs(this._generalComboBoxes[2], this._generalComboBoxes[3], conOp2, conVal2);
+		let andRadioBtn = (con1 && con2) ? (con1.connector !== "OR") : true;
+		connectors[0].checked = andRadioBtn; // AND radio button
+		connectors[1].checked = !andRadioBtn; // OR radio button
+	}
+	/**
+	* @private
+	* @param {Array} ary Condition in array format with length of three (e.g., ["LT", 5, "OR"])
+	* @param {boolean} isDateType
+	* @return {string}
+	*/
+	_toConditionObject(ary, isDateType) {
+		if(Array.isArray(ary) && ary.length) {
+			let op = ary[0];
+			if(op) {
+				let val = ary[1];
+				if(val || val === 0 || val === false || BLANK_VALUES[op]) {
+					if(isDateType) {
+						let date = (ary.rawValue != null) ? ary.rawValue : val;
+						if(!(date instanceof Date)){
+							date = new Date(date);
+						}
+						val = DateTime.format(date.getTime(), "yyyy-MM-dd", this.useUTCTime ? "GMT" : "LOCAL");
+					}
+					return {
+						operator: op,
+						value: val,
+						connector: ary[2] || ""
+					};
+				}
 			}
-			this._updateConnectorUIs(this._generalRadioBtns, firstRadioState);
 		}
+		return null;
 	}
 	/** @private
 	* @param {Element} opCombobox
@@ -954,14 +968,7 @@ class FilterDialog extends BasicElement {
 		opCombobox.value = opValue;
 		valuePicker.value = value;
 	}
-	/** @private
-	* @param {Array.<Element>} connectors
-	* @param {boolean} connectorValue
-	*/
-	_updateConnectorUIs(connectors, connectorValue) {
-		connectors[0].checked = connectorValue;
-		connectors[1].checked = !connectorValue;
-	}
+
 	/** @private
 	* @returns {boolean}
 	*/
@@ -1076,19 +1083,6 @@ class FilterDialog extends BasicElement {
 		};
 	}
 
-	/**
-	* Return date string in format yyyy-MM-dd
-	* @private
-	* @param {Object|string} date
-	* @return {string}
-	*/
-	_getDateString(date) {
-		if(!(date instanceof Date)){
-			date = new Date(date);
-		}
-		return DateTime.format(date.getTime(), "yyyy-MM-dd", this.useUTCTime ? "GMT" : "LOCAL");
-	}
-
 	/**
 	* Return date object
 	* @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.136" };
+window.EFX_GRID = { version: "6.0.138" };

package/lib/rt-grid/dist/rt-grid.js

@@ -13320,8 +13320,7 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 		obj["collapsed"] = val;
 	}
 
-	// check row hidden
-	val = this._view.isHiddenRow(this._rowId);
+	val = this._view ? this._view.isHiddenRow(this._rowId) : false;
 	if(val) {
 		obj["hidden"] = val;
 	}
@@ -13895,19 +13894,6 @@ RowDefinition.deregisterFromView = function(rowIds, rowDef) {
 	rowDef._deregisterFromView(rowIds);
 	return rowIds;
 };
-/** @private
-* @param {string} ric
-* @return {Object}
-*/
-RowDefinition.prototype._getChildStaticRowData = function(ric) {
-	if(this._staticValues) {
-		let childValues = this._staticValues[RowDefinition._childDataField];
-		if(childValues) {
-			return childValues[ric] || null;
-		}
-	}
-	return null;
-};
 
 /** @public
 * @ignore
@@ -13962,9 +13948,16 @@ RowDefinition.prototype.addConstituent = function(ric) {
 		"parent": this
 	};
 
-	let staticData = this._getChildStaticRowData(ric); // TODO: Remove the child's static data from parent
-	if(staticData) {
-		rowOptions["values"] = staticData;
+	// Get child static values stored in this row
+	if(this._staticValues) {
+		let children = this._staticValues[RowDefinition._childDataField];
+		if(children) {
+			let childValues = children[ric];
+			if(childValues) {
+				rowOptions["values"] = childValues;
+				children[ric] = null;
+			}
+		}
 	}
 
 	return new RowDefinition(rowOptions); // childDef is added to this._children in the constructor