@refinitiv-ui/efx-grid 6.0.136 → 6.0.138

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

@@ -570,7 +570,7 @@ class ColumnSelectionDialog extends BasicElement {
 		this._excludedRightColumns = 0;
 		this._unmovableColumns = 0;
 		this._pendingScroll = false;
-		this._highlightedElem = null; // There can only one highlighted elem
+		this._focusedElement = null;
 		this._pendingTreeRefresh = false;
 		this._pendingResetSearchInput = false;
 		this._middleSeparator = "";
@@ -613,6 +613,8 @@ class ColumnSelectionDialog extends BasicElement {
 		this._handleInfoIconMouseover = this._handleInfoIconMouseover.bind(this);
 		this._handleInfoIconMouseout = this._handleInfoIconMouseout.bind(this);
 		this._handleClick = this._handleClick.bind(this);
+		this._handleFocusIn = this._handleFocusIn.bind(this);
+		this._handleFocusOut = this._handleFocusOut.bind(this);
 		this._createTreeCustomRender = this._createTreeCustomRender.bind(this);
 		this._selectAllCheckedChanged = this._selectAllCheckedChanged.bind(this);
 
@@ -738,7 +740,7 @@ class ColumnSelectionDialog extends BasicElement {
 					</div>
 					<div class="row">
 						<div class="side">
-							<ef-search-field placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
+							<ef-search-field aria-label="search for columns" placeholder="${this._searchPlaceholder ? this._searchPlaceholder : t["Search"]}" id="searchInput"></ef-search-field>
 						</div>
 						<div class="side">
 							<label>${t["Show in this order"]}</label>
@@ -750,13 +752,13 @@ class ColumnSelectionDialog extends BasicElement {
 							<div id="allColumns">
 								<ef-item id="treeNoResult" class="no-results" label="${t["No results found"]}"></ef-item>
 								<ef-header level="1" id="selectAllHeader">
-									<ef-checkbox id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
+									<ef-checkbox aria-label="select all columns" id="selectAllCheckbox">${t["Select All"]}</ef-checkbox>
 								</ef-header>
-								<ef-tree id="tree" multiple></ef-tree>
+								<ef-tree aria-label="column list" id="tree" multiple></ef-tree>
 							</div>
 						</div>
 						<div class="side" id="visibleSide">
-							<div id="visibleColumns">
+							<div id="visibleColumns" aria-label="visible column list">
 								${this._visibleColumnList.map(item => html`
 									<ef-item
 										value="${item.value}"
@@ -768,10 +770,10 @@ class ColumnSelectionDialog extends BasicElement {
 							</div>
 							<div id="ordering_div">
 								<div id="ordering_buttons">
-									<ef-button icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button><!--
-									--><ef-button icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
+									<ef-button aria-label="move selected visible columns up" icon="up" @click="${this._onUpItem}" id="upItem">${t["Up"]}</ef-button><!--
+									--><ef-button aria-label="move selected visible columns down" icon="down" @click="${this._onDownItem}" id="downItem">${t["Down"]}</ef-button>
 								</div>
-								<ef-button id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
+								<ef-button aria-label="remove selected visible columns" id="removeFromVisibleColumnsBtn" @click="${this._removeBtnClicked}">${t["Remove"]}</ef-button>
 							</div>
 						</div>
 					</div>
@@ -779,7 +781,7 @@ class ColumnSelectionDialog extends BasicElement {
 				</div>
 				<div slot="footer">
 					<div part="custom-buttons">
-						${this._defaultItems ? html`<ef-button id="restore_btn" @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ""}
+						${this._defaultItems ? html`<ef-button aria-label="restore default visible columns" id="restore_btn" @click="${this._restoreDefault}" tabindex="0">${t["RESTORE DEFAULT"]}</ef-button>` : ""}
 						${hasNoVisibleItem ? html`<ef-icon icon="warning-circle"></ef-icon>` : ""}
 						${hasNoVisibleItem ? html`<div id="status_div">${t["WARNING_1"]}</div>` : ""}
 					</div>
@@ -827,6 +829,8 @@ class ColumnSelectionDialog extends BasicElement {
 		this._visibleColumnsContainer.addEventListener('mouseout', this._handleMouseout);
 		this._visibleColumnsContainer.addEventListener('click', this._handleClick);
 		this._visibleColumnsContainer.addEventListener('dblclick', this._removeBtnClicked);
+		this._visibleColumnsContainer.addEventListener('focusin', this._handleFocusIn);
+		this._visibleColumnsContainer.addEventListener('focusout', this._handleFocusOut);
 
 		// icon custom renderer
 		if(this._descriptionBox) { // TODO: This should not work only for the first time
@@ -1131,58 +1135,42 @@ class ColumnSelectionDialog extends BasicElement {
 		return getItemIndex(this._visibleColumnList, separatorCol.value, "value");
 	}
 
-	/** This will also remove focused state set by ef-item
-	 * @private
-	 */
-	_unhighlightItems() {
-		if(this._highlightedElem) { // There can be only one highlighted Item
-			this._highlightedElem.highlighted = false;
-			this._highlightedElem.removeAttribute('focused'); // WORKAROUND: Focused and highlighted have the same styles in Halo themes
-			this._highlightedElem = null;
-		}
-	}
-
 	/** @private
 	 * @param {number} step if positive highlight will move up, if negative highlight will move down
 	 */
-	_moveHighlightedItems(step) {
+	_moveFocusedItem(step) {
 		if (!step) {
 			return;
 		}
 
-		if (!this._highlightedElem) {
+		var focusedEl = this._focusedElement;
+		if (!focusedEl) {
 			var selectedIndexes = _getSelectedItemIndexes(this._visibleColumnList);
 			if (!selectedIndexes.length) {
 				return;
 			}
 
-			this._highlightedElem = this._visibleColumnsContainer.children[selectedIndexes[0]];
-			this._highlightedElem.highlighted = true;
+			focusedEl = this._visibleColumnsContainer.children[selectedIndexes[0]];
 		}
 
-		var pn = this._highlightedElem.parentNode;
+		var pn = focusedEl.parentNode;
 		if(!pn) {
 			return;
 		}
 
 		var chdr = pn.children;
 		var childCount = chdr.length;
-		var i; // highlighted index
+		var i; // focused element index
 		for(i = 0; i < childCount; ++i) {
-			if(chdr[i] === this._highlightedElem) {
+			if(chdr[i] === focusedEl) {
 				break;
 			}
 		}
-		if(i >= childCount) {
-			return;
-		}
 
 		i += step;
 		if (i >= 0 && i < childCount) {
-			this._unhighlightItems();
-			this._highlightedElem = chdr[i];
-			this._highlightedElem.highlighted = true;
 			scrollToItem(pn, i);
+			chdr[i].focus();
 		}
 	}
 
@@ -1501,6 +1489,22 @@ class ColumnSelectionDialog extends BasicElement {
 		this._selectAllStatus && this._selectAllCheckbox.setAttribute(this._selectAllStatus, "");
 	}
 
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleFocusIn(e) {
+		this._focusedElement = e.target;
+	}
+
+	/**
+	 * @private
+	 * @param {Object} e
+	 */
+	_handleFocusOut(e) {
+		this._focusedElement = null;
+	}
+
 	/**
 	 * @private
 	 * @param {Object} e
@@ -1509,17 +1513,32 @@ class ColumnSelectionDialog extends BasicElement {
 		var handled = false;
 		switch (e.keyCode) {
 		case 40: // down
-		case 9: // tab
-			this._moveHighlightedItems(1);
+			this._moveFocusedItem(1);
 			handled = true;
 			break;
 		case 38: // up
-			this._moveHighlightedItems(-1);
+			this._moveFocusedItem(-1);
 			handled = true;
 			break;
+		case 9: // tab
+			var focusedEl = this._focusedElement;
+			if (focusedEl) {
+				if (e.shiftKey) {
+					if(focusedEl.previousElementSibling) {
+						this._moveFocusedItem(-1);
+						handled = true;
+					}
+				} else {
+					if (focusedEl.nextElementSibling) {
+						this._moveFocusedItem(1);
+						handled = true;
+					}
+				}
+			}
+			break;
 		case 13: // enter
-			if(this._highlightedElem) {
-				this._highlightedElem.click();
+			if(this._focusedElement) {
+				this._focusedElement.click();
 				handled = true;
 			}
 			break;
@@ -1527,7 +1546,6 @@ class ColumnSelectionDialog extends BasicElement {
 
 		if(handled) {
 			e.preventDefault();
-			e.stopPropagation();
 		}
 	}
 
@@ -1538,14 +1556,7 @@ class ColumnSelectionDialog extends BasicElement {
 	_handleMouseover(e) {
 		var targetElem = e.target;
 		if (targetElem.highlightable) {
-			if (this._highlightedElem) {
-				if(this._highlightedElem === targetElem) {
-					return;
-				}
-				this._highlightedElem.highlighted = false;
-			}
-			this._highlightedElem = targetElem;
-			this._highlightedElem.highlighted = true;
+			targetElem.highlighted = true;
 		}
 	}
 
@@ -1554,11 +1565,7 @@ class ColumnSelectionDialog extends BasicElement {
 	 * @param {Object} e
 	 */
 	_handleMouseout(e) {
-		var targetElem = e.target;
-		if (targetElem === this._highlightedElem) {
-			targetElem.highlighted = false;
-			this._highlightedElem = null;
-		}
+		e.target.highlighted = false;
 	}
 
 	/**
@@ -1582,8 +1589,7 @@ class ColumnSelectionDialog extends BasicElement {
 			return;
 		}
 
-		var list = null;
-		list = this._visibleColumnList;
+		var list = this._visibleColumnList;
 		var selectedIndex = getDomElementIndex(selectedElement);
 
 		if(e.metaKey || e.ctrlKey) {
@@ -1608,7 +1614,7 @@ class ColumnSelectionDialog extends BasicElement {
 	 * @private
 	 * @param {object} e - event object
 	 */
-	 _handleInfoIconClicked(e) {
+	_handleInfoIconClicked(e) {
 		var targetElem = e.currentTarget;
 		var divItem = targetElem.parentNode;
 		var treeItem = divItem.parentNode;
@@ -1621,7 +1627,7 @@ class ColumnSelectionDialog extends BasicElement {
 	 * @private
 	 * @param {object} e - event object
 	 */
-	 _handleInfoIconMouseover(e) {
+	_handleInfoIconMouseover(e) {
 		var targetElem = e.currentTarget;
 		var divItem = targetElem.parentNode;
 		var treeItem = divItem.parentNode;
@@ -1634,7 +1640,7 @@ class ColumnSelectionDialog extends BasicElement {
 	 * @private
 	 * @param {object} e - event object
 	 */
-	 _handleInfoIconMouseout(e) {
+	_handleInfoIconMouseout(e) {
 		var targetElem = e.currentTarget;
 		var divItem = targetElem.parentNode;
 		var treeItem = divItem.parentNode;
@@ -1873,10 +1879,10 @@ class ColumnSelectionDialog extends BasicElement {
 	}
 
 	/**
- * ef-tree value changed event
- * @param {Object} e
- * @private
- */
+	 * ef-tree value changed event
+	 * @param {Object} e
+	 * @private
+	 */
 	_treeValueChanged(e) {
 		var selectedMapping = {};
 
@@ -2007,7 +2013,6 @@ class ColumnSelectionDialog extends BasicElement {
 			if (index >= 0) this._visibleColumnList[index] = null;
 		}
 		this._visibleColumnList = this._visibleColumnList.filter(Boolean); // clear null element
-		this._unhighlightItems();
 		this._pendingButtonUpdate = true;
 	}
 }

package/lib/core/dist/core.js

@@ -8199,10 +8199,6 @@ LayoutGrid.prototype._colBounds = null;
 * @private
 */
 LayoutGrid.prototype._colBoundCache = null;
-/** @type {boolean}
-* @private
-*/
-LayoutGrid.prototype._colSelDirty = false;
 /** @type {HScrollbar}
 * @private
 */
@@ -8237,7 +8233,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;
@@ -9948,7 +9943,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;
@@ -10184,8 +10179,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();
@@ -10313,10 +10306,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) {
@@ -10343,7 +10332,6 @@ LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx)
 	cbs.length = activeCount = rangeCount;
 
 	if(!rangeCount) {
-		this._colSelDirty = false;
 		return;
 	}
 
@@ -10430,7 +10418,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) {
@@ -10828,6 +10816,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
@@ -25895,7 +25897,7 @@ Core_Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.1.130";
+	return "5.1.133";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -27342,7 +27344,7 @@ Core_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
 	}