@refinitiv-ui/efx-grid 6.0.2 → 6.0.3

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

@@ -1,4 +1,5 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { JSXInterface } from "../../tr-grid-util/es6/jsx";
 import {
 	BasicElement,
 	html
@@ -60,5 +61,16 @@ declare class ColumnFormatDialog extends BasicElement {
 
 }
 
+declare global {
+	interface HTMLElementTagNameMap {
+		"column-format-dialog": ColumnFormatDialog;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			"column-format-dialog": ColumnFormatDialog | JSXInterface.HTMLAttributes;
+		}
+	}
+}
+
 export { ColumnFormatDialog };
-export default ColumnFormatDialog;
+export default ColumnFormatDialog;

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

@@ -1,12 +1,14 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
+import { JSXInterface } from "../../tr-grid-util/es6/jsx";
 import { BasicElement, html } from "@refinitiv-ui/core";
 import "@refinitiv-ui/elements/button";
-import "@refinitiv-ui/elements/tree";
+import { DefaultRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
 import translation from "./locale/translation.js";
 import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionDialog {
 
@@ -37,5 +39,16 @@ declare class ColumnSelectionDialog extends BasicElement {
 
 }
 
+declare global {
+	interface HTMLElementTagNameMap {
+		"column-selection-dialog": ColumnSelectionDialog;
+	}
+	namespace JSX {
+		interface IntrinsicElements {
+			"column-selection-dialog": ColumnSelectionDialog | JSXInterface.HTMLAttributes;
+		}
+	}
+}
+
 export { ColumnSelectionDialog };
-export default ColumnSelectionDialog;
+export default ColumnSelectionDialog;

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

@@ -1,12 +1,13 @@
 import { customElement } from "@refinitiv-ui/core/decorators/custom-element.js";
 import { BasicElement, html } from "@refinitiv-ui/core";
 import "@refinitiv-ui/elements/button";
-import "@refinitiv-ui/elements/tree";
+import { DefaultRenderer } from "@refinitiv-ui/elements/tree";
 import "@refinitiv-ui/elements/dialog";
 import "@refinitiv-ui/elements/search-field";
 import translation from "./locale/translation.js";
 import ElementObserver from "../../tr-grid-util/es6/ElementObserver.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /**
  * @typedef {Object} ColumnSelectionDialog~Config
@@ -499,6 +500,7 @@ class ColumnSelectionDialog extends BasicElement {
 		this._excludedLeftVisibleColumnList = []; // Visible left columns that is currently excluded from UI (eg. auto-generated column)
 		this._excludedRightVisibleColumnList = []; // Visible right columns that is currently excluded from UI
 		this._selectAllStatus = "";
+		this._treeDefualtRenderer = {};
 
 		this._isMovable = this._isMovable.bind(this);
 		this._treeValueChanged = this._treeValueChanged.bind(this);
@@ -515,7 +517,11 @@ class ColumnSelectionDialog extends BasicElement {
 		this._handleMouseover = this._handleMouseover.bind(this);
 		this._handleMouseout = this._handleMouseout.bind(this);
 		this._handleSelectAllHeaderClick = this._handleSelectAllHeaderClick.bind(this);
+		this._handleInfoIconClicked = this._handleInfoIconClicked.bind(this);
+		this._handleInfoIconMouseover = this._handleInfoIconMouseover.bind(this);
+		this._handleInfoIconMouseout = this._handleInfoIconMouseout.bind(this);
 		this._handleClick = this._handleClick.bind(this);
+		this._createTreeCustomRender = this._createTreeCustomRender.bind(this);
 		this._selectAllCheckedChanged = this._selectAllCheckedChanged.bind(this);
 		ElementObserver.addLanguageListener(this);
 	}
@@ -683,6 +689,52 @@ class ColumnSelectionDialog extends BasicElement {
 		this._visibleColumnsContainer.addEventListener('mouseout', this._handleMouseout);
 		this._visibleColumnsContainer.addEventListener('click', this._handleClick);
 		this._visibleColumnsContainer.addEventListener('dblclick', this._removeBtnClicked);
+
+		// icon custom renderer
+		if(this._descriptionBox) {
+			this._treeDefualtRenderer = new DefaultRenderer(this._tree);
+			this._tree.renderer = this._createTreeCustomRender;
+		}
+
+		// apply style for info icon
+		if(!this._styles) {
+			var styles = [
+				"ef-tree-item", [
+					"position: relative;"
+				],
+				".item", [
+					"display: flex;",
+					"justify-content: space-between;"
+				],
+				".div-icon", [
+					"position: absolute;",
+					"right: 0;",
+					"top: 0;",
+					"width: 24px;",
+					"height: 100%;",
+					"text-align: center;"
+				],
+				".info-icon", [
+					"display: block;",
+					"font-size: 18px;",
+					"height: 100%;",
+					"display: none"
+				],
+				"ef-tree-item:hover .item .info-icon", [ // hover item will show icon
+					"display: inline-block;",
+					"color: #ffffff;" // icon-color white both dark and light theme
+				],
+				"ef-tree-item .item .div-icon:hover", [ // hover icon will change icon background
+					"background-color: var(--color-scheme-primary);"
+				],
+				".bg-highligted", [ // effect ef-tree-item, when _handleInfoIconMouseover icon (disable highlighted background color)
+					"background-color: var(--color-scheme-tertiary);",
+					"color: var(--color-scheme-complementary);" // font text
+				]
+			];
+			this._styles = prettifyCss(styles);
+			injectCss(this._styles, this); // inject in column selection dialog dialog
+		}
 	}
 
 	/**
@@ -1188,10 +1240,7 @@ class ColumnSelectionDialog extends BasicElement {
 	_handleClick(e) {
 		var selectedElement = e.target; // Target should be ef-item
 
-		// click to display description
-		if (this._descriptionBox && this._initialColumnMap[selectedElement.value]) {
-			this._descriptionContainer.textContent = this._initialColumnMap[selectedElement.value].description;
-		}
+		this._showDescription(selectedElement.value);
 
 		if (!selectedElement.highlightable) {
 			return;
@@ -1219,6 +1268,98 @@ class ColumnSelectionDialog extends BasicElement {
 		this.requestUpdate();
 	}
 
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconClicked(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		var value = treeItem.item.value;
+		this._showDescription(value);
+		e.stopPropagation();
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconMouseover(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		if(treeItem.highlighted) {
+			treeItem.classList.add("bg-highligted");
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {object} e - event object
+	 */
+	 _handleInfoIconMouseout(e) {
+		var targetElem = e.currentTarget;
+		var divItem = targetElem.parentNode;
+		var treeItem = divItem.parentNode;
+		if(treeItem.highlighted) {
+			treeItem.classList.remove("bg-highligted");
+		}
+	}
+
+	/**
+	 * @private
+	 * @param {string} value of mapping item for show description
+	 */
+	_showDescription(value) {
+		if(!value) {
+			return;
+		}
+		var rawValue = this._allItemMapping[value].rawValue; // restore rawValue for access initial value
+		if (this._descriptionBox && this._initialColumnMap[rawValue]) {
+			this._descriptionContainer.textContent = this._initialColumnMap[rawValue].description;
+		}
+	}
+
+	/**
+	* @private
+	* @param {object} item ef-tree-item element
+	* @param {object} composer data collection composer for elf API wrapper
+	* @param {object} element
+	* @return {Object} custom renderer element
+	*/
+	_createTreeCustomRender(item, composer, element) {
+		// Use default renderer to create/recycle element
+		element = this._treeDefualtRenderer(item, composer, element);
+		var isParent = composer.isItemParent(item);
+		var rawValue = item.rawValue;
+		if (!isParent && this._initialColumnMap[rawValue].description) {
+			var treeLabel = element._treeLabel;
+			if (!treeLabel) {
+				var div = document.createElement("div");
+				treeLabel = document.createElement("div");
+				element._treeLabel = treeLabel;
+				var iconEl = document.createElement("ef-icon");
+				var divIcon = document.createElement("div");
+				div.classList.add("item");
+				treeLabel.classList.add("tree-label");
+				iconEl.classList.add("info-icon");
+				iconEl.icon = "info";
+				divIcon.classList.add("div-icon");
+				divIcon.appendChild(iconEl);
+				divIcon.addEventListener("tap", this._handleInfoIconClicked );
+				divIcon.addEventListener("mouseover", this._handleInfoIconMouseover);
+				divIcon.addEventListener("mouseout", this._handleInfoIconMouseout);
+				div.appendChild(treeLabel);
+				div.appendChild(divIcon);
+				element.appendChild(div);
+			} else {
+				treeLabel = element.querySelector(".tree-label");
+			}
+			treeLabel.textContent = item.label;
+		}
+		return element;
+	}
 
 	/**
 	 * update up and down button

package/lib/core/dist/core.js

@@ -11981,6 +11981,13 @@ Segment.prototype.removeAllChildren = function(objMap) {
 Segment.prototype.getChildIds = function() {
 	return this._childCount ? Object.keys(this._children) : [];
 };
+/** @public
+* @return {number}
+*/
+Segment.prototype.getChildCount = function() {
+	return this._childCount;
+};
+
 
 
 /** @public
@@ -13356,6 +13363,7 @@ DataTable.prototype.isFrozen = function() {
 */
 DataTable.prototype.setSegmentSeparator = function(rid, enabled) {
 	var change = false;
+	var memberCount = 0;
 	if(typeof rid === "string") {
 		if(enabled !== false) {
 			if(!this._segments) {
@@ -13365,16 +13373,20 @@ DataTable.prototype.setSegmentSeparator = function(rid, enabled) {
 				change = true;
 			}
 		} else if(this._segments) {
-			if(this._segments.removeSegment(rid)) {
-				change = true;
-				if(!this._segments.getSegmentCount()) {
-					this._segments = null;
+			var segment = this._segments.getSegment(rid);
+			if(segment) {
+				memberCount = segment.getChildCount();
+				if(this._segments.removeSegment(rid)) {
+					change = true;
+					if(!this._segments.getSegmentCount()) {
+						this._segments = null;
+					}
 				}
 			}
 		}
 	}
 	if(change && this._needFiring()) {
-		if(this._autoFillSegments()) {
+		if(this._autoFillSegments() || memberCount) {
 			this.dispatchGlobalChange();
 		} else {
 			var rowData = this._rows[rid] || null;
@@ -13486,13 +13498,14 @@ DataTable.prototype._autoFillSegments = function() {
 	}
 	return false;
 };
-/** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
+/** Remove existing segment children and fill the segments with all content rows before the next segment separator
 * @public
 * @param {string} segmentId Row id
 */
 DataTable.prototype.fillSegment = function(segmentId) {
 	if(this._segments) {
 		this._segments.fillSegment(segmentId, this._rids);
+		this.dispatchGlobalChange();
 	}
 };
 /** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
@@ -13501,7 +13514,11 @@ DataTable.prototype.fillSegment = function(segmentId) {
 */
 DataTable.prototype.fillSegments = function() {
 	if(this._segments) {
-		return this._segments.fillSegments(this._rids);
+		var dirty = this._segments.fillSegments(this._rids);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -13546,7 +13563,11 @@ DataTable.prototype.addSegmentChildren = function(segmentId, rids) {
 */
 DataTable.prototype.removeSegmentChild = function(segmentId, rid) {
 	if(this._segments) {
-		return this._segments.removeSegmentChild(segmentId, rid);
+		var dirty = this._segments.removeSegmentChild(segmentId, rid);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -13557,7 +13578,11 @@ DataTable.prototype.removeSegmentChild = function(segmentId, rid) {
 */
 DataTable.prototype.removeSegmentChildren = function(segmentId, rids) {
 	if(this._segments) {
-		return this._segments.removeSegmentChildren(segmentId, rids);
+		var dirty = this._segments.removeSegmentChildren(segmentId, rids);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -13566,7 +13591,11 @@ DataTable.prototype.removeSegmentChildren = function(segmentId, rids) {
 */
 DataTable.prototype.removeAllSegmentChildren = function() {
 	if(this._segments) {
-		return this._segments.removeAllSegmentChildren();
+		var dirty = this._segments.removeAllSegmentChildren();
+		if (dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -15523,7 +15552,7 @@ WrappedView.prototype.addRowExpansion = function(rid, count) {
 * @param {string} rid Row Id
 */
 WrappedView.prototype.removeRowExpansion = function(rid) {
-	this._dv.removeRowExpansion(rid, count);
+	this._dv.removeRowExpansion(rid);
 };
 /**
 * @public
@@ -15730,7 +15759,7 @@ WrappedView.prototype.setSegmentCollapsingLogic = function() {};
 */
 WrappedView.prototype.isSegmentCollapsed = function(rowRef) {
 	var rid = this._toRowId(rowRef);
-	return this._dv.isSegmentCollapsed(rid, collapsed);
+	return this._dv.isSegmentCollapsed(rid);
 };
 /** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
 * @public
@@ -15763,8 +15792,8 @@ WrappedView.prototype.addSegmentChild = function(segmentRef, rowRef) {
 */
 WrappedView.prototype.addSegmentChildren = function(segmentRef, rowRefs) {
 	var segmentId = this._toRowId(segmentRef);
-	var rowId = this._toRowId(rowRef);
-	return this._dv.addSegmentChildren(segmentId, rowId);
+	var rowIds = this._toRowIds(rowRefs);
+	return this._dv.addSegmentChildren(segmentId, rowIds);
 };
 /** @public
 * @param {string|number} segmentRef Row id or row index
@@ -15783,8 +15812,8 @@ WrappedView.prototype.removeSegmentChild = function(segmentRef, rowRef) {
 */
 WrappedView.prototype.removeSegmentChildren = function(segmentRef, rowRefs) {
 	var segmentId = this._toRowId(segmentRef);
-	var rowId = this._toRowId(rowRef);
-	return this._dv.removeSegmentChildren(segmentId, rowId);
+	var rowIds = this._toRowIds(rowRefs);
+	return this._dv.removeSegmentChildren(segmentId, rowIds);
 };
 /** @public
 * @return {boolean} Return true if there is any change
@@ -16088,10 +16117,6 @@ Conflator.prototype.enable = function (opt_enabled) {
 
 
 
-/** @typedef {DataTable|WrappedView|DataView} DataView~IDataView
-* @description DataView like classes
-*/
-
 /** @event DataView#dataChanged
 * @description Trigger when data within the data view has been changed. Not only actual change in data, but also position change will trigger this event.
 * @property {boolean} globalChange Indicates a big change. User should expect all data has been change. With active sorting or filtering, this flag will always be true due to multiple changes in row position.
@@ -21283,6 +21308,11 @@ es6_Ext.inherits(VirtualizedLayoutGrid, components_ElementWrapper);
  */
 VirtualizedLayoutGrid.prototype._index = -1;
 
+/** Number of rows offsetting from the first section
+ * @private
+ * @type {number}
+ */
+VirtualizedLayoutGrid.prototype._rowOffset = 0;
 /** For virtualization in Y-Axis
  * @private
  * @type {number}
@@ -22927,7 +22957,7 @@ Core_Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.0.50";
+	return "5.0.53";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -23246,6 +23276,10 @@ Core_Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
 	}
 
 	this._updateSectionIndices(at);
+	if (this._autoSetDataSource) {
+		// This could trigger data binding and column virtualization
+		sectionSettings.setDataSource(this._dataSource);
+	}
 
 	sectType = sectionSettings.getType();
 	if (sectType === "footer") {
@@ -26468,9 +26502,6 @@ Core_Core.prototype._newSection = function (opt_type, sectionName) {
 	section.listen("rowCountChanged", this._onRowCountChanged);
 	section.listen("rowHeightChanged", this._onRowHeightChanged);
 
-	if (this._autoSetDataSource) {
-		sectionSettings.setDataSource(this._dataSource);
-	}
 	return sectionSettings;
 };
 
@@ -26761,7 +26792,12 @@ Core_Core.prototype._removeColumn = function (num) {  // TODO: change the logic
 */
 Core_Core.prototype._onSectionDataChanged = function (e) {
 	if(this._dispatchingDataChanged) { return; } // Prevent infinite loop
-	this._dispatchingDataChanged = true;
+
+	var colCount = this._layoutX.getLaneCount();
+	this._dispatchingDataChanged = colCount ? true : false;
+	if(!colCount) {
+		return;
+	}
 
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);
@@ -26776,7 +26812,6 @@ Core_Core.prototype._onSectionDataChanged = function (e) {
 	}
 	this._dispatch("preSectionDataBinding", e);
 
-	var colCount = this._layoutX.getLaneCount();
 	var dataMap = this.getDataColumnMap();
 	for (var c = 0; c < colCount; ++c) {
 		if(section["isColumnActive"](c) && (this.isColumnVisible(c) || this._isAlwaysRenderColumn(c))) {
@@ -26882,6 +26917,9 @@ Core_Core.prototype._onRowInViewChanged = function (e) { // Triggered from virtu
 * @param {Object} e
 */
 Core_Core.prototype._onColInViewChanged = function (e) {
+	if(!this.getColumnCount()) {
+		return; // No column for activation and no cell to be rendered
+	}
 	var pfi = e["prevFirstIndex"];
 	var pli = e["prevLastIndex"]; // INCLUSIVE
 	var fi = e["firstIndex"];
@@ -27197,7 +27235,7 @@ Core_Core.prototype._onColumnCountChanged = function () {
 	// TODO: Optimize these methods during initialization
 	var pinnedLeft = this._countPinnedLeftColumns();
 	var pinnedRight = this._countPinnedRightColumns();
-	///
+
 	this._updateColumnBounds();
 
 	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {