@syncfusion/ej2-navigations 22.2.8 → 23.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.8
+*  version : 23.1.36
 *  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@22.2.7",
+  "_id": "@syncfusion/ej2-navigations@22.21.0",
   "_inBundle": false,
-  "_integrity": "sha512-7Uz9JOqY5jJxwhyzEm/75NlZPwU2FSgHGayMBKK7HD/fi4Xs7JZUrC51E6un9JZk8/QGRgqVtf5zSgLbBHAYHA==",
+  "_integrity": "sha512-ZFdWxo2R4Yqc8cQ36lXQgviT1E4xlJPtFDNf0J277vGN2vxxLcLbTe7wgr2wrFrX9R+QOixiN2gZbAFVWo8m7w==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,10 +39,10 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-22.2.7.tgz",
-  "_shasum": "5fcaed69c7a93538c2bb9312dde3fe7375060919",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-22.21.0.tgz",
+  "_shasum": "cf737ced5f81c1a3735e20e4a743a48dc093b8a2",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.5",
-    "@syncfusion/ej2-buttons": "~22.2.8",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-inputs": "~22.2.7",
-    "@syncfusion/ej2-lists": "~22.2.8",
-    "@syncfusion/ej2-popups": "~22.2.7"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-data": "~23.1.36",
+    "@syncfusion/ej2-inputs": "~23.1.36",
+    "@syncfusion/ej2-lists": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.36"
   },
   "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",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.2.8",
+  "version": "23.1.36",
   "sideEffects": false
 }

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

@@ -1,4 +1,4 @@
-import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, EmitType, AnimationModel, KeyboardEvents, rippleEffect, animationMode } from '@syncfusion/ej2-base';import { KeyboardEventArgs, BaseEventArgs, Effect, getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, selectAll, SanitizeHtmlHelper, isRippleEnabled } from '@syncfusion/ej2-base';
 import {ExpandMode,AccordionClickArgs,ExpandEventArgs,ExpandedEventArgs} from "./accordion";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/accordion/accordion.d.ts

@@ -197,6 +197,8 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private isDestroy;
     private templateEle;
     private isAngular;
+    private isReact;
+    private isVue;
     private headerTemplateFn;
     private itemTemplateFn;
     private removeRippleEffect;
@@ -340,7 +342,7 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private initialize;
     private renderControl;
     private wireFocusEvents;
-    private unwireEvents;
+    private unWireEvents;
     private wireEvents;
     private templateParser;
     private initializeHeaderTemplate;
@@ -437,7 +439,6 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     private restoreContent;
     private updateItem;
     private setTemplate;
-    private templateCompile;
     private clearAccordionTemplate;
     protected getPersistData(): string;
     /**

package/src/accordion/accordion.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect } from '@syncfusion/ej2-base';
+import { Component, EventHandler, Property, Event, KeyboardEvents, rippleEffect, animationMode } from '@syncfusion/ej2-base';
 import { getUniqueID, compile as templateCompiler } from '@syncfusion/ej2-base';
 import { isVisible, closest, attributes, detach, select, addClass, removeClass, append } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, Collection, Animation } from '@syncfusion/ej2-base';
@@ -164,7 +164,7 @@ var Accordion = /** @class */ (function (_super) {
         }
         var ele = this.element;
         _super.prototype.destroy.call(this);
-        this.unwireEvents();
+        this.unWireEvents();
         this.isDestroy = true;
         this.restoreContent(null);
         [].slice.call(ele.children).forEach(function (el) {
@@ -252,7 +252,7 @@ var Accordion = /** @class */ (function (_super) {
             }
         }
     };
-    Accordion.prototype.unwireEvents = function () {
+    Accordion.prototype.unWireEvents = function () {
         EventHandler.remove(this.element, 'click', this.clickHandler);
         if (!isNOU(this.keyModule)) {
             this.keyModule.destroy();
@@ -571,7 +571,7 @@ var Accordion = /** @class */ (function (_super) {
             var ctnEle = this.headerEleGenerate();
             var hdrEle = this.createElement('div', { className: CLS_HEADERCTN });
             ctnEle.appendChild(hdrEle);
-            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index, true));
+            ctnEle.appendChild(this.fetchElement(hdrEle, item.header, index));
             innerEle.appendChild(ctnEle);
         }
         var hdr = select('.' + CLS_HEADER, innerEle);
@@ -633,8 +633,7 @@ var Accordion = /** @class */ (function (_super) {
             return true;
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.fetchElement = function (ele, value, index, isHeader) {
+    Accordion.prototype.fetchElement = function (ele, value, index) {
         var templateFn;
         var temString;
         try {
@@ -718,7 +717,7 @@ var Accordion = /** @class */ (function (_super) {
                 this.items[parseInt(index.toString(), 10)].content =
                     SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index, false));
+            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
         }
         return itemcnt;
     };
@@ -752,7 +751,7 @@ var Accordion = /** @class */ (function (_super) {
                     expandState.classList.remove(CLS_EXPANDSTATE);
                 }
                 trgtItemEle.classList.add(CLS_EXPANDSTATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.expandProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.expandProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -764,6 +763,10 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.expandAnimation = function (ef, icn, trgt, trgtItemEle, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideDown';
+            animate.name = 'SlideDown';
+        }
         var height;
         this.lastActiveItemId = trgtItemEle.id;
         if (ef === 'SlideDown') {
@@ -858,7 +861,7 @@ var Accordion = /** @class */ (function (_super) {
                 _this.expandedItemsPop(trgtItemEle);
                 trgtItemEle.classList.remove(CLS_EXPANDSTATE);
                 icon.classList.add(CLS_TOGANIMATE);
-                if ((animation.name === 'None')) {
+                if ((animation.name === 'None' && animationMode !== 'Enable') || (animationMode === 'Disable')) {
                     _this.collapseProgress('begin', icon, trgt, trgtItemEle, expandArgs);
                     _this.collapseProgress('end', icon, trgt, trgtItemEle, expandArgs);
                 }
@@ -870,6 +873,10 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.collapseAnimation = function (ef, trgt, trgtItEl, icn, animate, args) {
         var _this = this;
+        if (ef === 'None' && animationMode === 'Enable') {
+            ef = 'SlideUp';
+            animate.name = 'SlideUp';
+        }
         var height;
         var trgtHeight;
         var itemHeight;
@@ -970,7 +977,7 @@ var Accordion = /** @class */ (function (_super) {
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'focus', _this.focusIn, _this);
                 EventHandler.add(innerItemEle.querySelector('.' + CLS_HEADER), 'blur', _this.focusOut, _this);
                 _this.expandedIndices = [];
-                _this.expandedItemRefresh(ele);
+                _this.expandedItemRefresh();
                 if (addItem && addItem.expanded) {
                     _this.expandItem(true, itemIndex);
                 }
@@ -980,8 +987,7 @@ var Accordion = /** @class */ (function (_super) {
             this.renderReactTemplates();
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Accordion.prototype.expandedItemRefresh = function (ele) {
+    Accordion.prototype.expandedItemRefresh = function () {
         var _this = this;
         var itemEle = this.getItemElements();
         [].slice.call(itemEle).forEach(function (el) {
@@ -997,8 +1003,12 @@ var Accordion = /** @class */ (function (_super) {
      * @returns {void}.
      */
     Accordion.prototype.removeItem = function (index) {
-        if (this.isReact) {
-            this.clearTemplate(['headerTemplate', 'itemTemplate'], index);
+        if (this.isReact || this.isAngular) {
+            var item = selectAll('.' + CLS_ITEM, this.element)[parseInt(index.toString(), 10)];
+            var header = select('.' + CLS_HEADERCTN, item);
+            var content = select('.' + CLS_CTENT, item);
+            this.clearAccordionTemplate(header, this.dataSource.length > 0 ? 'headerTemplate' : 'header', CLS_HEADERCTN);
+            this.clearAccordionTemplate(content, this.dataSource.length > 0 ? 'itemTemplate' : 'content', CLS_CTENT);
         }
         var itemEle = this.getItemElements();
         var ele = itemEle[parseInt(index.toString(), 10)];
@@ -1010,7 +1020,7 @@ var Accordion = /** @class */ (function (_super) {
         detach(ele);
         items.splice(index, 1);
         this.expandedIndices = [];
-        this.expandedItemRefresh(this.element);
+        this.expandedItemRefresh();
     };
     /**
      * Sets focus to the specified index item header in Accordion.
@@ -1187,28 +1197,18 @@ var Accordion = /** @class */ (function (_super) {
         }
     };
     Accordion.prototype.setTemplate = function (template, toElement, index) {
-        toElement.innerHTML = '';
-        this.templateCompile(toElement, template, index);
+        this.fetchElement(toElement, template, index);
         if (this.isReact) {
             this.renderReactTemplates();
         }
     };
-    Accordion.prototype.templateCompile = function (ele, cnt, index) {
-        var tempEle = this.createElement('div');
-        this.fetchElement(tempEle, cnt, index, false);
-        if (tempEle.childNodes.length !== 0) {
-            [].slice.call(tempEle.childNodes).forEach(function (childEle) {
-                ele.appendChild(childEle);
-            });
-        }
-    };
     Accordion.prototype.clearAccordionTemplate = function (templateEle, templateName, className) {
         if (this.registeredTemplate && this.registeredTemplate["" + templateName]) {
             var registeredTemplates = this.registeredTemplate;
             for (var index = 0; index < registeredTemplates["" + templateName].length; index++) {
                 var registeredItem = registeredTemplates["" + templateName][parseInt(index.toString(), 10)].rootNodes[0];
-                var closestItem = closest(registeredItem.containerInfo, '.' + className);
-                if (!isNOU(closestItem) && closestItem === templateEle) {
+                var closestItem = closest(registeredItem, '.' + className);
+                if (!isNOU(closestItem) && closestItem === templateEle || isNOU(registeredItem.parentNode)) {
                     this.clearTemplate([templateName], [registeredTemplates["" + templateName][parseInt(index.toString(), 10)]]);
                     break;
                 }
@@ -1278,7 +1278,8 @@ var Accordion = /** @class */ (function (_super) {
                                 if (property[parseInt(k.toString(), 10)] === 'disabled' && !isNOU(item)) {
                                     this.enableItem(index, !newVal);
                                 }
-                                if (property[parseInt(k.toString(), 10)] === 'content' && !isNOU(item) && item.children.length === 2) {
+                                if (property.indexOf('header') < 0 && property[parseInt(k.toString(), 10)] === 'content'
+                                    && !isNOU(item) && item.children.length === 2) {
                                     if (typeof newVal === 'function') {
                                         if (this.isAngular || this.isReact) {
                                             this.clearAccordionTemplate(content, property[parseInt(k.toString(), 10)], CLS_CTENT);

package/src/appbar/appbar.js

@@ -67,6 +67,7 @@ var AppBar = /** @class */ (function (_super) {
         // pre render code
     };
     AppBar.prototype.render = function () {
+        this.element.classList.add(CLS_APPBAR);
         if (this.element.tagName !== 'HEADER') {
             this.element.setAttribute('role', 'header');
         }

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

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass, detach, remove, initializeCSPTemplate, isNullOrUndefined } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';
 import {BreadcrumbOverflowMode,BreadcrumbBeforeItemRenderEventArgs,BreadcrumbClickEventArgs} from "./breadcrumb";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/breadcrumb/breadcrumb.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';
+import { Component, NotifyPropertyChanges, ChildProperty, Property, Collection, append, extend, Event, EventHandler, closest, addClass, removeClass, detach, remove, initializeCSPTemplate, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
 import { Popup } from '@syncfusion/ej2-popups';
 var ICONRIGHT = 'e-icon-right';
@@ -293,7 +293,14 @@ var Breadcrumb = /** @class */ (function (_super) {
                 if (i % 2) {
                     // separator item
                     wrapDiv = this.createElement('div', { className: 'e-breadcrumb-item-wrapper' });
-                    listBaseOptions.template = this.separatorTemplate ? this.separatorTemplate : '/';
+                    if ((this.separatorTemplate && this.separatorTemplate === '/') || isNullOrUndefined(this.separatorTemplate)) {
+                        listBaseOptions.template = initializeCSPTemplate(function () {
+                            return '/';
+                        });
+                    }
+                    else {
+                        listBaseOptions.template = this.separatorTemplate;
+                    }
                     listBaseOptions.itemClass = 'e-breadcrumb-separator';
                     isSingleLevel = false;
                     item = [{ previousItem: items[j_1], nextItem: items[j_1 + 1] }];
@@ -302,6 +309,7 @@ var Breadcrumb = /** @class */ (function (_super) {
                     // list item
                     listBaseOptions.itemClass = '';
                     if (this.itemTemplate) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         listBaseOptions.template = this.itemTemplate;
                         isSingleLevel = false;
                     }

package/src/carousel/carousel.d.ts

@@ -376,6 +376,7 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     private swipStop;
     private swipeNavigation;
     private swipeModehandlers;
+    private resizeHandler;
     private wireEvents;
     private unWireEvents;
     /**

package/src/carousel/carousel.js

@@ -297,6 +297,7 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.initialize = function () {
         var carouselClasses = [];
+        carouselClasses.push(CLS_CAROUSEL);
         if (this.cssClass) {
             carouselClasses.push(this.cssClass);
         }
@@ -311,7 +312,7 @@ var Carousel = /** @class */ (function (_super) {
         }
         addClass([this.element], carouselClasses);
         setStyleAttribute(this.element, { 'width': formatUnit(this.width), 'height': formatUnit(this.height) });
-        attributes(this.element, { 'tabindex': '0', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
+        attributes(this.element, { 'tabindex': '0', 'role': 'group', 'aria-roledescription': 'carousel', 'aria-label': this.localeObj.getConstant('slideShow') });
         if (!isNullOrUndefined(this.htmlAttributes)) {
             this.setHtmlAttributes(this.htmlAttributes, this.element);
         }
@@ -385,7 +386,7 @@ var Carousel = /** @class */ (function (_super) {
             className: CLS_ITEM + " " + (item.cssClass ? item.cssClass : '') + " " + (this.selectedIndex === index && !isClone ? CLS_ACTIVE : ''),
             attrs: {
                 'aria-hidden': this.selectedIndex === index && !isClone ? 'false' : 'true', 'data-index': index.toString(),
-                'aria-role': 'group', 'aria-roledescription': 'slide'
+                'role': 'group', 'aria-roledescription': 'slide'
             }
         });
         if (isClone) {
@@ -1092,6 +1093,13 @@ var Carousel = /** @class */ (function (_super) {
             EventHandler.add(this.itemsContainer, 'mouseup touchend', this.swipStop, this);
         }
     };
+    Carousel.prototype.resizeHandler = function () {
+        if (this.itemsContainer && this.itemsContainer.firstElementChild) {
+            var numOfItems = this.getNumOfItems();
+            var slideWidth = this.itemsContainer.firstElementChild.clientWidth;
+            this.itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + numOfItems);
+        }
+    };
     Carousel.prototype.wireEvents = function () {
         if (!(this.animationEffect === 'Custom')) {
             this.swipeModehandlers();
@@ -1100,6 +1108,7 @@ var Carousel = /** @class */ (function (_super) {
         EventHandler.add(this.element, 'mouseenter mouseleave', this.onHoverActions, this);
         EventHandler.add(this.element.firstElementChild, 'animationend', this.onTransitionEnd, this);
         EventHandler.add(this.element.firstElementChild, 'transitionend', this.onTransitionEnd, this);
+        EventHandler.add(window, 'resize', this.resizeHandler, this);
     };
     Carousel.prototype.unWireEvents = function () {
         var _this = this;
@@ -1119,6 +1128,7 @@ var Carousel = /** @class */ (function (_super) {
         EventHandler.remove(this.element.firstElementChild, 'transitionend', this.onTransitionEnd);
         EventHandler.clearEvents(this.element);
         EventHandler.clearEvents(this.itemsContainer);
+        EventHandler.remove(window, 'resize', this.resizeHandler);
     };
     /**
      * Method to transit from the current slide to the previous slide.

package/src/common/menu-base.js

@@ -302,10 +302,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
                 }
             }
         }
@@ -483,7 +483,7 @@ var MenuBase = /** @class */ (function (_super) {
             var popups_1 = [];
             var allPopup = selectAll('.' + POPUP);
             allPopup.forEach(function (elem) {
-                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + "-" + elem.id.split('-')[3]) {
+                if (_this.element.id === elem.id.split('-')[2] || elem.id.split('-')[2] + '-' + elem.id.split('-')[3]) {
                     popups_1.push(elem);
                 }
             });
@@ -851,7 +851,7 @@ var MenuBase = /** @class */ (function (_super) {
             if (isNullOrUndefined(e)) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var ev = document.createEvent('MouseEvents');
-                ev.initEvent("click", true, false);
+                ev.initEvent('click', true, false);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 var targetEvent = this.copyObject(ev, {});
                 targetEvent.target = targetEvent.srcElement = target;
@@ -864,6 +864,7 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     MenuBase.prototype.copyObject = function (source, destination) {
         for (var prop in source) {
             destination["" + prop] = source["" + prop];
@@ -1831,10 +1832,10 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
                 }
             }
         }

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

@@ -1,4 +1,4 @@
-import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex, getUniqueID, SanitizeHtmlHelper, compile  } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
+import { attributes, NotifyPropertyChanges, INotifyPropertyChanged, Property } from '@syncfusion/ej2-base';import { Browser, Complex, getUniqueID, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { MenuBase, FieldSettings } from '../common/menu-base';import { MenuItemModel, FieldSettingsModel } from '../common/menu-base-model';
 import {Orientation} from "./menu";
 import {MenuBaseModel} from "../common/menu-base-model";
 

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { getRandomId, SanitizeHtmlHelper, Draggable, DragEventArgs as DragArgs, DropEventArgs } from '@syncfusion/ej2-base';import { Base } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
 import {HeaderPosition,HeightStyles,ContentLoad,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs,DragEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -304,13 +304,15 @@ export interface TabModel extends ComponentModel{
 
     /**
      * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
-     * for the draggable element movement. By default, the draggable element movement occurs in the toolbar. 
+     * for the draggable element movement. By default, the draggable element movement occurs in the toolbar.
+     * 
      * @default null
      */
     dragArea?: string;
 
     /**
      * Sets true to allow drag and drop the Tab items
+     * 
      * @default false
      */
     allowDragAndDrop?: boolean;

package/src/tab/tab.d.ts

@@ -289,6 +289,9 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private draggingItems;
     private draggableItems;
     private tbId;
+    private isAngular;
+    private isReact;
+    private isVue;
     private resizeContext;
     /**
      * Contains the keyboard configuration of the Tab.
@@ -422,11 +425,13 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
      * for the draggable element movement. By default, the draggable element movement occurs in the toolbar.
+     *
      * @default null
      */
     dragArea: string;
     /**
      * Sets true to allow drag and drop the Tab items
+     *
      * @default false
      */
     allowDragAndDrop: boolean;

package/src/tab/tab.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Component, Property, Event, closest, Collection, Complex, attributes, detach, isNullOrUndefined, animationMode } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, ChildProperty, select, isVisible } from '@syncfusion/ej2-base';
 import { KeyboardEvents, Browser, formatUnit, L10n } from '@syncfusion/ej2-base';
 import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';
@@ -316,6 +316,14 @@ var Tab = /** @class */ (function (_super) {
         this.renderContainer();
         this.wireEvents();
         this.initRender = false;
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                if (!isNOU(this.tbObj)) {
+                    this.tbObj.refreshOverflow();
+                }
+                this.refreshActiveBorder();
+            });
+        }
     };
     Tab.prototype.renderContainer = function () {
         var ele = this.element;
@@ -529,10 +537,7 @@ var Tab = /** @class */ (function (_super) {
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
-            if (_this.itemIndexArray === []) {
-                _this.itemIndexArray.push(CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
-            }
-            else {
+            if (_this.itemIndexArray instanceof Array) {
                 _this.itemIndexArray.splice((index + i), 0, CLS_ITEM + _this.tabId + '_' + _this.lastIndex);
             }
             var attrObj = {
@@ -690,10 +695,9 @@ var Tab = /** @class */ (function (_super) {
         if (!isNOU(newCnt)) {
             this.prevActiveEle = newCnt.id;
         }
-        var isPrevent = isNOU(this.animation) || this.animation.next === {} || this.animation.previous === {}
-            || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
-            || this.animation.previous.effect == 'None' || this.animation.next.effect == 'None';
-        if (this.initRender || value === false || this.animation === {} || isPrevent) {
+        var isPrevent = isNOU(this.animation) || isNOU(this.animation.next.effect) || isNOU(this.animation.previous.effect)
+            || this.animation.previous.effect === 'None' || this.animation.next.effect === 'None';
+        if (this.initRender || value === false || isPrevent) {
             if (oldCnt && oldCnt !== newCnt) {
                 oldCnt.classList.remove(CLS_ACTIVE);
             }
@@ -705,7 +709,7 @@ var Tab = /** @class */ (function (_super) {
             var openEff = this.animation.previous.effect;
             animateObj = {
                 name: ((openEff === 'None') ? '' : ((openEff !== 'SlideLeftIn') ? openEff : 'SlideLeftIn')),
-                duration: this.animation.previous.duration,
+                duration: (this.animation.previous.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.previous.duration,
                 timingFunction: this.animation.previous.easing
             };
         }
@@ -713,7 +717,7 @@ var Tab = /** @class */ (function (_super) {
             var clsEff = this.animation.next.effect;
             animateObj = {
                 name: ((clsEff === 'None') ? '' : ((clsEff !== 'SlideRightIn') ? clsEff : 'SlideRightIn')),
-                duration: this.animation.next.duration,
+                duration: (this.animation.next.duration === 0 && animationMode === 'Enable') ? 600 : this.animation.next.duration,
                 timingFunction: this.animation.next.easing
             };
         }
@@ -823,7 +827,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.getContent = function (ele, cnt, callType, index) {
         var eleStr;
-        cnt = isNOU(cnt) ? "" : cnt;
+        cnt = isNOU(cnt) ? '' : cnt;
         if (typeof cnt === 'string' || isNOU(cnt.innerHTML)) {
             if (typeof cnt === 'string' && this.enableHtmlSanitizer) {
                 cnt = SanitizeHtmlHelper.sanitize(cnt);
@@ -1174,7 +1178,7 @@ var Tab = /** @class */ (function (_super) {
     };
     Tab.prototype.showPopup = function (config) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
-        if (tbPop.classList.contains('e-popup-close')) {
+        if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
             tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
             tbPopObj.dataBind();
@@ -1625,8 +1629,8 @@ var Tab = /** @class */ (function (_super) {
             clonedElement: this.cloneElement,
             cancel: false
         };
-        this.trigger('onDragStart', dragArgs, function (tabitemDragArgs) {
-            if (tabitemDragArgs.cancel) {
+        this.trigger('onDragStart', dragArgs, function (tabItemDragArgs) {
+            if (tabItemDragArgs.cancel) {
                 var dragObj = e.element.ej2_instances[0];
                 if (!isNullOrUndefined(dragObj)) {
                     dragObj.intDestroy(e.event);

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

@@ -235,6 +235,8 @@ export interface ToolbarModel extends ComponentModel{
      * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
      * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
+     * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
+     * 
      * @default null
      */
     scrollStep?: number;

package/src/toolbar/toolbar.d.ts

@@ -304,6 +304,8 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
      * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
      * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
+     * {% codeBlock src='toolbar/scrollStep/index.md' %}{% endcodeBlock %}
+     *
      * @default null
      */
     scrollStep: number;

package/src/toolbar/toolbar.js

@@ -687,6 +687,11 @@ var Toolbar = /** @class */ (function (_super) {
         this.renderControl();
         this.wireEvents();
         this.renderComplete();
+        if (this.isReact && this.portals && this.portals.length > 0) {
+            this.renderReactTemplates(function () {
+                this.refreshOverflow();
+            });
+        }
     };
     Toolbar.prototype.initialize = function () {
         var width = formatUnit(this.width);
@@ -1863,7 +1868,7 @@ var Toolbar = /** @class */ (function (_super) {
             var tempArray = void 0;
             if (!isNOU(templateFn)) {
                 var toolbarTemplateID = this.element.id + index + '_template';
-                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate);
+                tempArray = templateFn({}, this, 'template', toolbarTemplateID, this.isStringTemplate, undefined, undefined, this.root);
             }
             if (!isNOU(tempArray) && tempArray.length > 0) {
                 [].slice.call(tempArray).forEach(function (ele) {