@syncfusion/ej2-navigations 22.2.11 → 23.1.36

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.2.11
+*  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.8",
+  "_id": "@syncfusion/ej2-navigations@22.21.0",
   "_inBundle": false,
-  "_integrity": "sha512-GfpbncyICmmctljscMk/6Ti1+OpGGuIFBxm0Ti012hR/YP8Q45c628+mdJbbeZR98iNiukE4SivYdYxdU8z63w==",
+  "_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.8.tgz",
-  "_shasum": "f56389920bf2f999ea4528232b989bc2fa0b21a0",
+  "_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.10",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-inputs": "~22.2.9",
-    "@syncfusion/ej2-lists": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11"
+    "@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.11",
+  "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.js

@@ -309,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.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) {

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';
@@ -318,6 +318,9 @@ var Tab = /** @class */ (function (_super) {
         this.initRender = false;
         if (this.isReact && this.portals && this.portals.length > 0) {
             this.renderReactTemplates(function () {
+                if (!isNOU(this.tbObj)) {
+                    this.tbObj.refreshOverflow();
+                }
                 this.refreshActiveBorder();
             });
         }
@@ -534,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 = {
@@ -695,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);
             }
@@ -710,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
             };
         }
@@ -718,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
             };
         }
@@ -828,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);
@@ -1179,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();
@@ -1630,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) {

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

@@ -1,4 +1,4 @@
-import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
+import { Component, EmitType, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Event, EventHandler, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { rippleEffect, Effect, Animation, AnimationOptions, RippleOptions, remove  } from '@syncfusion/ej2-base';import { Draggable, DragEventArgs, Droppable, DropEventArgs } from '@syncfusion/ej2-base';import { getElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, closest, matches, detach, select, selectAll, isVisible, append } from '@syncfusion/ej2-base';import { DataManager, Query } from '@syncfusion/ej2-data';import { isNullOrUndefined as isNOU, Touch, TapEventArgs, getValue, setValue, extend, merge, attributes } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions, AriaAttributesMapping, FieldsMapping } from '@syncfusion/ej2-lists';import { createCheckBox, rippleMouseHandler } from '@syncfusion/ej2-buttons';import { Input, InputObject } from '@syncfusion/ej2-inputs';import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
 import {ExpandOnSettings,SortOrder,FailureEventArgs,DataBoundEventArgs,DataSourceChangedEventArgs,DrawNodeEventArgs,NodeKeyPressEventArgs,NodeCheckEventArgs,NodeClickEventArgs,NodeExpandEventArgs,DragAndDropEventArgs,NodeEditEventArgs,NodeSelectEventArgs} from "./treeview";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/treeview/treeview.d.ts

@@ -325,7 +325,7 @@ export interface NodeData {
  * Interface for Failure event arguments
  */
 export interface FailureEventArgs {
-    /** Represents the Error object that contains information about the error that occurred. This property allows you to access details such as the error message, stack trace, error code, or any additional information associated with the error. */
+    /** Defines the error information. */
     error?: Error;
 }
 /**

package/src/treeview/treeview.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, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { Component, isUndefined, Browser, compile, isNullOrUndefined, SanitizeHtmlHelper, animationMode } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, ChildProperty, Complex } from '@syncfusion/ej2-base';
 import { Event, EventHandler, KeyboardEvents } from '@syncfusion/ej2-base';
 import { rippleEffect, Animation, remove } from '@syncfusion/ej2-base';
@@ -874,7 +874,7 @@ var TreeView = /** @class */ (function (_super) {
             }
         }
         var eNodes = selectAll('.' + EXPANDED, element);
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
         }
         if (!this.isInitalExpand) {
@@ -1383,7 +1383,7 @@ var TreeView = /** @class */ (function (_super) {
     TreeView.prototype.doExpandAction = function () {
         var _this = this;
         var eUids = this.expandedNodes;
-        if (!this.loadOnDemand) {
+        if (!this.loadOnDemand && this.fields.dataSource instanceof DataManager) {
             this.isInitalExpand = this.treeData.filter(function (e) { return e[_this.fields.expanded] == true; }).length > 0 ? true : this.isInitalExpand;
         }
         if (this.isInitalExpand && eUids.length > 0) {
@@ -1578,7 +1578,7 @@ var TreeView = /** @class */ (function (_super) {
                 if (this.isAnimate && !this.isRefreshed) {
                     this.aniObj.animate(ul_1, {
                         name: this.animation.expand.effect,
-                        duration: this.animation.expand.duration,
+                        duration: (this.animation.expand.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.expand.duration,
                         timingFunction: this.animation.expand.easing,
                         begin: function (args) {
                             liEle_1.style.overflow = 'hidden';
@@ -1680,7 +1680,7 @@ var TreeView = /** @class */ (function (_super) {
         if (this.isAnimate) {
             this.aniObj.animate(ul, {
                 name: this.animation.collapse.effect,
-                duration: this.animation.collapse.duration,
+                duration: (this.animation.collapse.duration === 0 && animationMode === 'Enable') ? 400 : this.animation.collapse.duration,
                 timingFunction: this.animation.collapse.easing,
                 begin: function (args) {
                     liEle.style.overflow = 'hidden';