@refinitiv-ui/efx-grid 6.0.107 → 6.0.109

package/lib/core/es6/grid/Core.d.ts

@@ -371,8 +371,6 @@ declare class Core extends ElementWrapper {
 
     public reserveRightSpace(size: number): boolean;
 
-    public getHiddenInput(): Element|null;
-
     public focus(): void;
 
     public isBinding(): boolean;
@@ -391,6 +389,8 @@ declare class Core extends ElementWrapper {
 
     public isSelectedColumn(colIndex: number): boolean;
 
+    public updateColumnBounds(): void;
+
     public getColumnRect(startColIndex: number, endColIndex: number): any;
 
     public getRowRect(startRowIndex: number, endRowIndex: number): any;

package/lib/core/es6/grid/Core.js

@@ -52,6 +52,9 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 /** @event Core#preForcedUpdate
 * @ignore
 */
+/** @event Core#tabNavigation
+* @ignore
+*/
 //#endregion Events
 
 /** @private
@@ -62,6 +65,44 @@ import VirtualizedLayoutGrid from "./VirtualizedLayoutGrid.js";
 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.
@@ -85,6 +126,7 @@ let 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._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -105,7 +147,7 @@ let 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);
@@ -146,7 +188,7 @@ let Core = function (opt_initializer) {
 	// Initialize vertical scrollbar
 	_t._vscrollbar = new 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);
@@ -159,25 +201,27 @@ let Core = function (opt_initializer) {
 	// Initialize horizontal scrollbars
 	_t._hscrollbar = new 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);
 	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
@@ -185,10 +229,17 @@ let Core = function (opt_initializer) {
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
 	_t._rowHeightConflator = new Conflator(_t._onRowHeightChanged, 50);
 	_t._vScrollbarConflator = new Conflator(_t._updateVScrollbar, 200);
-	_t._columnBoundConflator = new Conflator(_t._updateColumnBounds, 10);
+	_t._columnBoundConflator = new Conflator(_t.updateColumnBounds, 10);
 	_t._columnPositionConflator = new Conflator(_t._dispatchColumnPositionChanged, 10);
 	_t._rowPositionConflator = new 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",
@@ -217,7 +268,8 @@ let Core = function (opt_initializer) {
 		"beforeColumnBoundUpdate",
 		"beforeBatchOperation",
 		"afterBatchOperation",
-		"pinningChanged"
+		"pinningChanged",
+		"tabNavigation"
 	);
 
 	// For debugging in advanced optimization mode
@@ -226,9 +278,9 @@ let Core = function (opt_initializer) {
 		map = {};
 		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._runningGridId;
 	}
@@ -236,17 +288,6 @@ let Core = function (opt_initializer) {
 	map[id] = _t;
 	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", {
@@ -526,11 +567,16 @@ Core.prototype._rowRefreshTimer = 0;
 * @private
 */
 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.prototype._hiddenInput;
+Core.prototype._firstHiddenInput;
+/** A hidden input that allows grid to receive keyboard input and focus
+* @type {!Element}
+* @private
+*/
+Core.prototype._lastHiddenInput;
 /** @type {number}
 * @private
 */
@@ -574,7 +620,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.108";
+	return "5.1.111";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -635,11 +681,12 @@ 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();
 
@@ -1804,7 +1851,7 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._updateColumnSeparators();
 	return true;
 };
@@ -4037,15 +4084,14 @@ 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.prototype.getHiddenInput = function () {
-	return this._hiddenInput;
+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.
@@ -4054,8 +4100,8 @@ Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 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;
@@ -4186,7 +4232,7 @@ 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
@@ -4200,9 +4246,9 @@ Core.prototype.isSelectedColumn = function (colIndex) {
 	return false;
 };
 
-/** @private
+/** @public
 */
-Core.prototype._updateColumnBounds = function () {
+Core.prototype.updateColumnBounds = function () {
 	if(this._columnBoundConflator.conflate()) {
 		return;
 	}
@@ -4689,14 +4735,14 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 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);
 		}
 	}
 };
@@ -5082,7 +5128,7 @@ Core.prototype._onVScroll = function (e) {
 Core.prototype._onHScroll = function (e) {
 	let scrollVal = this._hscrollbar.getScrollLeft();
 	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
-	this._updateColumnBounds();
+	this.updateColumnBounds();
 	this._dispatchColumnPositionChanged();
 };
 /** @private
@@ -5381,14 +5427,44 @@ Core.prototype._onMouseMove = function () {
 };
 /** @private */
 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.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 and move out of grid
+		} else if(onTheEdge < 0 && !e.shiftKey) {
+			this._lastHiddenInput.focus(); // skip to the end and move out of grid
+		}
 	}
 };
 
@@ -5571,6 +5647,7 @@ 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);
@@ -5588,7 +5665,7 @@ 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()) {
@@ -5884,7 +5961,7 @@ Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatching)
 	// 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();
 

package/lib/core/es6/grid/components/Scrollbar.js

@@ -838,7 +838,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");

package/lib/formatters/es6/index.d.ts

@@ -19,6 +19,17 @@ import SimpleTickerFormatter from "./SimpleTickerFormatter.js";
 import SimpleToggleFormatter from "./SimpleToggleFormatter.js";
 import TextFormatter from "./TextFormatter.js";
 
+import EFButtonFormatter from "./EFButtonFormatter.js";
+import EFCheckboxFormatter from "./EFCheckboxFormatter.js";
+import EFComboBoxFormatter from "./EFComboBoxFormatter.js";
+import EFDateTimePickerFormatter from "./EFDateTimePickerFormatter.js";
+import EFIconFormatter from "./EFIconFormatter.js";
+import EFNumberFieldFormatter from "./EFNumberFieldFormatter.js";
+import EFRadioButtonFormatter from "./EFRadioButtonFormatter.js";
+import EFSelectFormatter from "./EFSelectFormatter.js";
+import EFTextFieldFormatter from "./EFTextFieldFormatter.js";
+import EFToggleFormatter from "./EFToggleFormatter.js"; 
+
 
 
 export {
@@ -39,5 +50,15 @@ export {
 	SimpleLinkFormatter,
 	SimpleTickerFormatter,
 	SimpleToggleFormatter,
-	TextFormatter
+	TextFormatter,
+	EFButtonFormatter,
+	EFCheckboxFormatter,
+	EFComboBoxFormatter,
+	EFDateTimePickerFormatter,
+	EFIconFormatter,
+	EFNumberFieldFormatter,
+	EFRadioButtonFormatter,
+	EFSelectFormatter,
+	EFTextFieldFormatter,
+	EFToggleFormatter
 };

package/lib/formatters/es6/index.js

@@ -19,6 +19,17 @@ import SimpleTickerFormatter from "./SimpleTickerFormatter.js";
 import SimpleToggleFormatter from "./SimpleToggleFormatter.js";
 import TextFormatter from "./TextFormatter.js";
 
+import EFButtonFormatter from "./EFButtonFormatter.js";
+import EFCheckboxFormatter from "./EFCheckboxFormatter.js";
+import EFComboBoxFormatter from "./EFComboBoxFormatter.js";
+import EFDateTimePickerFormatter from "./EFDateTimePickerFormatter.js";
+import EFIconFormatter from "./EFIconFormatter.js";
+import EFNumberFieldFormatter from "./EFNumberFieldFormatter.js";
+import EFRadioButtonFormatter from "./EFRadioButtonFormatter.js";
+import EFSelectFormatter from "./EFSelectFormatter.js";
+import EFTextFieldFormatter from "./EFTextFieldFormatter.js";
+import EFToggleFormatter from "./EFToggleFormatter.js"; 
+
 // tsd-disable
 var tr = window["tr"];
 if (!tr) {
@@ -63,5 +74,15 @@ export {
 	SimpleLinkFormatter,
 	SimpleTickerFormatter,
 	SimpleToggleFormatter,
-	TextFormatter
+	TextFormatter,
+	EFButtonFormatter,
+	EFCheckboxFormatter,
+	EFComboBoxFormatter,
+	EFDateTimePickerFormatter,
+	EFIconFormatter,
+	EFNumberFieldFormatter,
+	EFRadioButtonFormatter,
+	EFSelectFormatter,
+	EFTextFieldFormatter,
+	EFToggleFormatter
 };

package/lib/grid/index.js

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

package/lib/grid/lib/efx-grid.js

@@ -17,6 +17,7 @@ import ColumnDraggingPlugin from "../../column-dragging/es6/ColumnDragging.js";
 import cssStr from "../../core/es6/tr-grid-theme.js";
 
 const coreGridStyle = css`${unsafeCSS(cssStr)}`;
+let preloadPromise = null;
 
 /**
  * @typedef {Object} Grid~Config
@@ -89,7 +90,18 @@ class Grid extends ResponsiveElement {
 
 		this._onResizeHandler = this._onResizeHandler.bind(this);
 		this.resizedCallback = this.resizedCallback.bind(this);
+		this._preloadElfIcon = this._preloadElfIcon.bind(this);
 	}
+
+	/**
+	 * @protected
+	 * @ignore
+	 */
+	firstUpdated() {
+		// pre load elf svg icon
+		this._preloadElfIcon();
+	}
+
 	/**
 	 * @protected
 	 * @ignore
@@ -221,7 +233,7 @@ class Grid extends ResponsiveElement {
 	/**
 	 * @private
 	 */
-	async _configChange() {
+	_configChange() {
 		let gridElem;
 		if (this.api) {
 			// Remove old grid element and Realtime Grid's API
@@ -308,15 +320,6 @@ class Grid extends ResponsiveElement {
 		// Inject icons and theme name
 		ElfUtil.injectIcons(options, this);
 
-		// pre load elf svg icon
-		const { preloadd } = await import("@refinitiv-ui/elements/icon");
-		if (preloadd) {
-			const iconList = ElfUtil.prepareIconPreloading();
-			if (iconList) {
-				preload(...iconList);
-			}
-		}
-
 		if (ElfUtil.isHaloTheme()) {
 			if (options.borders == null) {
 				options.borders = false;
@@ -369,6 +372,25 @@ class Grid extends ResponsiveElement {
 		}
 	}
 
+	/**
+	 * @private
+	 * Load preload icon for element framework v7
+	 */
+	_preloadElfIcon() {
+		// pre load elf svg icon
+		if(!preloadPromise) { // import only one time
+			preloadPromise = import("@refinitiv-ui/elements/icon").then(function(e) {
+				let preload = e.preload;
+				if (preloadd) {
+					const iconList = ElfUtil.prepareIconPreloading();
+					if (iconList) {
+						preload(...iconList);
+					}
+				}
+			}).catch(function(){});
+		}
+	}
+
 	/** Called when the element's size has changed
 	 * @public
 	 * @return {void}