@syncfusion/ej2-navigations 20.3.60 → 20.4.40

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.60
+*  version : 20.4.40
 *  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.3.58",
+  "_id": "@syncfusion/ej2-navigations@20.4.38",
   "_inBundle": false,
-  "_integrity": "sha512-6zlMWTfYP/IRcf1CK3sICjk6Zg+39jGz4+vSd5hve/o67YQJgmN6VjyuTJfJZkaiygoz2rbykc8ezItSGi8F7g==",
+  "_integrity": "sha512-hdhNtScx4b09fDOS/62jwi0AT09DS34cSCYSj37SYSv4BkwgRUS3SlAluqZn7FvEuCnW79+yomInD3ThxcKUhw==",
   "_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.3.58.tgz",
-  "_shasum": "7a99612f52201c19882ab87cd6c9764d2f3645e2",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.38.tgz",
+  "_shasum": "5b613ec9c84750d24aafe522ba9f815e5eceeadc",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -50,18 +50,18 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.56",
-    "@syncfusion/ej2-buttons": "~20.3.58",
-    "@syncfusion/ej2-data": "~20.3.60",
-    "@syncfusion/ej2-inputs": "~20.3.57",
-    "@syncfusion/ej2-lists": "~20.3.56",
-    "@syncfusion/ej2-popups": "~20.3.60"
+    "@syncfusion/ej2-base": "~20.4.40",
+    "@syncfusion/ej2-buttons": "~20.4.40",
+    "@syncfusion/ej2-data": "~20.4.40",
+    "@syncfusion/ej2-inputs": "~20.4.40",
+    "@syncfusion/ej2-lists": "~20.4.40",
+    "@syncfusion/ej2-popups": "~20.4.40"
   },
   "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",
   "devDependencies": {},
   "es2015": "./dist/es6/ej2-navigations.es5.js",
-  "homepage": "https://github.com/syncfusion/ej2-javascript-ui-controls#readme",
+  "homepage": "https://www.syncfusion.com/javascript-ui-controls",
   "keywords": [
     "ej2",
     "syncfusion",
@@ -160,6 +160,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.3.60",
+  "version": "20.4.40",
   "sideEffects": false
 }

package/src/accordion/accordion.js

@@ -348,7 +348,7 @@ var Accordion = /** @class */ (function (_super) {
         }
         else {
             for (var i = 0; i < len; i++) {
-                this.expandItem(true, this.initExpand[i]);
+                this.expandItem(true, this.initExpand[parseInt(i.toString(), 10)]);
             }
         }
         if (this.isReact) {
@@ -710,14 +710,15 @@ var Accordion = /** @class */ (function (_super) {
             if (this.isReact) {
                 this.renderReactTemplates();
             }
-            append(this.getItemTemplate()(this.dataSource[index], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
+            append(this.getItemTemplate()(this.dataSource[parseInt(index.toString(), 10)], this, 'itemTemplate', this.element.id + '_itemTemplate', false), ctn);
             itemcnt.appendChild(ctn);
         }
         else {
-            if (this.enableHtmlSanitizer && typeof (this.items[index].content)) {
-                this.items[index].content = SanitizeHtmlHelper.sanitize(this.items[index].content);
+            if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
+                this.items[parseInt(index.toString(), 10)].content =
+                    SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[index].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
         }
         return itemcnt;
     };
@@ -964,7 +965,7 @@ var Accordion = /** @class */ (function (_super) {
                     ele.appendChild(innerItemEle);
                 }
                 else {
-                    ele.insertBefore(innerItemEle, itemEle[itemIndex]);
+                    ele.insertBefore(innerItemEle, itemEle[parseInt(itemIndex.toString(), 10)]);
                 }
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
@@ -1000,7 +1001,7 @@ var Accordion = /** @class */ (function (_super) {
             this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
         }
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         var items = this.getItems();
         if (isNOU(ele)) {
             return;
@@ -1019,7 +1020,7 @@ var Accordion = /** @class */ (function (_super) {
      */
     Accordion.prototype.select = function (index) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele) || isNOU(select('.' + CLS_HEADER, ele))) {
             return;
         }
@@ -1035,7 +1036,7 @@ var Accordion = /** @class */ (function (_super) {
      */
     Accordion.prototype.hideItem = function (index, isHidden) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele)) {
             return;
         }
@@ -1059,7 +1060,7 @@ var Accordion = /** @class */ (function (_super) {
      */
     Accordion.prototype.enableItem = function (index, isEnable) {
         var itemEle = this.getItemElements();
-        var ele = itemEle[index];
+        var ele = itemEle[parseInt(index.toString(), 10)];
         if (isNOU(ele)) {
             return;
         }
@@ -1111,7 +1112,7 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
         else {
-            var ele = itemEle[index];
+            var ele = itemEle[parseInt(index.toString(), 10)];
             if (isNOU(ele) || !ele.classList.contains(CLS_SLCT) || (ele.classList.contains(CLS_ACTIVE) && isExpand)) {
                 return;
             }
@@ -1161,7 +1162,7 @@ var Accordion = /** @class */ (function (_super) {
             ctnElePos = this.element;
         }
         else {
-            ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM)[index];
+            ctnElePos = this.element.querySelectorAll('.' + CLS_ITEM)[parseInt(index.toString(), 10)];
         }
         this.templateEle.forEach(function (eleStr) {
             if (!isNOU(ctnElePos.querySelector(eleStr))) {
@@ -1172,7 +1173,7 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.updateItem = function (item, index) {
         if (!isNOU(item)) {
             var items = this.getItems();
-            var itemObj = items[index];
+            var itemObj = items[parseInt(index.toString(), 10)];
             items.splice(index, 1);
             this.restoreContent(index);
             detach(item);
@@ -1217,11 +1218,11 @@ var Accordion = /** @class */ (function (_super) {
                     if (!(newProp.items instanceof Array && oldProp.items instanceof Array)) {
                         var changedProp = Object.keys(newProp.items);
                         for (var j = 0; j < changedProp.length; j++) {
-                            var index = parseInt(Object.keys(newProp.items)[j], 10);
-                            var property = Object.keys(newProp.items[index])[0];
-                            var item = selectAll('.' + CLS_ITEM, this.element)[index];
-                            var oldVal = Object(oldProp.items[index])[property];
-                            var newVal = Object(newProp.items[index])[property];
+                            var index = parseInt(Object.keys(newProp.items)[parseInt(j.toString(), 10)], 10);
+                            var property = Object.keys(newProp.items[parseInt(index.toString(), 10)])[0];
+                            var item = selectAll('.' + CLS_ITEM, this.element)[parseInt(index.toString(), 10)];
+                            var oldVal = Object(oldProp.items[parseInt(index.toString(), 10)])["" + property];
+                            var newVal = Object(newProp.items[parseInt(index.toString(), 10)])["" + property];
                             var temp = property;
                             if (temp === 'header' || temp === 'iconCss' || temp === 'expanded' || ((temp === 'content') && (oldVal === ''))) {
                                 this.updateItem(item, index);
@@ -1235,7 +1236,7 @@ var Accordion = /** @class */ (function (_super) {
                                 }
                             }
                             if (property === 'visible' && !isNOU(item)) {
-                                if (Object(newProp.items[index])[property] === false) {
+                                if (Object(newProp.items[parseInt(index.toString(), 10)])["" + property] === false) {
                                     item.classList.add(CLS_ITEMHIDE);
                                 }
                                 else {

package/src/appbar/appbar-model.d.ts

@@ -8,21 +8,21 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface AppBarModel extends ComponentModel{
 
     /**
-     *  Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
-     *  * Regular
-     *  * Prominent
-     *  * Dense
+     * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     * * Regular
+     * * Prominent
+     * * Dense
      *
-     *  @default 'Regular'
+     * @default 'Regular'
      */
     mode?: AppBarMode;
 
     /**
-     *  Specifies the position of the AppBar. The possible values for this property are as follows:
-     *  * Top
-     *  * Bottom
+     * Specifies the position of the AppBar. The possible values for this property are as follows:
+     * * Top
+     * * Bottom
      *
-     *  @default 'Top'
+     * @default 'Top'
      */
     position?: AppBarPosition;
 
@@ -49,13 +49,13 @@ export interface AppBarModel extends ComponentModel{
     htmlAttributes?: Record<string, string>;
 
     /**
-     *  Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
-     *  * Light
-     *  * Dark
-     *  * Primary
-     *  * Inherit
+     * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     * * Light
+     * * Dark
+     * * Primary
+     * * Inherit
      *
-     *  @default 'Light'
+     * @default 'Light'
      */
     colorMode?: AppBarColor;
 

package/src/appbar/appbar.d.ts

@@ -31,20 +31,20 @@ export declare type AppBarColor = 'Light' | 'Dark' | 'Primary' | 'Inherit';
  */
 export declare class AppBar extends Component<HTMLElement> implements INotifyPropertyChanged {
     /**
-     *  Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
-     *  * Regular
-     *  * Prominent
-     *  * Dense
+     * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     * * Regular
+     * * Prominent
+     * * Dense
      *
-     *  @default 'Regular'
+     * @default 'Regular'
      */
     mode: AppBarMode;
     /**
-     *  Specifies the position of the AppBar. The possible values for this property are as follows:
-     *  * Top
-     *  * Bottom
+     * Specifies the position of the AppBar. The possible values for this property are as follows:
+     * * Top
+     * * Bottom
      *
-     *  @default 'Top'
+     * @default 'Top'
      */
     position: AppBarPosition;
     /**
@@ -67,13 +67,13 @@ export declare class AppBar extends Component<HTMLElement> implements INotifyPro
      */
     htmlAttributes: Record<string, string>;
     /**
-     *  Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
-     *  * Light
-     *  * Dark
-     *  * Primary
-     *  * Inherit
+     * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     * * Light
+     * * Dark
+     * * Primary
+     * * Inherit
      *
-     *  @default 'Light'
+     * @default 'Light'
      */
     colorMode: AppBarColor;
     /**

package/src/appbar/appbar.js

@@ -127,7 +127,7 @@ var AppBar = /** @class */ (function (_super) {
                             for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
                                 var key = keys_1[_b];
                                 if (key === 'class') {
-                                    removeClass([this.element], oldProp.htmlAttributes[key]);
+                                    removeClass([this.element], oldProp.htmlAttributes["" + key]);
                                 }
                                 else {
                                     this.element.removeAttribute(key);
@@ -157,10 +157,10 @@ var AppBar = /** @class */ (function (_super) {
         for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
             var key = keys_2[_i];
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute["" + key]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute["" + key]);
             }
         }
     };

package/src/breadcrumb/breadcrumb-model.d.ts

@@ -79,7 +79,7 @@ export interface BreadcrumbModel extends ComponentModel{
      * - Wrap: Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.
      * - Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
      * - None: Shows all the items on a single line.
-     * 
+     *
      * @default 'Menu'
      */
     overflowMode?: BreadcrumbOverflowMode;

package/src/breadcrumb/breadcrumb.js

@@ -231,11 +231,13 @@ var Breadcrumb = /** @class */ (function (_super) {
                     }
                     if (args.curData.isEmptyUrl) {
                         args.item.children[0].removeAttribute('href');
-                        if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !(eventArgs.item.disabled || _this.disabled)) {
+                        if ((!isLastItem || (isLastItem && _this.enableActiveItemNavigation)) && !(eventArgs.item.disabled
+                            || _this.disabled)) {
                             args.item.children[0].setAttribute(TABINDEX, '0');
                             EventHandler.add(args.item.children[0], 'keydown', _this.keyDownHandler, _this);
                         }
                     }
+                    args.item.removeAttribute('role');
                     if (isLastItem) {
                         args.item.setAttribute('data-active-item', '');
                     }
@@ -245,7 +247,8 @@ var Breadcrumb = /** @class */ (function (_super) {
                 }
             };
             for (var i = 0; i < len; (i % 2 && j_1++), i++) {
-                isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url || this.activeItem === items[j_1].text));
+                isActiveItem = (this.activeItem && (this.activeItem === items[j_1].url ||
+                    this.activeItem === items[j_1].text));
                 if (isCollasped && i > 1 && i < len - 2) {
                     continue;
                 }
@@ -271,7 +274,8 @@ var Breadcrumb = /** @class */ (function (_super) {
                     else {
                         isSingleLevel = true;
                     }
-                    item = [extend({}, items[j_1].properties ? items[j_1].properties
+                    item = [extend({}, items[j_1].properties ?
+                            items[j_1].properties
                             : items[j_1])];
                     if (!item[0].url && !this.itemTemplate) {
                         item = [extend({}, item[0], { isEmptyUrl: true, url: '#' })];
@@ -359,7 +363,8 @@ var Breadcrumb = /** @class */ (function (_super) {
             for (var i = 0; i < liElems.length - 2; i++) {
                 if (liWidth > width) {
                     maxItems = Math.ceil((i - 1) / 2) + ((this.overflowMode === 'Menu' && i <= 2) ? 0 : 1);
-                    if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems == -1)) || this.maxItems == -1) && this._maxItems != maxItems) {
+                    if (((this.maxItems > maxItems && !(this.maxItems > -1 && maxItems === -1)) ||
+                        this.maxItems === -1) && this._maxItems !== maxItems) {
                         this._maxItems = maxItems;
                         this.initPvtProps();
                         return this.reRenderItems();
@@ -402,7 +407,7 @@ var Breadcrumb = /** @class */ (function (_super) {
     };
     Breadcrumb.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i]["" + field]) {
                 return true;
             }
         }

package/src/carousel/carousel.js

@@ -557,15 +557,15 @@ var Carousel = /** @class */ (function (_super) {
         if (isNullOrUndefined(activeSlide) && this.showIndicators) {
             var activeIndicator = this.element.querySelector("." + CLS_INDICATOR_BAR + "." + CLS_ACTIVE);
             var activeIndex_1 = parseInt(activeIndicator.dataset.index, 10);
-            addClass([allSlides[activeIndex_1]], CLS_ACTIVE);
+            addClass([allSlides[parseInt(activeIndex_1.toString(), 10)]], CLS_ACTIVE);
             return;
         }
         else if (isNullOrUndefined(activeSlide)) {
-            addClass([allSlides[currentIndex]], CLS_ACTIVE);
+            addClass([allSlides[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE);
             return;
         }
         var activeIndex = parseInt(activeSlide.dataset.index, 10);
-        var currentSlide = allSlides[currentIndex];
+        var currentSlide = allSlides[parseInt(currentIndex.toString(), 10)];
         var eventArgs = {
             currentIndex: activeIndex,
             nextIndex: currentIndex,
@@ -584,10 +584,10 @@ var Carousel = /** @class */ (function (_super) {
             attributes(args.nextSlide, { 'aria-hidden': 'false' });
             var slideIndicators = [].slice.call(_this.element.querySelectorAll("." + CLS_INDICATOR_BAR));
             if (slideIndicators.length > 0) {
-                attributes(slideIndicators[activeIndex], { 'aria-current': 'false' });
-                attributes(slideIndicators[currentIndex], { 'aria-current': 'true' });
+                attributes(slideIndicators[parseInt(activeIndex.toString(), 10)], { 'aria-current': 'false' });
+                attributes(slideIndicators[parseInt(currentIndex.toString(), 10)], { 'aria-current': 'true' });
                 removeClass(slideIndicators, CLS_ACTIVE);
-                addClass([slideIndicators[currentIndex]], CLS_ACTIVE);
+                addClass([slideIndicators[parseInt(currentIndex.toString(), 10)]], CLS_ACTIVE);
             }
             _this.slideChangedEventArgs = {
                 currentIndex: args.nextIndex,
@@ -599,7 +599,7 @@ var Carousel = /** @class */ (function (_super) {
             };
             if (_this.partialVisible) {
                 var container = _this.element.querySelector('.' + CLS_ITEMS);
-                var slideWidth = allSlides[currentIndex].clientWidth;
+                var slideWidth = allSlides[parseInt(currentIndex.toString(), 10)].clientWidth;
                 container.style.transitionProperty = 'transform';
                 if (_this.loop) {
                     if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
@@ -673,10 +673,10 @@ var Carousel = /** @class */ (function (_super) {
         for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
             var key = keys_1[_i];
             if (key === 'class') {
-                addClass([element], attribute[key]);
+                addClass([element], attribute["" + key]);
             }
             else {
-                element.setAttribute(key, attribute[key]);
+                element.setAttribute(key, attribute["" + key]);
             }
         }
     };
@@ -791,7 +791,7 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.swipeHandler = function (e) {
-        if (this.element.classList.contains(CLS_HOVER)) {
+        if (this.element.classList.contains(CLS_HOVER) || isNullOrUndefined(this.slideItems) || this.slideItems.length <= 1) {
             return;
         }
         var direction = (e.swipeDirection === 'Right') ? 'Previous' : 'Next';

package/src/common/menu-base.js

@@ -220,6 +220,7 @@ var MenuBase = /** @class */ (function (_super) {
         this.wireEvents();
         this.renderComplete();
         var wrapper = this.getWrapper();
+        // eslint-disable-next-line
         if (this.template && this.enableScrolling && (this.isReact || this.isAngular)) {
             requestAnimationFrame(function () {
                 addScrolling(_this.createElement, wrapper, _this.element, 'hscroll', _this.enableRtl);
@@ -437,6 +438,14 @@ 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];
@@ -606,6 +615,7 @@ var MenuBase = /** @class */ (function (_super) {
                         _this.isCMenu = false;
                     }
                     if (_this.isMenu && trgtpopUp && popupId.length) {
+                        // eslint-disable-next-line
                         trgtliId = new RegExp('(.*)-ej2menu-' + _this.element.id + '-popup').exec(popupId)[1];
                         closedLi = trgtpopUp.querySelector('[id="' + trgtliId + '"]');
                         trgtLi = (liElem_1 && trgtpopUp.querySelector('[id="' + liElem_1.id + '"]'));
@@ -614,7 +624,7 @@ var MenuBase = /** @class */ (function (_super) {
                     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 && _this.navIdx.length && closedLi && !trgtLi && _this.keyType !== 'left') {
                         var ele = (e && e.target.classList.contains('e-vscroll'))
                             ? closest(e.target, '.e-menu-wrapper') : null;
                         if (ele) {
@@ -655,7 +665,7 @@ var MenuBase = /** @class */ (function (_super) {
                             if (sli_1) {
                                 sli_1.setAttribute('aria-expanded', 'false');
                                 sli_1.classList.remove(SELECTED);
-                                if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === "left") {
+                                if (observedCloseArgs.isFocused && liElem_1 || _this.keyType === 'left') {
                                     sli_1.classList.add(FOCUSED);
                                     sli_1.focus();
                                 }
@@ -928,6 +938,7 @@ var MenuBase = /** @class */ (function (_super) {
                                 _this.isNestedOrVertical ? _this.left - _this.popupWrapper.offsetWidth - _this.lItem.parentElement.offsetWidth + 2
                                     : _this.left - _this.popupWrapper.offsetWidth + _this.lItem.offsetWidth;
                         }
+                        // eslint-disable-next-line
                         if (_this.template && (_this.isReact || _this.isAngular)) {
                             requestAnimationFrame(function () {
                                 _this.collision();
@@ -1159,7 +1170,7 @@ var MenuBase = /** @class */ (function (_super) {
             itemCreated: function (args) {
                 if (args.curData[_this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.removeAttribute('role');
+                    args.item.setAttribute('role', 'separator');
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[_this.getField('separator', level)]) {
@@ -1171,9 +1182,6 @@ var MenuBase = /** @class */ (function (_super) {
                     args.item.appendChild(span);
                     args.item.setAttribute('aria-haspopup', 'true');
                     args.item.setAttribute('aria-expanded', 'false');
-                    if (!_this.isMenu) {
-                        args.item.removeAttribute('role');
-                    }
                     args.item.classList.add('e-menu-caret-icon');
                 }
                 if (_this.isMenu && _this.template) {
@@ -1185,6 +1193,7 @@ var MenuBase = /** @class */ (function (_super) {
                     if (args.item.classList.contains('e-has-child')) {
                         args.item.classList.remove('e-has-child');
                     }
+                    args.item.removeAttribute('aria-level');
                 }
                 var eventArgs = { item: args.curData, element: args.item };
                 _this.trigger('beforeItemRender', eventArgs);
@@ -1196,9 +1205,7 @@ var MenuBase = /** @class */ (function (_super) {
         }
         var ul = ListBase.createList(this.createElement, items, listBaseOptions, !this.template, this);
         ul.setAttribute('tabindex', '0');
-        if (this.isMenu) {
-            ul.setAttribute('role', 'menu');
-        }
+        this.isMenu ? ul.setAttribute('role', 'menu') : ul.setAttribute('role', 'menubar');
         return ul;
     };
     MenuBase.prototype.moverHandler = function (e) {
@@ -1284,7 +1291,7 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.getField = function (propName, level) {
         if (level === void 0) { level = 0; }
-        var fieldName = this.fields[propName];
+        var fieldName = this.fields["" + propName];
         return typeof fieldName === 'string' ? fieldName :
             (!fieldName[level] ? fieldName[fieldName.length - 1].toString()
                 : fieldName[level].toString());
@@ -1302,7 +1309,7 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.hasField = function (items, field) {
         for (var i = 0, len = items.length; i < len; i++) {
-            if (items[i][field]) {
+            if (items[i]["" + field]) {
                 return true;
             }
         }
@@ -1843,7 +1850,7 @@ var MenuBase = /** @class */ (function (_super) {
             else {
                 var ele = this.getWrapper().children[this.getIdx(this.getWrapper(), ul) - 1];
                 if (this.currentTarget) {
-                    if (!(this.currentTarget.classList.contains("e-numerictextbox") || this.currentTarget.classList.contains("e-textbox") || this.currentTarget.tagName === 'INPUT')) {
+                    if (!(this.currentTarget.classList.contains('e-numerictextbox') || this.currentTarget.classList.contains('e-textbox') || this.currentTarget.tagName === 'INPUT')) {
                         if (ele) {
                             ele.querySelector('.' + SELECTED).focus();
                         }

package/src/menu/menu.js

@@ -219,8 +219,8 @@ var Menu = /** @class */ (function (_super) {
         var i;
         var items = this.items;
         var pIdField = this.getField('parentId');
-        if (item[pIdField]) {
-            idx = this.getIndex(item[pIdField].toString(), true);
+        if (item["" + pIdField]) {
+            idx = this.getIndex(item["" + pIdField].toString(), true);
             for (i = 0; i < idx.length; i++) {
                 if (!items[idx[i]].items) {
                     items[idx[i]].items = [];

package/src/sidebar/sidebar.d.ts

@@ -200,6 +200,7 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
      * @event
      */
     destroyed: EmitType<Object>;
+    defaultBackdropDiv: any;
     constructor(options?: SidebarModel, element?: string | HTMLElement);
     protected preRender(): void;
     protected render(): void;

package/src/sidebar/sidebar.js

@@ -199,7 +199,7 @@ var Sidebar = /** @class */ (function (_super) {
     Sidebar.prototype.destroyBackDrop = function () {
         var sibling = document.querySelector('.e-main-content') || this.targetEle;
         if (this.target && this.showBackdrop && sibling) {
-            removeClass([sibling], CONTEXTBACKDROP);
+            removeClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
         }
         else if (this.showBackdrop && this.modal) {
             this.modal.style.display = 'none';
@@ -337,8 +337,12 @@ var Sidebar = /** @class */ (function (_super) {
     };
     Sidebar.prototype.createBackDrop = function () {
         if (this.target && this.showBackdrop && this.getState()) {
+            var targetString = this.target;
             var sibling = document.querySelector('.e-main-content') || this.targetEle;
-            addClass([sibling], CONTEXTBACKDROP);
+            this.defaultBackdropDiv = this.createElement('div');
+            addClass([this.defaultBackdropDiv], DEFAULTBACKDROP);
+            setStyle(this.defaultBackdropDiv, { height: targetString.style.height });
+            sibling.appendChild(this.defaultBackdropDiv);
         }
         else if (this.showBackdrop && !this.modal && this.getState()) {
             this.modal = this.createElement('div');

package/src/tab/tab-model.d.ts

@@ -139,6 +139,15 @@ export interface TabItemModel {
      */
     id?: string;
 
+    /**
+     * Specifies the tab order of the Tabs items. When positive values assigned, it allows to switch focus to the next/previous tabs items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tabs items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex?: number
+
 }
 
 /**

package/src/tab/tab.d.ts

@@ -195,6 +195,14 @@ export declare class TabItem extends ChildProperty<TabItem> {
      * @default null
      */
     id: string;
+    /**
+     * Specifies the tab order of the Tabs items. When positive values assigned, it allows to switch focus to the next/previous tabs items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tabs items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex: number;
 }
 /**
  * Tab is a content panel to show multiple contents in a single space, one at a time.
@@ -547,6 +555,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private spaceKeyDown;
     private keyHandler;
     private refreshItemVisibility;
+    private getIndexFromEle;
     private hoverHandler;
     private evalOnPropertyChangeItems;
     private initializeDrag;