@syncfusion/ej2-navigations 27.2.5 → 28.1.35

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.5
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.35
+*  Copyright Syncfusion Inc. 2001 - 2024. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@27.2.4",
+  "_id": "@syncfusion/ej2-navigations@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-GCmn63RwpvF61RmqeTULfV1HbEhZyt2IsBLqJFPEz6Bgs9+1+5E8my38kvN78NaKQ+r0+lPh8CgD12Z8ezdF0g==",
+  "_integrity": "sha512-0OLo+b+tpp6pVC1e+OE3OcYMqxPCCG1JxTo35UipJ2I2/Fve/COtxBBPpyBLFsAmMHeHldqnsLcSo3X7Fo3mWg==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -40,10 +40,10 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-27.2.4.tgz",
-  "_shasum": "66244247af321344aaf7c9a31dcef43e1043e83c",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-28.1.33.tgz",
+  "_shasum": "12d9c190b00e66a4da177fff767f1d7e117474e9",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -52,12 +52,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.5",
-    "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-data": "~27.2.2",
-    "@syncfusion/ej2-inputs": "~27.2.4",
-    "@syncfusion/ej2-lists": "~27.2.5",
-    "@syncfusion/ej2-popups": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.33",
+    "@syncfusion/ej2-data": "~28.1.33",
+    "@syncfusion/ej2-inputs": "~28.1.33",
+    "@syncfusion/ej2-lists": "~28.1.33",
+    "@syncfusion/ej2-popups": "~28.1.33"
   },
   "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",
@@ -162,6 +162,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "27.2.5",
+  "version": "28.1.35",
   "sideEffects": false
 }

package/src/accordion/accordion.d.ts

@@ -18,6 +18,13 @@ export interface AccordionClickArgs extends BaseEventArgs {
      * Defines the current Event arguments.
      */
     originalEvent?: Event;
+    /**
+     * Defines whether to cancel the Accordion click action.
+     * When set to `true`, the default click behavior will be prevented,
+     * preventing any action associated with the Accordion item click (such as expanding or collapsing the item).
+     * When set to `false` or omitted, the default click behavior will proceed as normal.
+     */
+    cancel?: boolean;
 }
 /** An interface that holds options to control the expanding item action. */
 export interface ExpandEventArgs extends BaseEventArgs {

package/src/accordion/accordion.js

@@ -438,56 +438,60 @@ var Accordion = /** @class */ (function (_super) {
     Accordion.prototype.afterContentRender = function (trgt, eventArgs, acrdnItem, acrdnHdr, acrdnCtn, acrdnCtnItem) {
         var _this = this;
         var acrdActive = [];
-        this.trigger('clicked', eventArgs);
-        var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));
-        var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;
-        var inlineEleAcrdn = acrdnCtn && !isNOU(select('.' + CLS_ROOT, acrdnCtn)) && isNOU(closest(trgt, inlineAcrdnSel));
-        var nestContCheck = acrdnCtn && isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === this.element);
-        cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
-        trgt.classList.remove('e-target');
-        if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
-            return;
-        }
-        var acrdcontainer = this.element.querySelector('.' + CLS_CONTAINER);
-        var acrdnchild = (acrdcontainer) ? acrdcontainer.children : this.element.children;
-        [].slice.call(acrdnchild).forEach(function (el) {
-            if (el.classList.contains(CLS_ACTIVE)) {
-                acrdActive.push(el);
-            }
-        });
-        var acrdAniEle = [].slice.call(this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));
-        if (acrdAniEle.length > 0) {
-            for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
-                var el = acrdAniEle_1[_i];
-                acrdActive.push(el.parentElement);
-            }
-        }
-        var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
-        var sameHeader = false;
-        if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {
-            var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
-            var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
-            var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
-            if (isNOU(acrdnCtn_1)) {
+        this.trigger('clicked', eventArgs, function (eventArgs) {
+            if (eventArgs.cancel) {
                 return;
             }
-            sameHeader = (expandState === acrdnItem);
-            if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
-                this.collapse(acrdnCtn_1);
+            var cntclkCheck = (acrdnCtn && !isNOU(select('.e-target', acrdnCtn)));
+            var inlineAcrdnSel = '.' + CLS_CONTENT + ' .' + CLS_ROOT;
+            var inlineEleAcrdn = acrdnCtn && !isNOU(select('.' + CLS_ROOT, acrdnCtn)) && isNOU(closest(trgt, inlineAcrdnSel));
+            var nestContCheck = acrdnCtn && isNOU(select('.' + CLS_ROOT, acrdnCtn)) || !(closest(trgt, '.' + CLS_ROOT) === _this.element);
+            cntclkCheck = cntclkCheck && (inlineEleAcrdn || nestContCheck);
+            trgt.classList.remove('e-target');
+            if (trgt.classList.contains(CLS_CONTENT) || trgt.classList.contains(CLS_CTENT) || cntclkCheck) {
+                return;
             }
-            else {
-                if ((acrdActive.length > 0) && this.expandMode === 'Single' && !sameContentCheck) {
-                    acrdActive.forEach(function (el) {
-                        _this.collapse(select('.' + CLS_CONTENT, el));
-                        el.classList.remove(CLS_EXPANDSTATE);
-                    });
+            var acrdcontainer = _this.element.querySelector('.' + CLS_CONTAINER);
+            var acrdnchild = (acrdcontainer) ? acrdcontainer.children : _this.element.children;
+            [].slice.call(acrdnchild).forEach(function (el) {
+                if (el.classList.contains(CLS_ACTIVE)) {
+                    acrdActive.push(el);
+                }
+            });
+            var acrdAniEle = [].slice.call(_this.element.querySelectorAll('.' + CLS_ITEM + ' [' + CLS_ANIMATE + ']'));
+            if (acrdAniEle.length > 0) {
+                for (var _i = 0, acrdAniEle_1 = acrdAniEle; _i < acrdAniEle_1.length; _i++) {
+                    var el = acrdAniEle_1[_i];
+                    acrdActive.push(el.parentElement);
                 }
-                this.expand(acrdnCtn_1);
             }
-            if (!isNOU(expandState) && !sameHeader) {
-                expandState.classList.remove(CLS_EXPANDSTATE);
+            var sameContentCheck = acrdActive.indexOf(acrdnCtnItem) !== -1 && acrdnCtn.getAttribute('e-animate') === 'true';
+            var sameHeader = false;
+            if (!isNOU(acrdnItem) && !isNOU(acrdnHdr)) {
+                var acrdnCtn_1 = select('.' + CLS_CONTENT, acrdnItem);
+                var acrdnRoot = closest(acrdnItem, '.' + CLS_ACRDN_ROOT);
+                var expandState = acrdnRoot.querySelector('.' + CLS_EXPANDSTATE);
+                if (isNOU(acrdnCtn_1)) {
+                    return;
+                }
+                sameHeader = (expandState === acrdnItem);
+                if (isVisible(acrdnCtn_1) && (!sameContentCheck || acrdnCtnItem.classList.contains(CLS_SLCTED))) {
+                    _this.collapse(acrdnCtn_1);
+                }
+                else {
+                    if ((acrdActive.length > 0) && _this.expandMode === 'Single' && !sameContentCheck) {
+                        acrdActive.forEach(function (el) {
+                            _this.collapse(select('.' + CLS_CONTENT, el));
+                            el.classList.remove(CLS_EXPANDSTATE);
+                        });
+                    }
+                    _this.expand(acrdnCtn_1);
+                }
+                if (!isNOU(expandState) && !sameHeader) {
+                    expandState.classList.remove(CLS_EXPANDSTATE);
+                }
             }
-        }
+        });
     };
     Accordion.prototype.eleMoveFocus = function (action, root, trgt) {
         var clst;
@@ -841,9 +845,12 @@ var Accordion = /** @class */ (function (_super) {
     };
     Accordion.prototype.collapse = function (trgt) {
         var _this = this;
+        if (isNOU(trgt)) {
+            return;
+        }
         var items = this.getItems();
         var trgtItemEle = closest(trgt, '.' + CLS_ITEM);
-        if (isNOU(trgt) || !isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
+        if (!isVisible(trgt) || trgtItemEle.classList.contains(CLS_DISABLE)) {
             return;
         }
         var animation = {

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

@@ -197,6 +197,18 @@ export interface CarouselModel extends ComponentModel{
      */
     enableTouchSwipe?: boolean;
 
+    /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction?: boolean;
+
     /**
      * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
      *

package/src/carousel/carousel.d.ts

@@ -261,6 +261,17 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     enableTouchSwipe: boolean;
+    /**
+     * Defines whether to enable keyboard actions or not.
+     *
+     * * @remarks
+     * If any form input component is placed on the carousel slide, interacting with it may cause
+     * the left/right arrow keys to navigate to other slides. Disabling keyboard interaction helps
+     * prevent this unintended navigation, leading to a smoother user experience.
+     *
+     * @default true
+     */
+    allowKeyboardInteraction: boolean;
     /**
      * Defines whether to show the indicator positions or not. The indicator positions allow to know the current slide position of the carousel component.
      *

package/src/carousel/carousel.js

@@ -183,6 +183,15 @@ var Carousel = /** @class */ (function (_super) {
                         this.reRenderSlides();
                     }
                     break;
+                case 'allowKeyboardInteraction':
+                    if (this.keyModule) {
+                        this.keyModule.destroy();
+                        this.keyModule = null;
+                    }
+                    if (newProp.allowKeyboardInteraction) {
+                        this.renderKeyboardActions();
+                    }
+                    break;
                 case 'enableRtl':
                     rtlElement = [].slice.call(this.element.querySelectorAll("." + CLS_PREV_BUTTON + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
                     rtlElement.push(this.element);
@@ -554,6 +563,9 @@ var Carousel = /** @class */ (function (_super) {
         append(template, indicatorBar);
     };
     Carousel.prototype.renderKeyboardActions = function () {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         this.keyModule = new KeyboardEvents(this.element, { keyAction: this.keyHandler.bind(this), keyConfigs: this.keyConfigs });
     };
     Carousel.prototype.renderTouchActions = function () {
@@ -877,6 +889,9 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.keyHandler = function (e) {
+        if (!this.allowKeyboardInteraction) {
+            return;
+        }
         var direction;
         var slideIndex;
         var isSlideTransition = false;
@@ -1025,6 +1040,7 @@ var Carousel = /** @class */ (function (_super) {
         if (!this.timeStampStart) {
             this.timeStampStart = Date.now();
         }
+        e.preventDefault();
         this.isSwipe = false;
         this.itemsContainer.classList.add('e-swipe-start');
         this.prevPageX = e.touches ? e.touches[0].pageX : e.pageX;
@@ -1034,6 +1050,7 @@ var Carousel = /** @class */ (function (_super) {
         if (!this.itemsContainer.classList.contains('e-swipe-start')) {
             return;
         }
+        this.isSwipe = true;
         e.preventDefault();
         var pageX = e.touches ? e.touches[0].pageX : e.pageX;
         var positionDiff = this.prevPageX - (pageX);
@@ -1046,7 +1063,6 @@ var Carousel = /** @class */ (function (_super) {
         this.itemsContainer.style.transform = "translateX(" + (this.initialTranslate + (this.enableRtl ? positionDiff : -positionDiff)) + "px)";
     };
     Carousel.prototype.swipStop = function () {
-        this.isSwipe = true;
         var time = Date.now() - this.timeStampStart;
         var distanceX = this.getTranslateValue(this.itemsContainer) - this.initialTranslate;
         distanceX = distanceX < 0 ? distanceX * -1 : distanceX;
@@ -1110,7 +1126,7 @@ var Carousel = /** @class */ (function (_super) {
         }
     };
     Carousel.prototype.wireEvents = function () {
-        if (!(this.animationEffect === 'Custom')) {
+        if (this.animationEffect !== 'Custom' && this.enableTouchSwipe) {
             this.swipeModehandlers();
         }
         EventHandler.add(this.element, 'focusin focusout', this.onFocusActions, this);
@@ -1232,8 +1248,10 @@ var Carousel = /** @class */ (function (_super) {
             this.touchModule.destroy();
             this.touchModule = null;
         }
-        this.keyModule.destroy();
-        this.keyModule = null;
+        if (this.keyModule) {
+            this.keyModule.destroy();
+            this.keyModule = null;
+        }
         this.resetSlideInterval();
         this.destroyButtons();
         this.unWireEvents();
@@ -1297,6 +1315,9 @@ var Carousel = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Carousel.prototype, "enableTouchSwipe", void 0);
+    __decorate([
+        Property(true)
+    ], Carousel.prototype, "allowKeyboardInteraction", void 0);
     __decorate([
         Property(true)
     ], Carousel.prototype, "showIndicators", void 0);

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

@@ -106,6 +106,13 @@ export interface MenuItemModel {
      */
     url?: string;
 
+    /**
+     * Specifies the htmlAttributes property to support adding custom attributes to the menu items in the menu component.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
 }
 
 /**

package/src/common/menu-base.d.ts

@@ -108,6 +108,12 @@ export declare class MenuItem extends ChildProperty<MenuItem> {
      * @default ''
      */
     url: string;
+    /**
+     * Specifies the htmlAttributes property to support adding custom attributes to the menu items in the menu component.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
 }
 /**
  * Animation configuration settings.
@@ -373,6 +379,7 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
     protected setBlankIconStyle(menu: HTMLElement): void;
     private checkScrollOffset;
     private setPosition;
+    getMenuWidth(cmenu: Element, width: number, isRtl: boolean): number;
     private toggleVisiblity;
     private createItems;
     private moverHandler;

package/src/common/menu-base.js

@@ -108,6 +108,9 @@ var MenuItem = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], MenuItem.prototype, "url", void 0);
+    __decorate([
+        Property()
+    ], MenuItem.prototype, "htmlAttributes", void 0);
     return MenuItem;
 }(ChildProperty));
 export { MenuItem };
@@ -839,7 +842,10 @@ var MenuBase = /** @class */ (function (_super) {
                 var data = {
                     text: item[this.getField('text')].toString(), iconCss: ICONS + ' e-previous'
                 };
-                var hdata = new MenuItem(this.items[0], 'items', data, true);
+                if (this.template) {
+                    item.iconCss = (item.iconCss || '') + ICONS + ' e-previous';
+                }
+                var hdata = new MenuItem(this.items[0], 'items', this.template ? item : data, true);
                 var hli = this.createItems([hdata]).children[0];
                 hli.classList.add(HEADER);
                 this.uList.insertBefore(hli, this.uList.children[0]);
@@ -1088,6 +1094,9 @@ var MenuBase = /** @class */ (function (_super) {
                                 timingFunction: _this.animationSettings.easing
                             } : null;
                             _this.popupObj.show(animationOptions, _this.lItem);
+                            if (Browser.isDevice) {
+                                _this.popupWrapper.style.left = _this.left + 'px';
+                            }
                         }
                     }
                     else {
@@ -1228,8 +1237,34 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         this.toggleVisiblity(ul, false);
-        ul.style.top = top + px;
-        ul.style.left = left + px;
+        var wrapper = closest(this.element, '.e-' + this.getModuleName() + '-wrapper');
+        if (!this.isMenu && this.enableScrolling && ul && wrapper && wrapper.offsetHeight > 0) {
+            var menuVScroll = closest(ul, '.e-menu-vscroll');
+            ul.style.display = 'block';
+            if (menuVScroll) {
+                destroyScroll(getInstance(menuVScroll, VScroll), menuVScroll);
+            }
+            var cmenuWidth = Math.ceil(this.getMenuWidth(ul, ul.offsetWidth, this.enableRtl));
+            var cmenu = addScrolling(this.createElement, wrapper, ul, 'vscroll', this.enableRtl, wrapper.offsetHeight);
+            Object.assign(cmenu.style, {
+                top: top + "px",
+                left: left + "px",
+                width: cmenuWidth + "px",
+                position: 'absolute',
+                display: 'none'
+            });
+        }
+        else {
+            ul.style.top = top + px;
+            ul.style.left = left + px;
+        }
+    };
+    MenuBase.prototype.getMenuWidth = function (cmenu, width, isRtl) {
+        var caretIcon = cmenu.getElementsByClassName(CARET)[0];
+        if (caretIcon) {
+            width += parseInt(getComputedStyle(caretIcon)[isRtl ? 'marginRight' : 'marginLeft'], 10);
+        }
+        return width < 120 ? 120 : width;
     };
     MenuBase.prototype.toggleVisiblity = function (ul, isVisible) {
         if (isVisible === void 0) { isVisible = true; }
@@ -1255,15 +1290,24 @@ var MenuBase = /** @class */ (function (_super) {
                     args.curData.htmlAttributes = {};
                 }
                 if (Browser.isIE) {
-                    args.curData.htmlAttributes.role = 'menuitem';
-                    args.curData.htmlAttributes.tabindex = '-1';
+                    if (!args.curData.htmlAttributes.role) {
+                        args.curData.htmlAttributes.role = 'menuitem';
+                    }
+                    if (!args.curData.htmlAttributes.tabindex) {
+                        args.curData.htmlAttributes.tabindex = '-1';
+                    }
                 }
                 else {
-                    Object.assign(args.curData.htmlAttributes, { role: 'menuitem', tabindex: '-1' });
+                    Object.assign(args.curData.htmlAttributes, {
+                        role: args.curData.htmlAttributes.role || 'menuitem',
+                        tabindex: args.curData.htmlAttributes.tabindex || '-1'
+                    });
                 }
                 if (_this.isMenu && !args.curData[_this.getField('separator', level)]) {
-                    args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
-                        args.curData[args.fields.text] : args.curData[args.fields.id];
+                    if (!args.curData.htmlAttributes['aria-label']) {
+                        args.curData.htmlAttributes['aria-label'] = args.curData[args.fields.text] ?
+                            args.curData[args.fields.text] : args.curData[args.fields.id];
+                    }
                 }
                 if (args.curData[args.fields[fields.iconCss]] === '') {
                     args.curData[args.fields[fields.iconCss]] = null;
@@ -1272,7 +1316,9 @@ var MenuBase = /** @class */ (function (_super) {
             itemCreated: function (args) {
                 if (args.curData[_this.getField('separator', level)]) {
                     args.item.classList.add(SEPARATOR);
-                    args.item.setAttribute('role', 'separator');
+                    if (!args.curData.htmlAttributes.role) {
+                        args.item.setAttribute('role', 'separator');
+                    }
                 }
                 if (showIcon && !args.curData[args.fields.iconCss]
                     && !args.curData[_this.getField('separator', level)]) {
@@ -1522,9 +1568,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         else {
-            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                var popupEle = closest(trgt, '.' + POPUP);
-                var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
+            if (trgt.tagName === 'DIV' && closest(trgt, '.e-menu-vscroll') && (this.navIdx.length || !this.isMenu && this.enableScrolling && this.navIdx.length === 0)) {
+                var popupEle = this.isMenu ? closest(trgt, '.' + POPUP) : closest(trgt, '.e-menu-vscroll');
+                var cIdx = this.isMenu ? Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1
+                    : this.getIdx(wrapper, select('ul.e-menu-parent', popupEle));
                 if (cIdx < this.navIdx.length) {
                     this.closeMenu(cIdx + 1, e);
                     if (popupEle) {
@@ -1673,7 +1720,9 @@ var MenuBase = /** @class */ (function (_super) {
     };
     MenuBase.prototype.getIdx = function (ul, li, skipHdr) {
         if (skipHdr === void 0) { skipHdr = true; }
-        var idx = Array.prototype.indexOf.call(ul.children, li);
+        var ulElem = !this.isMenu && this.enableScrolling && select('.e-menu-vscroll', ul)
+            ? selectAll('.e-menu-parent', ul) : Array.from(ul.children);
+        var idx = Array.prototype.indexOf.call(ulElem, li);
         if (skipHdr && ul.children[0].classList.contains(HEADER)) {
             idx--;
         }
@@ -1757,7 +1806,7 @@ var MenuBase = /** @class */ (function (_super) {
                     }
                     else {
                         var ul_3 = wrapper.children[0];
-                        if (this_1.element.classList.contains('e-vertical')) {
+                        if (this_1.element.classList.contains('e-vertical') || !this_1.isMenu) {
                             destroyScroll(getInstance(ul_3, VScroll), ul_3);
                         }
                         else {
@@ -1928,6 +1977,8 @@ var MenuBase = /** @class */ (function (_super) {
         if (isMenuOpen === void 0) { isMenuOpen = true; }
         var pUlHeight;
         var pElement;
+        var animateElement = (this.enableScrolling && !this.isMenu && closest(ul, '.e-menu-vscroll'))
+            ? closest(ul, '.e-menu-vscroll') : ul;
         if (this.animationSettings.effect === 'None' || !isMenuOpen) {
             if (this.hamburgerMode && ul) {
                 ul.style.top = '0px';
@@ -1936,7 +1987,7 @@ var MenuBase = /** @class */ (function (_super) {
             this.end(ul, isMenuOpen);
         }
         else {
-            this.animation.animate(ul, {
+            this.animation.animate(animateElement, {
                 name: this.animationSettings.effect,
                 duration: this.animationSettings.duration,
                 timingFunction: this.animationSettings.easing,
@@ -1954,7 +2005,7 @@ var MenuBase = /** @class */ (function (_super) {
                     }
                     else {
                         options.element.style.display = 'block';
-                        options.element.style.maxHeight = options.element.getBoundingClientRect().height + 'px';
+                        options.element.style.maxHeight = _this.isMenu ? options.element.getBoundingClientRect().height + 'px' : options.element.scrollHeight + 'px';
                     }
                 },
                 progress: function (options) {
@@ -1991,11 +2042,15 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     MenuBase.prototype.end = function (ul, isMenuOpen) {
-        if (isMenuOpen && (this.isMenu || (!this.isMenu && this.isContextMenuClosed))) {
-            if (this.isMenu || !Browser.isDevice) {
+        if (isMenuOpen && this.isContextMenuClosed) {
+            if (this.isMenu || !Browser.isDevice || (!this.isMenu && this.isAnimationNone && Browser.isDevice)) {
                 ul.style.display = 'block';
             }
             ul.style.maxHeight = '';
+            var scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                scrollMenu.style.display = 'block';
+            }
             this.triggerOpen(ul);
             if (ul.querySelector('.' + FOCUSED)) {
                 ul.querySelector('.' + FOCUSED).focus();
@@ -2023,6 +2078,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
         }
         else {
+            var scrollMenu = this.enableScrolling && !this.isMenu ? closest(ul, '.e-menu-vscroll') : null;
+            if (scrollMenu) {
+                destroyScroll(getInstance(scrollMenu, VScroll), scrollMenu);
+            }
             if (ul === this.element) {
                 var fli = this.getLIByClass(this.element, FOCUSED);
                 if (fli) {
@@ -2066,7 +2125,9 @@ var MenuBase = /** @class */ (function (_super) {
         level = isCallBack ? level + 1 : 0;
         for (var i = 0, len = items.length; i < len; i++) {
             item = items[i];
-            if ((isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)]) === data) {
+            var currentField = isUniqueId ? item[this.getField('itemId', level)] : item[this.getField('text', level)];
+            var itemId = (item.htmlAttributes && 'id' in item.htmlAttributes) ? item.htmlAttributes.id : currentField;
+            if (itemId === data) {
                 nIndex.push(i);
                 break;
             }

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

@@ -29,4 +29,19 @@ export interface ContextMenuModel extends MenuBaseModel{
      */
     items?: MenuItemModel[];
 
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate?: string | Function;
+
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling?: boolean;
+
 }

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

@@ -44,6 +44,19 @@ export declare class ContextMenu extends MenuBase implements INotifyPropertyChan
      * @blazorType object
      */
     items: MenuItemModel[];
+    /**
+     * This property allows you to define custom templates for items in the ContextMenu.
+     *
+     * @default null
+     * @aspType string
+     */
+    itemTemplate: string | Function;
+    /**
+     * Specifies whether to enable / disable the scrollable option in ContextMenu.
+     *
+     * @default false
+     */
+    enableScrolling: boolean;
     /**
      * For internal use only - prerender processing.
      *

package/src/context-menu/context-menu.js

@@ -58,6 +58,7 @@ var ContextMenu = /** @class */ (function (_super) {
         _super.prototype.preRender.call(this);
     };
     ContextMenu.prototype.initialize = function () {
+        this.template = this.itemTemplate ? this.itemTemplate : null;
         _super.prototype.initialize.call(this);
         attributes(this.element, { 'role': 'menubar', 'tabindex': '0' });
         this.element.style.zIndex = getZindexPartial(this.element).toString();
@@ -104,6 +105,9 @@ var ContextMenu = /** @class */ (function (_super) {
                     this.unWireEvents(oldProp.target);
                     this.wireEvents();
                     break;
+                case 'itemTemplate':
+                    this.itemTemplate = newProp.itemTemplate;
+                    this.refresh();
             }
         }
     };
@@ -125,6 +129,12 @@ var ContextMenu = /** @class */ (function (_super) {
     __decorate([
         Collection([], MenuItem)
     ], ContextMenu.prototype, "items", void 0);
+    __decorate([
+        Property(null)
+    ], ContextMenu.prototype, "itemTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], ContextMenu.prototype, "enableScrolling", void 0);
     ContextMenu = __decorate([
         NotifyPropertyChanges
     ], ContextMenu);

package/src/menu/menu.js

@@ -211,6 +211,10 @@ var Menu = /** @class */ (function (_super) {
                         }
                     }
                     break;
+                case 'template':
+                    this.template = newProp.template;
+                    this.refresh();
+                    break;
             }
         }
         _super.prototype.onPropertyChanged.call(this, newProp, oldProp);