@refinitiv-ui/efx-grid 6.0.107 → 6.0.108

package/lib/core/dist/core.js

@@ -6854,7 +6854,7 @@ Scrollbar.prototype._clearAllPanes = function() {
 */
 Scrollbar.prototype.disableKeyboardInput = function (opt_disabled) {
 	if(opt_disabled === false) {
-		this._element.setAttribute("tabindex", "0");
+		this._element.setAttribute("tabindex", "-1"); // tabindex makes the element focusable. The negative value exclude it from tab key navigation
 		this._element.addEventListener("keydown", this._onKeyDown, false);
 	} else {
 		this._element.removeAttribute("tabindex");
@@ -25142,6 +25142,9 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 /** @event Core#preForcedUpdate
 * @ignore
 */
+/** @event Core#tabNavigation
+* @ignore
+*/
 //#endregion Events
 
 /** @private
@@ -25152,6 +25155,44 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 let ascNumberSorter = function (a, b) {
 	return a - b;
 };
+/** @private
+* @return {!Element}
+*/
+let _createHiddenInput = function () {
+	let hiddenInput = document.createElement("input");
+	let styleObj = hiddenInput.style;
+	styleObj.position = "absolute";
+	styleObj.width = styleObj.height = styleObj.padding = styleObj.border = "0";
+	hiddenInput.value = "0";
+	return hiddenInput;
+};
+/** @private
+* @param {Object} e
+* @return {boolean}
+*/
+let _isTabCommand = function (e) {
+	if(e.keyCode === 9) {
+		return !e.ctrlKey && !e.altKey && !e.metaKey;
+	}
+	return false;
+};
+/** @private
+* @param {Element} elem
+* @return {Element}
+*/
+let _getActiveElement = function (elem) {
+	if(elem) {
+		if(elem.getRootNode) {
+			let rootNode = elem.getRootNode(); // Get uncomposed root node
+			if(rootNode && rootNode !== elem) { // The root node could be the element itself, if it is not attached to the DOM tree
+				return rootNode.activeElement || null;
+			}
+		} else { // Older browser does not support getRootNode
+			return document.activeElement;
+		}
+	}
+	return null;
+};
 
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
@@ -25175,6 +25216,8 @@ let Core_Core = function (opt_initializer) {
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 	_t._onGridClicked = _t._onGridClicked.bind(_t);
+	_t._onKeyDown = _t._onKeyDown.bind(_t);
+	_t._onKeyUp = _t._onKeyUp.bind(_t);
 
 	_t._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -25195,7 +25238,7 @@ let Core_Core = function (opt_initializer) {
 	_t._onColInViewChanged =  _t._onColInViewChanged.bind(_t);
 
 	_t._updateVScrollbar = _t._updateVScrollbar.bind(_t);
-	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
+	_t.updateColumnBounds = _t.updateColumnBounds.bind(_t);
 	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
 	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
 	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
@@ -25236,7 +25279,7 @@ let Core_Core = function (opt_initializer) {
 	// Initialize vertical scrollbar
 	_t._vscrollbar = new components_VScrollbar();
 	_t._vscrollbar.disable();
-	_t._vscrollbar.setParent(this.getParent() || this.getElement());
+	_t._vscrollbar.setParent(_t.getParent() || _t.getElement());
 
 	_t._vscrollbar.listen("scroll", _t._onVScroll);
 	_t._vscrollbar.listen("layoutChanged", _t._onVScroll);
@@ -25249,25 +25292,28 @@ let Core_Core = function (opt_initializer) {
 	// Initialize horizontal scrollbars
 	_t._hscrollbar = new components_HScrollbar();
 	_t._hscrollbar.disable();
-	_t._hscrollbar.setParent(this.getParent() || this.getElement());
+	_t._hscrollbar.setParent(_t.getParent() || _t.getElement());
 
-	_t._hscrollbar.listen("scroll", this._onHScroll);
-	_t._hscrollbar.listen("layoutChanged", this._onHScroll);
-	_t._hscrollbar.listen("activated", this.updateLayout);
-	_t._hscrollbar.listen("deactivated", this.updateLayout);
+	_t._hscrollbar.listen("scroll", _t._onHScroll);
+	_t._hscrollbar.listen("layoutChanged", _t._onHScroll);
+	_t._hscrollbar.listen("activated", _t.updateLayout);
+	_t._hscrollbar.listen("deactivated", _t.updateLayout);
 
 	// cross-reference scrollbars
 	_t._hscrollbar.setOtherScrollbar(_t._vscrollbar);
 	_t._vscrollbar.setOtherScrollbar(_t._hscrollbar);
 
+
+	_t._element.addEventListener("keydown", _t._onKeyDown);
+	_t._element.addEventListener("keyup", _t._onKeyUp);
 	if (util.isMobile || util.isTouchDevice) {
-		_t._element.addEventListener("touchmove", this._onMouseMove, false);
+		_t._element.addEventListener("touchmove", _t._onMouseMove, false);
 	} else {
-		_t._element.addEventListener("mousemove", this._onMouseMove, false);
+		_t._element.addEventListener("mousemove", _t._onMouseMove, false);
 	}
 
 	if(util.isSafari){
-		_t._element.addEventListener("click", this._onGridClicked);
+		_t._element.addEventListener("click", _t._onGridClicked);
 	}
 
 	window.addEventListener("resize", _t._onWindowResize, false); // Should be unlistened after destroyed
@@ -25275,10 +25321,17 @@ let Core_Core = function (opt_initializer) {
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
 	_t._rowHeightConflator = new util_Conflator(_t._onRowHeightChanged, 50);
 	_t._vScrollbarConflator = new util_Conflator(_t._updateVScrollbar, 200);
-	_t._columnBoundConflator = new util_Conflator(_t._updateColumnBounds, 10);
+	_t._columnBoundConflator = new util_Conflator(_t.updateColumnBounds, 10);
 	_t._columnPositionConflator = new util_Conflator(_t._dispatchColumnPositionChanged, 10);
 	_t._rowPositionConflator = new util_Conflator(_t._dispatchRowPositionChanged, 10);
 
+	_t._firstHiddenInput = _createHiddenInput();
+	_t._firstHiddenInput.className = "first-input";
+	_t._lastHiddenInput = _createHiddenInput();
+	_t._lastHiddenInput.className = "last-input";
+	_t._element.insertBefore(_t._firstHiddenInput, _t._element.firstChild);
+	_t._element.appendChild(_t._lastHiddenInput);
+
 	// Initialize events for external users
 	_t._addEvents(
 		"sectionAdded",
@@ -25307,7 +25360,8 @@ let Core_Core = function (opt_initializer) {
 		"beforeColumnBoundUpdate",
 		"beforeBatchOperation",
 		"afterBatchOperation",
-		"pinningChanged"
+		"pinningChanged",
+		"tabNavigation"
 	);
 
 	// For debugging in advanced optimization mode
@@ -25316,9 +25370,9 @@ let Core_Core = function (opt_initializer) {
 		map = {};
 		Core_Core["map"] = map;
 	}
-	let elem = _t._element;
-	elem["_control"] = _t;
-	let id = elem.id || elem.name;
+
+	_t._element["_control"] = _t;
+	let id = _t._element.id || _t._element.name;
 	if(!id || map[id]) {
 		id = "_grid" + Core_Core._runningGridId;
 	}
@@ -25326,17 +25380,6 @@ let Core_Core = function (opt_initializer) {
 	map[id] = _t;
 	Core_Core._runningGridId++;
 
-	// init hiddenInput for retrieve copy and cut event
-	let hiddenInput = document.createElement("input");
-	hiddenInput.style.position = "absolute";
-	hiddenInput.style.width = "0";
-	hiddenInput.style.height = "0";
-	hiddenInput.style.padding = "0";
-	hiddenInput.style.border = "0";
-	hiddenInput.value = "0";
-	_t._hiddenInput = hiddenInput;
-	elem.insertBefore(hiddenInput, elem.firstChild);
-
 	// Ensure all affected plugins are loaded prior zoom plugin
 	// use as entity to trigger updateLayout once zoom is changed
 	Object.defineProperty(_t, "zoomFactor", {
@@ -25616,11 +25659,16 @@ Core_Core.prototype._rowRefreshTimer = 0;
 * @private
 */
 Core_Core.prototype._layoutUpdating = false;
-/** A Hidden input that allow to get cut and copy event when user perform cut, copy activities
-* @type {Element}
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
 * @private
 */
-Core_Core.prototype._hiddenInput;
+Core_Core.prototype._firstHiddenInput;
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
+* @private
+*/
+Core_Core.prototype._lastHiddenInput;
 /** @type {number}
 * @private
 */
@@ -25664,7 +25712,7 @@ Core_Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core_Core.getVersion = function () {
-	return "5.1.108";
+	return "5.1.110";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -25725,11 +25773,12 @@ Core_Core.prototype.dispose = function () {
 
 	// Clean Top node
 	let elem = this._element;
-	if (elem !== null) {
+	if (elem) {
 		if (elem["_control"]) {
 			delete elem["_control"];
 		}
-		elem.removeChild(this._hiddenInput);
+		elem.removeChild(this._firstHiddenInput);
+		elem.removeChild(this._lastHiddenInput);
 	}
 	this._dispose();
 
@@ -26894,7 +26943,7 @@ Core_Core.prototype._moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	return true;
 };
@@ -29127,15 +29176,14 @@ Core_Core.prototype.reserveRightSpace = function (size) {
 	return false;
 };
 
-/** Get hidden input in grid <br>
-* this input for make grid can copy <br>
-* normal user should not touch it <br>
-* but sometime grid extension will have to use this element
+/** Get the hidden input. This input allows grid to receive keyboard input
 * @public
-* @return {Element}
+* @ignore
+* @param {boolean} firstInput
+* @return {!Element}
 */
-Core_Core.prototype.getHiddenInput = function () {
-	return this._hiddenInput;
+Core_Core.prototype.getHiddenInput = function (firstInput) {
+	return firstInput ? this._firstHiddenInput : this._lastHiddenInput;
 };
 
 /** Focus grid element without bringing grid into window's view. This is useful when grid is very wide or tall, since window can be scrolled to focused element by default in some browsers.
@@ -29144,8 +29192,8 @@ Core_Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 Core_Core.prototype.focus = function () {
-	let elem = this._hiddenInput;
-	let activeElem = document.activeElement;
+	let elem = this._lastHiddenInput;
+	let activeElem = _getActiveElement(elem);
 	if(elem && elem !== activeElem) {
 		let x = window.pageXOffset;
 		let y = window.pageYOffset;
@@ -29276,7 +29324,7 @@ Core_Core.prototype.selectColumn = function (colIndex, selected) {
 	for (let i = this._settings.length; --i >= 0; ) {
 		this._settings[i].getSection().selectColumn(colIndex, selected);
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 };
 /** @public
 * @param {number} colIndex
@@ -29290,9 +29338,9 @@ Core_Core.prototype.isSelectedColumn = function (colIndex) {
 	return false;
 };
 
-/** @private
+/** @public
 */
-Core_Core.prototype._updateColumnBounds = function () {
+Core_Core.prototype.updateColumnBounds = function () {
 	if(this._columnBoundConflator.conflate()) {
 		return;
 	}
@@ -29779,14 +29827,14 @@ Core_Core.prototype._newSection = function (opt_type, sectionName) {
 Core_Core.prototype._putToLast = function(section) {
 	let sectionCount = this._settings.length;
 	if (sectionCount === 0) {
-		section.setParent(this._element, true);
+		section.insertBefore(this._lastHiddenInput);
 	} else {
 		let lastGrid = this.getLastSection();
 		let nextSibling = lastGrid.getElement().nextSibling;
 		if (nextSibling !== null) {
 			section.insertBefore(nextSibling);
 		} else {
-			section.setParent(this._element);
+			section.insertBefore(this._lastHiddenInput);
 		}
 	}
 };
@@ -30172,7 +30220,7 @@ Core_Core.prototype._onVScroll = function (e) {
 Core_Core.prototype._onHScroll = function (e) {
 	let scrollVal = this._hscrollbar.getScrollLeft();
 	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._dispatchColumnPositionChanged();
 };
 /** @private
@@ -30471,14 +30519,66 @@ Core_Core.prototype._onMouseMove = function () {
 };
 /** @private */
 Core_Core.prototype._onGridClicked = function () {
-	// research for dragging
 	let selection = window.getSelection();
-	if(selection.toString()){
+	if(!selection.toString()){
+		if(!this._element.contains(_getActiveElement(this._element))){
+			this.focus();
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+Core_Core.prototype._onKeyDown = function (e) {
+	if(!_isTabCommand(e)) {
 		return;
 	}
-	let activeElem = document.activeElement;
-	if(!this._element.contains(activeElem)){
-		this.focus();
+	let activeElement = _getActiveElement(this._element);
+	let onTheEdge = false;
+	if(this._firstHiddenInput === activeElement) {
+		onTheEdge = -1;
+	} else if(this._lastHiddenInput === activeElement) {
+		onTheEdge = 1;
+	}
+
+	this._dispatch("tabNavigation", {
+		"activeElement": activeElement,
+		"firstHiddenInput": this._firstHiddenInput,
+		"lastHiddenInput": this._lastHiddenInput,
+		"onTheEdge": onTheEdge,
+		"shiftKey": e.shiftKey,
+		"event": e
+	});
+
+	if(onTheEdge && !e.defaultPrevented) {
+		if(onTheEdge > 0 && e.shiftKey) {
+			this._firstHiddenInput.focus(); // jump to the top
+			e.preventDefault();
+		} else if(onTheEdge < 0 && !e.shiftKey) {
+			this._lastHiddenInput.focus(); // skip to the end
+			e.preventDefault();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+Core_Core.prototype._onKeyUp = function (e) {
+	if(!_isTabCommand(e)) {
+		return;
+	}
+	var activeElem = _getActiveElement(this._element);
+	if(e.shiftKey) {
+		if(activeElem === this._lastHiddenInput) {
+			this._firstHiddenInput.focus();
+			e.preventDefault();
+		}
+	} else {
+		if(activeElem === this._firstHiddenInput) {
+			this._lastHiddenInput.focus();
+			e.preventDefault();
+		}
 	}
 };
 
@@ -30661,6 +30761,7 @@ Core_Core.prototype._onSectionCountChanged = function (opt_suppressLayout) {
 
 		// Reinsert sections
 		this._vscrollbar.setScrollContent(this, this._getAllSections(), this._startVScrollbarIndex);
+		this._element.appendChild(this._lastHiddenInput); // Ensure that the hidden input is always at the last position
 
 		if(!opt_suppressLayout) {
 			this._updateScrollbarHeight(true, true);
@@ -30678,7 +30779,7 @@ Core_Core.prototype._onColumnCountChanged = function () {
 	let pinnedLeft = this._countPinnedLeftColumns();
 	let pinnedRight = this._countPinnedRightColumns();
 
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 
 	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {
@@ -30974,7 +31075,7 @@ Core_Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatch
 	// TODO: Check if "to" should be greater than or equal to first pinnied right index
 	let paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
 	this._updateScrollbarWidth(paneChanged, true /* contentChanged */);
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	this._dispatchColumnPositionChanged();