@refinitiv-ui/efx-grid 6.0.119 → 6.0.121

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

@@ -547,6 +547,13 @@ ColumnDefinition.getDataType = function(field) {
 	return "";
 };
 /** @public
+* @ignore
+* @return {boolean|string|null}
+*/
+ColumnDefinition.prototype.getTooltipValue = function() {
+	return this._tooltip;
+};
+/** @public
 * @return {string}
 */
 ColumnDefinition.prototype.getTooltip = function() {

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

@@ -274,11 +274,11 @@ let _hasFieldOrId = function(colDef, str) {
 };
 
 /** Compare the difference in the 'id' property.
- * @private
- * @param {Object} obj1
- * @param {Object} obj2
- * @returns {boolean} If the id property of two objects is equal, the return will be true, otherwise it will be false.
- */
+* @private
+* @param {Object} obj1
+* @param {Object} obj2
+* @returns {boolean} If the id property of two objects is equal, the return will be true, otherwise it will be false.
+*/
 let _hasMatchingId = function(obj1, obj2) {
 	if(!obj1 || !obj2 || !obj1.id || !obj2.id) { // Handle nullable, if the object or id have null, it's means difference value
 		return false;
@@ -286,6 +286,25 @@ let _hasMatchingId = function(obj1, obj2) {
 	return obj1.id === obj2.id;
 };
 
+/** @private
+* @param {Object} e
+*/
+let _preventDefault = function(e) {
+	if(e) {
+		e.preventDefault();
+	}
+};
+/** @private
+* @param {number=} id
+* @returns {number} Always return 0
+*/
+let _clearTimeout = function(id) {
+	if(id) {
+		clearTimeout(id);
+	}
+	return 0;
+};
+
 /** @constructor
 * @extends {EventDispatcher}
 * @param {(Element|null)=} placeholder
@@ -596,10 +615,6 @@ Grid.prototype._topSection = true;
 * @private
 */
 Grid.prototype._focusingArgs = null;
-/** @type {number}
-* @private
-*/
-Grid.prototype._scrolledRow = -1;
 /** @type {boolean}
 * @private
 */
@@ -614,10 +629,8 @@ Grid.prototype.dispose = function() {
 		clearInterval(this._autoLayoutTimer);
 		this._autoLayoutTimer = 0;
 	}
-	if(this._pollingTimerId) {
-		clearTimeout(this._pollingTimerId);
-		this._pollingTimerId = 0;
-	}
+	this._pollingTimerId = _clearTimeout(this._pollingTimerId);
+
 	this.removeAllColumns(); // Some conflators are reset
 	this.removeAllRows(); // Some conflators are reset
 	this._sorter.dispose();
@@ -640,9 +653,8 @@ Grid.prototype.dispose = function() {
 	}
 
 	if(this._focusingArgs) {
-		if(this._focusingArgs.id) {
-			clearTimeout(this._focusingArgs.id);
-		}
+		_clearTimeout(this._focusingArgs.id);
+		_clearTimeout(this._focusingArgs.timeoutId);
 		this._focusingArgs = null;
 	}
 };
@@ -947,6 +959,7 @@ Grid.prototype.initialize = function(gridOption) {
 	this.addListener(gridOption, "beforeContentBinding");
 	this.addListener(gridOption, "firstRendered");
 	this.addListener(gridOption, "afterContentBinding");
+	this.addListener(gridOption, "tabNavigation");
 
 	if(gridOption["autoDateConversion"]) {
 		t._autoDateConversion = true;
@@ -3463,12 +3476,15 @@ Grid.prototype._renderColumnHeader = function(colIndex, arg) {
 	let colName = colDef.getName();
 	let colTooltip = colDef.getTooltip();
 	let headerAlignment = colDef.getHeaderAlignment();
+	let tooltipValue = colDef.getTooltipValue();
 
 	for(let r = 0; r < rowCount; ++r) {
 		let tCell = tSection.getCell(colIndex, r, false);
 		// Default behaviors
 		tCell.setContent(colName);
-		tCell.setTooltip(colTooltip);
+		tCell.setTooltipInfo("columnDefault", tooltipValue);
+		tCell.setTooltipInfo("columnTooltip", colTooltip);
+		tCell.updateTooltip();
 		tCell.setStyle("textAlign", headerAlignment);
 
 		if(customRenderer) {
@@ -4096,6 +4112,8 @@ Grid.prototype._logData = function(rowDefs, options) {
 
 /** @public
 * @description Replace existing row by a new row. Row Id is always changed, after the row is replaced.
+* If the rowId of the new row is identical to that of the replacing row. Grid will do nothing because
+* similar rowIds indicate that they are the same row.
 * @param {Grid~RowReference} rowRef Reference (i.e. row index, row id, or row definition) of the insert position
 * @param {(RowDefinition~Options|string)=} rowOption
 * @returns {RowDefinition} Returns null, if the row is not replaced. Otherwise, a newly created row is returned
@@ -4216,38 +4234,49 @@ Grid.prototype.getVScrollView = function () {
 	return this._grid.getVScrollView();
 };
 
-/** @private
-* @param {Element} el
-* @return {boolean}
-*/
-function isFocusableContent(el) {
-	if(el) {
-		return (el.tagName !== "SPAN" && !el.disabled);
-	}
-	return false;
-}
 /** @private
 * @param {Object} cell
+* @param {Object} args
 * @return {boolean}
 */
-function focusCell(cell) {
+Grid.prototype._focusCell = function(cell, args) {
 	if(cell) {
 		let cellContent = cell.getContent();
-		if(cellContent && isFocusableContent(cellContent)) {
-			cellContent.focus();
-			return true;
+		if(cellContent) {
+			let nfe = null;
+			if(this.hasListener("tabNavigation")) {
+				let tabNavArg = {
+					"shiftKey": args.shiftKey,
+					"activeElement": args.activeElement,
+					"cellContent": cellContent,
+					"cell": cell,
+					"colIndex": args.colIndex,
+					"rowIndex": args.rowIndex,
+					"field": args.fields ? args.fields[args.colIndex] : ""
+				};
+				this._dispatch("tabNavigation", tabNavArg);
+				nfe = tabNavArg.nextFocusableElement;
+			} else if(cellContent.tagName !== "SPAN") {
+				nfe = cellContent;
+			}
+
+			if(nfe && nfe !== args.activeElement && !nfe.disabled) {
+				nfe.focus();
+				return true;
+			}
 		}
 	}
 	return false;
-}
+};
 /** @private
 */
 Grid.prototype._onVScroll = function() {
 	let args = this._focusingArgs;
 	if(args) {
+		args.timeoutId = _clearTimeout(args.timeoutId);
 		this._focusingArgs = null;
 		let cell = this._grid.getCell("content", args.colIndex, args.rowIndex);
-		if(!focusCell(cell)) {
+		if(!this._focusCell(cell, args)) {
 			if(args.shiftKey) {
 				this._focusPrevCellContent(args);
 			} else {
@@ -4258,6 +4287,11 @@ Grid.prototype._onVScroll = function() {
 };
 /** @private
 */
+Grid.prototype._onScrollTimeout = function() {
+	this._focusingArgs = null;
+};
+/** @private
+*/
 Grid.prototype._selfScrollToRow = function() {
 	let args = this._focusingArgs;
 	if(args) {
@@ -4267,20 +4301,14 @@ Grid.prototype._selfScrollToRow = function() {
 };
 /** @private
 * @param {Object} args
-* @param {number} colIndex
-* @param {number} rowIndex
 */
-Grid.prototype._requestScroll = function(args, colIndex, rowIndex) {
-	if(this._focusingArgs || this._scrolledRow === args.rowIndex) {
-		return; // Avoid infinite loop
+Grid.prototype._requestScroll = function(args) {
+	if(!this._focusingArgs) {
+		this._focusingArgs = args;
+		args.event = null; // The event is invalid after the scroll
+		args.id = setTimeout(this._selfScrollToRow, 0); // Avoid event loop protection
+		args.timeoutId = setTimeout(this._onScrollTimeout, 100); // To avoid a fail case where scroll cannot be performed
 	}
-
-	this._scrolledRow = args.rowIndex;
-	this._focusingArgs = args;
-	args.colIndex = colIndex;
-	args.rowIndex = rowIndex;
-	args.event = null; // The event is invalid after the scroll
-	args.id = setTimeout(this._selfScrollToRow); // Avoid event loop protection
 };
 /** @private
 * @param {Object} args
@@ -4304,28 +4332,27 @@ Grid.prototype._focusNextCellContent = function(args) {
 			startIdx = i;
 		}
 	}
-	// If the current focus is on a valid content, starts on the next cell
-	if(args.event && args.validContent) {
-		startIdx++;
-	}
 
 	let grid = this._grid;
 	let section = grid.getSection("content");
 	let viewInfo = grid.getVerticalViewInfo();
 	let lastFullRow = viewInfo.lastFullRow;
 	let rowCount = this.getRowCount();
+
+	args.fields = grid.getColumnFields();
 	for(let r = rowIndex; r < rowCount; r++) {
+		args.rowIndex = r;
 		for(i = startIdx; i < len; i++) {
 			let c = focusableColIndices[i];
+			args.colIndex = c;
 			if(r > lastFullRow) {
-				this._requestScroll(args, c, r);
+				_preventDefault(args.event);
+				this._requestScroll(args);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
-				if(focusCell(cell)) {
-					if(args.event) {
-						args.event.preventDefault();
-					}
+				if(this._focusCell(cell, args)) {
+					_preventDefault(args.event);
 					return;
 				}
 			}
@@ -4333,9 +4360,8 @@ Grid.prototype._focusNextCellContent = function(args) {
 		startIdx = 0;
 	}
 
-	if(args.validContent) { // The current focus on the last focusable content
-		this._grid.getHiddenInput().focus();
-	}
+	// The current focus on the last focusable content
+	this._grid.getHiddenInput().focus();
 };
 /** @private
 * @param {Object} args
@@ -4359,27 +4385,26 @@ Grid.prototype._focusPrevCellContent = function(args) {
 			startIdx = i;
 		}
 	}
-	// If the current focus is on a valid content, starts on the next cell
-	if(args.event && args.validContent) {
-		--startIdx;
-	}
 
 	let grid = this._grid;
 	let section = grid.getSection("content");
 	let viewInfo = grid.getVerticalViewInfo();
 	let firstFullRow = viewInfo.firstFullRow;
+
+	args.fields = this.getColumnFields();
 	for(let r = rowIndex; r >= 0; r--) {
+		args.rowIndex = r;
 		for(i = startIdx; i >= 0; i--) {
 			let c = focusableColIndices[i];
+			args.colIndex = c;
 			if(r < firstFullRow) {
-				this._requestScroll(args, c, r);
+				_preventDefault(args.event);
+				this._requestScroll(args);
 				return;
 			} else {
 				let cell = section.getCell(c, r);
-				if(focusCell(cell)) {
-					if(args.event) {
-						args.event.preventDefault();
-					}
+				if(this._focusCell(cell, args)) {
+					_preventDefault(args.event);
 					return;
 				}
 			}
@@ -4387,15 +4412,18 @@ Grid.prototype._focusPrevCellContent = function(args) {
 		startIdx = len - 1;
 	}
 
-	if(args.validContent) { // The current focus on the last focusable content
-		this._grid.getHiddenInput(true).focus();
-	}
+	// The current focus on the last focusable content
+	this._grid.getHiddenInput(true).focus();
 };
 
 /** @private
 * @param {Object} e
 */
 Grid.prototype._onTabNavigation = function(e) {
+	if(this._focusingArgs) {
+		return; // Cannot do another tab navigation while waiting for scrolling
+	}
+
 	let colDefs = this.getColumnDefinitions();
 	let colCount = colDefs.length;
 
@@ -4410,19 +4438,8 @@ Grid.prototype._onTabNavigation = function(e) {
 		return;
 	}
 
-	this._scrolledRow = -1; // Reset the scroll loop protector
 	let keyEvt = e.event;
 	let pos = this.getRelativePosition(keyEvt);
-	let validContent = true;
-	let activeElement = e.activeElement;
-	if(activeElement) {
-		validContent = !activeElement.classList.contains("valigner");
-	}
-
-	if(validContent) {
-		let content = pos["cell"] ? pos["cell"].getContent() : null;
-		validContent = isFocusableContent(content);
-	}
 	let startingRowIndex = pos["rowIndex"];
 	if(e.onTheEdge) {
 		let viewInfo = this._grid.getVerticalViewInfo();
@@ -4434,7 +4451,7 @@ Grid.prototype._onTabNavigation = function(e) {
 		colIndex: pos["colIndex"],
 		rowIndex: startingRowIndex,
 		focusableColIndices: focusableColIndices,
-		validContent: validContent
+		activeElement: e.activeElement
 	};
 
 	if(keyEvt.shiftKey) {
@@ -4444,5 +4461,15 @@ Grid.prototype._onTabNavigation = function(e) {
 	}
 };
 
+/** @public
+* @ignore
+* @return {!Object}
+*/
+Grid.prototype._getEventHandlers = function() {
+	return {
+		"tabNavigation": this._onTabNavigation
+	};
+};
+
 export { Grid };
 export default Grid;

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

@@ -108,7 +108,7 @@ declare class RowDefinition {
 
     public resetUpdates(): void;
 
-    public registerToView(view: DataView|null, rowId?: string|null): void;
+    public registerToView(view: DataView|null, destRowId?: string|null): void;
 
     public static deregisterFromView(rowIds: (string)[]|null, rowDef: RowDefinition|null): (string)[]|null;
 

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

@@ -17,7 +17,7 @@ import { DataTable } from "../../core/es6/data/DataTable.js";
 * @property {boolean=} hidden=true When this row is hidden
 * @property {boolean=} realTime=true Realtime row, able to request for JET/RTK
 * @property {Object=} info=null For storing any additional information to the row
-* @property {string=} rowId Row identifier used for referencing the row
+* @property {string=} rowId Row identifier used for referencing the row. The value cannot be in "_x_" format.
 */
 
 /** @typedef {Object} RowDefinition~RowTypes
@@ -48,6 +48,12 @@ const ROW_TYPES = {
 	GROUP_MEMBER: "GROUP_MEMBER"
 };
 
+/** @type {RegExp}
+* @private
+* @const
+*/
+const ROW_ID_PATTERN = /^_[^_]+_$/;
+
 /** @constructor
 * @param {RowDefinition~Options=} rowOptions
 */
@@ -236,8 +242,12 @@ RowDefinition.prototype.initialize = function(rowOptions) {
 	if(!this._autoGenerated) {
 		let userRowId = rowOptions["rowId"];
 		if(userRowId && typeof userRowId === "string") {
-			this._rowId = this._dataId = userRowId;
-			this._userId = true;
+			if(userRowId.match(ROW_ID_PATTERN)) {
+				console.warn("Please change the rowId format to avoid duplicated rows' id causing unexpected behavior.");
+			} else {
+				this._rowId = this._dataId = userRowId;
+				this._userId = true;
+			}
 		}
 	}
 
@@ -991,14 +1001,20 @@ RowDefinition.prototype.resetUpdates = function() {
 
 /** @public
 * @param {DataView} view
-* @param {string=} rowId
+* @param {string=} destRowId Destination position where the row will be placed BEFORE the specified position.
 */
-RowDefinition.prototype.registerToView = function(view, rowId) {
+RowDefinition.prototype.registerToView = function(view, destRowId) {
 	if(!view || this._view === view) {
 		return; // Already in the view
 	}
 	this._view = view;
 
+	let rowId = this.getRowId();
+	if(view.getRowData(rowId)) {
+		console.warn("Duplicated rows' id.");
+		return;
+	}
+
 	let rowData = null;
 	if(this._subSegment) {
 		rowData = this._view.getRowData(this.getRowId());
@@ -1013,32 +1029,27 @@ RowDefinition.prototype.registerToView = function(view, rowId) {
 
 	let parentRowId = "";
 	let isSegment = this._isChain || this._asSegment;
-	if(rowId) {
-		parentRowId = view.getSegmentParentRowId(rowId);
+	if(destRowId) {
+		parentRowId = view.getSegmentParentRowId(destRowId);
 		if(parentRowId) {
 			if(isSegment) { // A chain or a segment cannot be put inside another segment
-				rowId = _getEndOfSegmentRowId(view, rowId);
+				destRowId = _getEndOfSegmentRowId(view, destRowId);
 			} // else { // Normal row is inserted into a segment
 		}
 	}
 
 	let stalledSorting = _stallSorting(view, isSegment, false);
-
-	let newRowId = view.insertRow(rowId, rowData, this.getRowId());
-	if(newRowId !== this._rowId) {
-		this._rowId = newRowId; // In case there is some duplicate row id
-		this._userId = false;
-	}
+	view.insertRow(destRowId, rowData, rowId);
 
 	if(isSegment) {
-		view.setSegmentSeparator(newRowId);
+		view.setSegmentSeparator(rowId);
 		_stallSorting(view, false, stalledSorting);
 		if(this._collapsed != null) {
-			view.collapseSegment(newRowId, this._collapsed);
+			view.collapseSegment(rowId, this._collapsed);
 			this._collapsed = null;
 		}
 	} else if(!this._parent && parentRowId) { // Constituent cannot be added to another segment
-		view.addSegmentChild(parentRowId, newRowId, this._dataId);
+		view.addSegmentChild(parentRowId, rowId, this._dataId);
 	}
 };
 /** @private

package/lib/tr-grid-auto-tooltip/es6/AutoTooltip.js

@@ -417,28 +417,31 @@ AutoTooltipPlugin.prototype._updateNonContentSection = function (section, colInd
 		var elem = cell.getContent();
 		if(!elem) { return false; }
 
-		// Set tooltip only if text's length is longer than column width.
-		var tooltip = cell.getAttribute("tooltip") || cell.getTooltip();
+		var tooltipInfo = cell.getTooltipInfo();
+		if(tooltipInfo) {
+			if(tooltipInfo["userTooltip"] != null ||
+				tooltipInfo["groupHeaderDefault"] != null ||
+				tooltipInfo["columnDefault"] != null) {
+
+				cell.setTooltipInfo("clippedText", false);
+				cell.removeAttribute("ef-title");
+				continue;
+			}
+		}
 
+		// Set tooltip only if text's length is longer than column width.
 		var sw = elem.scrollWidth;
 		if(sw && sw > elem.offsetWidth) {
-			if(!tooltip) {
-				tooltip = cell.getTextContent(); // TODO: Allow custom tooltip text
-				cell._autoTooltip = true;
-			}
-		} else {
-			if(cell._autoTooltip) {
-				tooltip = "";
-				cell._autoTooltip = false;
-			}
-		}
+			cell.setTooltipInfo("clippedText", true);
 
-		cell.setTooltip(tooltip); // TODO: Avoiding using getter and setter in the same loop
-		if(tooltip) {
-			cell.setAttribute("ef-title", tooltip); // to make sure ef-title value will actually change
+			var tooltip = cell.getTextContent();
+			cell.setTooltipInfo("clippedTextTooltip", tooltip);
+			cell.setAttribute("ef-title", tooltip);
 		} else {
+			cell.setTooltipInfo("clippedText", false);
 			cell.removeAttribute("ef-title");
 		}
+		cell.updateTooltip();
 	}
 	return true;
 };

package/lib/tr-grid-checkbox/es6/Checkbox.js

@@ -710,6 +710,9 @@ CheckboxPlugin.prototype._createCheckbox = function (sectionSettings, colIndex,
 
 	cell.setContent(chkbox);
 	let sectionType = sectionSettings.getType();
+	if(sectionType === "title") {
+		chkbox.setAttribute("aria-label", "all rows");
+	}
 
 	if(!this._coralCheckboxVer) { // Workaround for UIFR theme styling
 		let lbl = document.createElement("label");
@@ -1658,6 +1661,7 @@ CheckboxPlugin.prototype._onPostSectionDataBinding = function (e) {
 		if(!chkbox) {
 			chkbox = checkboxes[i] = this._createCheckbox(sectionSettings, this._displayColumn, rowIndex);
 		}
+		chkbox.setAttribute("aria-label", "row " + rowIndex);
 		let rowId = dv.getRowId(rowIndex); // Slow
 		rowData = this._getRowFromId(dv, rowId);
 		if(hasBinding && chkbox) {

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -516,6 +516,9 @@ ColumnGroupingPlugin.prototype._applyGrouping = function () {
 						cell.removeClass("no-sort");
 						cell.removeClass("selected-group");
 						cell.removeAttribute("group-id");
+						cell.setTooltipInfo("groupHeaderDefault", false);
+						cell.setTooltipInfo("groupHeaderTooltip", null);
+						cell.updateTooltip();
 					}
 				}
 			}
@@ -909,7 +912,9 @@ ColumnGroupingPlugin.prototype._renderGroup = function(groupDef, section) {
 	if(cell) {
 		// Overide the defaults
 		cell.setStyle("text-align", groupDef["alignment"] || "");
-		cell.setTooltip(ColumnGroupingPlugin._getTooltip(groupDef));
+		cell.setTooltipInfo("groupHeaderDefault", groupDef["tooltip"]);
+		cell.setTooltipInfo("groupHeaderTooltip", ColumnGroupingPlugin._getTooltip(groupDef));
+		cell.updateTooltip();
 		cell.setContent(groupDef["name"] || groupDef["title"]);
 
 		// Additional cell settings must be removed in the _applyGrouping() method

package/lib/tr-grid-filter-input/es6/FilterInput.js

@@ -532,6 +532,7 @@ FilterInputPlugin.prototype._createFilterUI = function (colOpt) {
   elem.className = "filter-input";
   elem.style.width = "100%";
   elem.style.margin = "0";
+  elem.setAttribute("aria-label", "column filtering");
   var placeholder = colOpt["placeholder"];
 
   if (placeholder) {

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

@@ -73,8 +73,6 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public setJETDragContent(content: any): void;
 
-    public setJETDragContent(content: any): void;
-
 }
 
 export default RowDraggingPlugin;