@syncfusion/ej2-navigations 20.4.42 → 20.4.44

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.42
+*  version : 20.4.44
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@20.4.40",
+  "_id": "@syncfusion/ej2-navigations@20.4.43",
   "_inBundle": false,
-  "_integrity": "sha512-aqL/RI3bBPueDC7mWSyWeklsuP5bQwak+fzLnB4ZqGi/uLtJ6A98lICKz6vGjLlyU45CfvCwIOC9Uf7aTz68EA==",
+  "_integrity": "sha512-i+34uRyNysO690StEyuw9/rOtO+ZTePBjmZkoChF7+FhbQx4cE3c/0EPfBsVioKxkwS9iFd1hnJSLL3NpVCiZQ==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -38,8 +38,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.40.tgz",
-  "_shasum": "9b232a4a3f24893f4b6611b4a1927d2e72a9823b",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.43.tgz",
+  "_shasum": "a06a120de2a3bb809ab71836f16e3377c797d5ae",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -50,12 +50,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.42",
-    "@syncfusion/ej2-buttons": "~20.4.42",
-    "@syncfusion/ej2-data": "~20.4.42",
+    "@syncfusion/ej2-base": "~20.4.44",
+    "@syncfusion/ej2-buttons": "~20.4.44",
+    "@syncfusion/ej2-data": "~20.4.44",
     "@syncfusion/ej2-inputs": "~20.4.42",
     "@syncfusion/ej2-lists": "~20.4.42",
-    "@syncfusion/ej2-popups": "~20.4.42"
+    "@syncfusion/ej2-popups": "~20.4.44"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -160,6 +160,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.42",
+  "version": "20.4.44",
   "sideEffects": false
 }

package/src/common/menu-base.js

@@ -438,14 +438,6 @@ var MenuBase = /** @class */ (function (_super) {
                 if (fliIdx === (e.action === DOWNARROW ? cul.childElementCount : -1)) {
                     fliIdx = defaultIdx;
                 }
-                if (cul.children[fliIdx].classList.contains(HIDE)) {
-                    if (e.action === DOWNARROW && fliIdx === cul.childElementCount - 1) {
-                        fliIdx = defaultIdx;
-                    }
-                    else if (e.action === UPARROW && fliIdx === 0) {
-                        fliIdx = defaultIdx;
-                    }
-                }
             }
         }
         var cli = cul.children[fliIdx];
@@ -455,8 +447,15 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.isValidLI = function (cli, index, action) {
         var cul = this.getUlByNavIdx();
+        var defaultIdx = (action === DOWNARROW || action === HOME || action === TAB) ? 0 : cul.childElementCount - 1;
         if (cli.classList.contains(SEPARATOR) || cli.classList.contains(DISABLED) || cli.classList.contains(HIDE)) {
-            if ((action === DOWNARROW) || (action === RIGHTARROW)) {
+            if (action === DOWNARROW && index === cul.childElementCount - 1) {
+                index = defaultIdx;
+            }
+            else if (action === UPARROW && index === 0) {
+                index = defaultIdx;
+            }
+            else if ((action === DOWNARROW) || (action === RIGHTARROW)) {
                 index++;
             }
             else {
@@ -620,11 +619,15 @@ var MenuBase = /** @class */ (function (_super) {
                         closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
                         trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
                     }
+                    else if (trgtpopUp) {
+                        closedLi = trgtpopUp.querySelector('.e-menu-item.e-selected');
+                        trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
+                    }
                     var submenus = liElem_1 && liElem_1.querySelectorAll('.e-menu-item');
                     if (isOpen && _this.hamburgerMode && ulIndex && !(submenus.length)) {
                         _this.afterCloseMenu(e);
                     }
-                    else if (isOpen && !_this.hamburgerMode && _this.navIdx.length && closedLi && !trgtLi && _this.keyType !== 'left') {
+                    else if (isOpen && !_this.hamburgerMode && closedLi && !trgtLi && _this.keyType !== 'left' && (_this.navIdx.length || !_this.isMenu && _this.navIdx.length === 0)) {
                         var ele = (e && e.target.classList.contains('e-vscroll'))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
@@ -638,7 +641,7 @@ var MenuBase = /** @class */ (function (_super) {
                         }
                     }
                     else if (isOpen && !isIterated && !ulIndex && ((_this.hamburgerMode && _this.navIdx.length) ||
-                        _this.navIdx.length === 1)) {
+                        _this.navIdx.length === 1 && liElem_1 && trgtpopUp !== liElem_1.parentElement)) {
                         _this.closeMenu(null, e);
                     }
                     else if (isOpen && isNullOrUndefined(ulIndex) && _this.navIdx.length) {

package/src/tab/tab.d.ts

@@ -515,7 +515,6 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private removeActiveClass;
     private checkPopupOverflow;
     private popupHandler;
-    private updateOrientationAttribute;
     private setCloseButton;
     private prevCtnAnimation;
     private triggerPrevAnimation;

package/src/tab/tab.js

@@ -213,7 +213,6 @@ var Tab = /** @class */ (function (_super) {
      * @returns {void}
      */
     Tab.prototype.destroy = function () {
-        var _this = this;
         if (this.isReact || this.isAngular) {
             this.clearTemplate();
         }
@@ -222,9 +221,7 @@ var Tab = /** @class */ (function (_super) {
             this.tbObj = null;
         }
         this.unWireEvents();
-        ['role', 'aria-disabled', 'aria-activedescendant', 'tabindex', 'aria-orientation', 'aria-owns'].forEach(function (val) {
-            _this.element.removeAttribute(val);
-        });
+        this.element.removeAttribute('aria-disabled');
         this.expTemplateContent();
         if (!this.isTemplate) {
             while (this.element.firstElementChild) {
@@ -303,7 +300,7 @@ var Tab = /** @class */ (function (_super) {
         var css = (name === 'msie') ? 'e-ie' : (name === 'edge') ? 'e-edge' : (name === 'safari') ? 'e-safari' : '';
         setStyle(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
         this.setCssClass(this.element, this.cssClass, true);
-        attributes(this.element, { role: 'tablist', 'aria-disabled': 'false', 'aria-activedescendant': '', 'aria-owns': this.element.id + '_' + 'tab_header_items' });
+        attributes(this.element, { 'aria-disabled': 'false' });
         this.setCssClass(this.element, css, true);
         this.updatePopAnimationConfig();
     };
@@ -399,8 +396,7 @@ var Tab = /** @class */ (function (_super) {
                 hdrItems.forEach(function (item, index) {
                     _this.lastIndex = index;
                     var attr = {
-                        className: CLS_ITEM, id: CLS_ITEM + _this.tabId + '_' + index,
-                        attrs: { role: 'tab', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-selected': 'false' }
+                        className: CLS_ITEM, id: CLS_ITEM + _this.tabId + '_' + index
                     };
                     var txt = _this.createElement('span', {
                         className: CLS_TEXT, innerHTML: item, attrs: { 'role': 'presentation' }
@@ -408,7 +404,10 @@ var Tab = /** @class */ (function (_super) {
                     var cont = _this.createElement('div', {
                         className: CLS_TEXT_WRAP, innerHTML: txt + _this.btnCls.outerHTML
                     }).outerHTML;
-                    var wrap = _this.createElement('div', { className: CLS_WRAP, innerHTML: cont, attrs: { tabIndex: '-1' } });
+                    var wrap = _this.createElement('div', {
+                        className: CLS_WRAP, innerHTML: cont,
+                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index }
+                    });
                     tabItems_1.appendChild(_this.createElement('div', attr));
                     selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);
                 });
@@ -427,15 +426,13 @@ var Tab = /** @class */ (function (_super) {
         this.tbObj.isStringTemplate = true;
         this.tbObj.createElement = this.createElement;
         this.tbObj.appendTo(this.hdrEle);
-        attributes(this.hdrEle, { 'aria-label': 'tab-header' });
-        this.updateOrientationAttribute();
+        attributes(this.hdrEle, { role: 'tablist' });
         this.setCloseButton(this.showCloseButton);
         var toolbarHeader = this.tbObj.element.querySelector('.' + CLS_TB_ITEMS);
         if (!isNOU(toolbarHeader)) {
             if (isNOU(toolbarHeader.id) || toolbarHeader.id === '') {
                 toolbarHeader.id = this.element.id + '_' + 'tab_header_items';
             }
-            this.element.setAttribute('aria-owns', toolbarHeader.id);
         }
     };
     Tab.prototype.renderContent = function () {
@@ -531,7 +528,7 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
             var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false' };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -542,7 +539,7 @@ var Tab = /** @class */ (function (_super) {
                 _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
-                id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex, role: 'tab', 'aria-selected': 'false'
+                id: CLS_ITEM + _this.tabId + '_' + _this.lastIndex
             };
             var tItem = { htmlAttributes: attrObj, template: wrap };
             tItem.cssClass = ((item.cssClass !== undefined) ? item.cssClass : ' ') + ' ' + disabled + ' ' + hidden + ' '
@@ -571,6 +568,7 @@ var Tab = /** @class */ (function (_super) {
         if (tabHeader) {
             var tabItems = selectAll('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE, tabHeader);
             [].slice.call(tabItems).forEach(function (node) { return node.classList.remove(CLS_ACTIVE); });
+            [].slice.call(tabItems).forEach(function (node) { return node.firstElementChild.setAttribute('aria-selected', 'false'); });
         }
     };
     Tab.prototype.checkPopupOverflow = function (ele) {
@@ -613,9 +611,6 @@ var Tab = /** @class */ (function (_super) {
         }
         return selectAll('.' + CLS_TB_ITEM, this.tbItems).length - 1;
     };
-    Tab.prototype.updateOrientationAttribute = function () {
-        attributes(this.element, { 'aria-orientation': (this.isVertical() ? 'vertical' : 'horizontal') });
-    };
     Tab.prototype.setCloseButton = function (val) {
         var trg = select('.' + CLS_HEADER, this.element);
         if (val === true) {
@@ -922,7 +917,6 @@ var Tab = /** @class */ (function (_super) {
             }
         }
         this.addVerticalClass();
-        this.updateOrientationAttribute();
         this.setActiveBorder();
         this.focusItem();
     };
@@ -1108,20 +1102,18 @@ var Tab = /** @class */ (function (_super) {
         if (!this.isTemplate) {
             var prev = this.tbItem[this.prevIndex];
             if (!isNOU(prev)) {
-                prev.removeAttribute('aria-controls');
+                prev.firstElementChild.removeAttribute('aria-controls');
             }
-            attributes(trg, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
+            attributes(trg.firstElementChild, { 'aria-controls': CLS_CONTENT + this.tabId + '_' + value });
         }
         var id = trg.id;
         this.removeActiveClass();
         trg.classList.add(CLS_ACTIVE);
-        this.tbItem[this.prevIndex].setAttribute('aria-selected', 'false');
-        trg.setAttribute('aria-selected', 'true');
+        trg.firstElementChild.setAttribute('aria-selected', 'true');
         var no = Number(this.extIndex(id));
         if (isNOU(this.prevActiveEle)) {
             this.prevActiveEle = CLS_CONTENT + this.tabId + '_' + no;
         }
-        attributes(this.element, { 'aria-activedescendant': id });
         if (this.isTemplate) {
             if (select('.' + CLS_CONTENT, this.element).children.length > 0) {
                 var trg_1 = this.findEle(select('.' + CLS_CONTENT, this.element).children, CLS_CONTENT + this.tabId + '_' + no);
@@ -1796,7 +1788,7 @@ var Tab = /** @class */ (function (_super) {
                     (textValue_1.length === 0) && !isNOU(item.header) && isNOU(item.header.iconCss))) {
                     if (tabItems_2[place]) {
                         if (isNOU(item.id)) {
-                            item.id = TABITEMPREFIX + (lastEleIndex + place).toString();
+                            item.id = CLS_ITEM + _this.tabId + '_' + TABITEMPREFIX + (lastEleIndex + place).toString();
                         }
                         tabItems_2[place].htmlAttributes['data-id'] = item.id;
                     }
@@ -2229,7 +2221,7 @@ var Tab = /** @class */ (function (_super) {
                     }
                 }
                 var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
-                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex };
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true' };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -2280,11 +2272,7 @@ var Tab = /** @class */ (function (_super) {
             detach(element);
             detach(detachContent);
             var attr = {
-                className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE + ' ' + CLS_ACTIVE, id: CLS_ITEM + this.tabId + '_' + index,
-                attrs: {
-                    role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index,
-                    'aria-disabled': 'false', 'aria-selected': 'true'
-                }
+                className: CLS_TB_ITEM + ' ' + CLS_TEMPLATE + ' ' + CLS_ACTIVE, id: CLS_ITEM + this.tabId + '_' + index
             };
             var txtString = this.createElement('span', {
                 className: CLS_TEXT, innerHTML: header, attrs: { 'role': 'presentation' }
@@ -2294,7 +2282,8 @@ var Tab = /** @class */ (function (_super) {
             }).outerHTML;
             var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
             var wrap = this.createElement('div', {
-                className: CLS_WRAP, innerHTML: conte, attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex }
+                className: CLS_WRAP, innerHTML: conte,
+                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index, 'aria-selected': 'true' }
             });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);

package/src/treeview/treeview.js

@@ -1478,7 +1478,7 @@ var TreeView = /** @class */ (function (_super) {
         }
     };
     TreeView.prototype.clickHandler = function (event) {
-        var target = event.originalEvent.target;
+        var target = Browser.isDevice ? document.elementFromPoint(event.originalEvent.changedTouches[0].clientX, event.originalEvent.changedTouches[0].clientY) : event.originalEvent.target;
         EventHandler.remove(this.element, 'contextmenu', this.preventContextMenu);
         if (!target || this.dragStartAction) {
             return;