@refinitiv-ui/efx-grid 6.0.137 → 6.0.139

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/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.137" };
+window.EFX_GRID = { version: "6.0.139" };

package/lib/row-segmenting/es6/RowSegmenting.d.ts

@@ -49,8 +49,6 @@ declare class RowSegmentingPlugin extends GridPlugin {
 
     public getSegmentParentRowId(rowRef: string|number|null): string;
 
-    public _resolveDisplayColumn(): number;
-
     public setSegmentSeparators(rowIds: (string)[]|null, enabled?: boolean|null): boolean;
 
     public setSegmentSeparator(rowRef: string|number|null, enabled?: boolean|null): boolean;