@progress/kendo-angular-menu 23.3.0-develop.16 → 23.3.0-develop.18

package/fesm2022/progress-kendo-angular-menu.mjs

@@ -22,8 +22,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1774537052,
-    version: '23.3.0-develop.16',
+    publishDate: 1774603374,
+    version: '23.3.0-develop.18',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1133,6 +1133,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: [MenuItemComponent]
             }] } });
 
+/**
+ * @hidden
+ */
+const defined = (value) => typeof value !== 'undefined';
+/**
+ * @hidden
+ */
+const bodyFactory = () => {
+    if (isDocumentAvailable()) {
+        return new ElementRef(document.body);
+    }
+};
+/**
+ * @hidden
+ */
+const getSizeClass = (size) => {
+    const SIZE_CLASSES = {
+        'small': 'k-menu-group-sm',
+        'medium': 'k-menu-group-md',
+        'large': 'k-menu-group-lg'
+    };
+    return SIZE_CLASSES[size];
+};
+/**
+ * @hidden
+ */
+const getFontIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            'caret-alt-left' :
+            'caret-alt-right' :
+        'caret-alt-down';
+    return icon;
+};
+/**
+ * @hidden
+ */
+const getSVGIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            caretAltLeftIcon :
+            caretAltRightIcon :
+        caretAltDownIcon;
+    return icon;
+};
+/**
+ * @hidden
+ */
+function defaultTrackBy(index) {
+    return index;
+}
+
 /**
  * @hidden
  */
@@ -1175,6 +1227,11 @@ class MenuBase {
      * Allows customization of the popup class and margin.
      */
     popupSettings;
+    /**
+     * Defines a function that determines how to track changes for the menu items.
+     * By default, the component tracks changes by index.
+     */
+    trackBy = defaultTrackBy;
     /**
      * @hidden
      */
@@ -1194,7 +1251,7 @@ class MenuBase {
         return this.items || (this.children ? this.children.toArray() : []);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MenuBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MenuBase, isStandalone: true, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MenuBase, isStandalone: true, selector: "kendo-menu-base", inputs: { items: "items", vertical: "vertical", openOnClick: "openOnClick", hoverDelay: "hoverDelay", animate: "animate", size: "size", popupSettings: "popupSettings", trackBy: "trackBy" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MenuBase, decorators: [{
             type: Component,
@@ -1216,6 +1273,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
+            }], trackBy: [{
+                type: Input
             }], itemTemplate: [{
                 type: ContentChildren,
                 args: [ItemTemplateDirective]
@@ -1227,52 +1286,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: [MenuItemComponent]
             }] } });
 
-/**
- * @hidden
- */
-const defined = (value) => typeof value !== 'undefined';
-/**
- * @hidden
- */
-const bodyFactory = () => {
-    if (isDocumentAvailable()) {
-        return new ElementRef(document.body);
-    }
-};
-/**
- * @hidden
- */
-const getSizeClass = (size) => {
-    const SIZE_CLASSES = {
-        'small': 'k-menu-group-sm',
-        'medium': 'k-menu-group-md',
-        'large': 'k-menu-group-lg'
-    };
-    return SIZE_CLASSES[size];
-};
-/**
- * @hidden
- */
-const getFontIcon = (horizontal, rtl) => {
-    const icon = horizontal ?
-        rtl ?
-            'caret-alt-left' :
-            'caret-alt-right' :
-        'caret-alt-down';
-    return icon;
-};
-/**
- * @hidden
- */
-const getSVGIcon = (horizontal, rtl) => {
-    const icon = horizontal ?
-        rtl ?
-            caretAltLeftIcon :
-            caretAltRightIcon :
-        caretAltDownIcon;
-    return icon;
-};
-
 const POPUP_ALIGN = {
     vertical: 'top',
     horizontal: 'left'
@@ -1367,6 +1380,7 @@ class ListComponent {
     itemTemplate;
     itemLinkTemplate;
     popupSettings;
+    trackBy;
     domSubscriptions;
     constructor(itemsService, hover, actions, navigation, renderer, ngZone, element) {
         this.itemsService = itemsService;
@@ -1377,6 +1391,9 @@ class ListComponent {
         this.ngZone = ngZone;
         this.element = element;
     }
+    trackByWrapper(index, item) {
+        return this.trackBy ? this.trackBy(index, item) : index;
+    }
     hierarchyIndex(index) {
         return this.itemsService.itemIndex(this.index, index);
     }
@@ -1516,14 +1533,14 @@ class ListComponent {
         this.actions.execute();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, deps: [{ token: ItemsService }, { token: HoverService }, { token: ActionsService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, ngImport: i0, template: "\n        @for (item of items; track item; let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ListComponent, isStandalone: true, selector: "[kendoMenuList]", inputs: { appendTo: "appendTo", items: "items", level: "level", index: "index", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings", trackBy: "trackBy" }, ngImport: i0, template: "\n        @for (item of items; track trackByWrapper($index, item); let idx = $index) {\n          @if (!item.separator) {\n            <li\n              kendoMenuItem\n              [appendTo]=\"appendTo\"\n              [item]=\"item\"\n              [level]=\"level\"\n              [size]=\"size\"\n              [vertical]=\"vertical\"\n              [animate]=\"animate\"\n              [rtl]=\"rtl\"\n              [itemTemplate]=\"itemTemplate\"\n              [itemLinkTemplate]=\"itemLinkTemplate\"\n              [popupSettings]=\"popupSettings\"\n              [trackBy]=\"trackBy\"\n              [openOnClick]=\"openOnClick\"\n              [index]=\"hierarchyIndex(idx)\"\n              [siblingIndex]=\"idx\"\n              [attr.data-kendo-menu-index]=\"hierarchyIndex(idx)\"\n              [ngClass]=\"item.cssClass\"\n              [ngStyle]=\"item.cssStyle\"\n              role=\"menuitem\"\n              class=\"k-item k-menu-item\"\n              [class.k-first]=\"idx === 0\"\n              [class.k-last]=\"idx === items.length - 1\"\n            [class.k-disabled]=\"item.disabled\"></li>\n          }\n          @if (item.separator) {\n            <li\n              class=\"k-separator k-item\"\n              [ngClass]=\"item.cssClass\"\n              aria-hidden=\"true\"\n              [ngStyle]=\"item.cssStyle\">\n              &nbsp;\n            </li>\n          }\n        }\n        ", isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => ItemComponent), selector: "[kendoMenuItem]", inputs: ["appendTo", "item", "level", "index", "siblingIndex", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoMenuList]',
                     template: `
-        @for (item of items; track item; let idx = $index) {
+        @for (item of items; track trackByWrapper($index, item); let idx = $index) {
           @if (!item.separator) {
             <li
               kendoMenuItem
@@ -1537,6 +1554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               [itemTemplate]="itemTemplate"
               [itemLinkTemplate]="itemLinkTemplate"
               [popupSettings]="popupSettings"
+              [trackBy]="trackBy"
               [openOnClick]="openOnClick"
               [index]="hierarchyIndex(idx)"
               [siblingIndex]="idx"
@@ -1587,6 +1605,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
+            }], trackBy: [{
+                type: Input
             }] } });
 /**
  * @hidden
@@ -1625,6 +1645,7 @@ class ItemComponent {
     itemTemplate;
     itemLinkTemplate;
     popupSettings;
+    trackBy;
     link;
     popupTemplate;
     get disabled() {
@@ -1715,6 +1736,11 @@ class ItemComponent {
     ngOnInit() {
         this.itemsService.add(this);
     }
+    ngOnChanges(changes) {
+        if (changes['item'] && !changes['item'].firstChange && this.opened) {
+            this.close();
+        }
+    }
     ngAfterViewInit() {
         if (this.hasContent) {
             this.setAttribute('aria-expanded', this.opened.toString());
@@ -1809,10 +1835,10 @@ class ItemComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ItemComponent, deps: [{ token: ItemsService }, { token: NavigationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i5.PopupService }, { token: i0.ElementRef }, { token: ContextMenuService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: ItemComponent, isStandalone: true, selector: "[kendoMenuItem]", inputs: { appendTo: "appendTo", item: "item", level: "level", index: "index", siblingIndex: "siblingIndex", animate: "animate", size: "size", vertical: "vertical", rtl: "rtl", openOnClick: "openOnClick", itemTemplate: "itemTemplate", itemLinkTemplate: "itemLinkTemplate", popupSettings: "popupSettings", trackBy: "trackBy" }, host: { properties: { "attr.aria-disabled": "this.disabled", "attr.aria-haspopup": "this.hasPopup", "attr.aria-label": "this.label" } }, providers: [PopupService, {
                 provide: POPUP_CONTAINER,
                 useFactory: bodyFactory
-            }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+            }], viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
     @if (!hasLink && !item.content && !linkTemplate) {
       <span class="k-link k-menu-link" #link
         [class.k-active]="opened" role="presentation">
@@ -1855,6 +1881,7 @@ class ItemComponent {
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
         [popupSettings]="popupSettings"
+        [trackBy]="trackBy"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -1875,7 +1902,7 @@ class ItemComponent {
         <kendo-icon-wrapper [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" aria-hidden="true"></kendo-icon-wrapper>
       }
     </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
@@ -1928,6 +1955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         [itemTemplate]="itemTemplate"
         [itemLinkTemplate]="itemLinkTemplate"
         [popupSettings]="popupSettings"
+        [trackBy]="trackBy"
         [ngClass]="menuListClasses"
         role="menu">
       </ul>
@@ -1980,6 +2008,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], popupSettings: [{
                 type: Input
+            }], trackBy: [{
+                type: Input
             }], link: [{
                 type: ViewChild,
                 args: ['link', { static: false }]
@@ -2215,9 +2245,10 @@ class MenuComponent extends MenuBase {
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
             [popupSettings]="popupSettings"
+            [trackBy]="trackBy"
             [ngClass]="menuClasses">
         </ul>
-    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ListComponent, selector: "[kendoMenuList]", inputs: ["appendTo", "items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate", "popupSettings", "trackBy"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -2248,6 +2279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [itemTemplate]="itemTemplate.first?.templateRef || menuItemTemplate"
             [itemLinkTemplate]="itemLinkTemplate.first?.templateRef || menuItemLinkTemplate"
             [popupSettings]="popupSettings"
+            [trackBy]="trackBy"
             [ngClass]="menuClasses">
         </ul>
     `,
@@ -3382,6 +3414,7 @@ class ContextMenuComponent extends MenuBase {
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
                 [popupSettings]="popupSettings"
+                [trackBy]="trackBy"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>
@@ -3425,6 +3458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [hoverDelay]="hoverDelay"
                 [animate]="animate"
                 [popupSettings]="popupSettings"
+                [trackBy]="trackBy"
                 [menuItemTemplate]="itemTemplate.first?.templateRef"
                 [menuItemLinkTemplate]="itemLinkTemplate.first?.templateRef"
             ></kendo-menu>

package/menu-base.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { QueryList } from '@angular/core';
+import { QueryList, TrackByFunction } from '@angular/core';
 import { MenuItemComponent } from './menu-item.component';
 import { MenuAnimation } from './menu-animation.interface';
 import { OpenOnClickSettings } from './open-on-click-settings';
@@ -53,6 +53,11 @@ export declare class MenuBase {
      * Allows customization of the popup class and margin.
      */
     popupSettings: PopupSettings;
+    /**
+     * Defines a function that determines how to track changes for the menu items.
+     * By default, the component tracks changes by index.
+     */
+    trackBy: TrackByFunction<any>;
     /**
      * @hidden
      */
@@ -70,5 +75,5 @@ export declare class MenuBase {
      */
     get rootItems(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuBase, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuBase, "kendo-menu-base", never, { "items": { "alias": "items"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, ["itemTemplate", "itemLinkTemplate", "children"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuBase, "kendo-menu-base", never, { "items": { "alias": "items"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "hoverDelay": { "alias": "hoverDelay"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; }, {}, ["itemTemplate", "itemLinkTemplate", "children"], never, true, never>;
 }

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1774537052,
-  "version": "23.3.0-develop.16",
+  "publishDate": 1774603374,
+  "version": "23.3.0-develop.18",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-menu",
-  "version": "23.3.0-develop.16",
+  "version": "23.3.0-develop.18",
   "description": "Kendo UI Angular Menu component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1774537052,
+      "publishDate": 1774603374,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -29,15 +29,15 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-common": "23.3.0-develop.16",
-    "@progress/kendo-angular-l10n": "23.3.0-develop.16",
-    "@progress/kendo-angular-icons": "23.3.0-develop.16",
-    "@progress/kendo-angular-popup": "23.3.0-develop.16",
+    "@progress/kendo-angular-common": "23.3.0-develop.18",
+    "@progress/kendo-angular-l10n": "23.3.0-develop.18",
+    "@progress/kendo-angular-icons": "23.3.0-develop.18",
+    "@progress/kendo-angular-popup": "23.3.0-develop.18",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.3.0-develop.16"
+    "@progress/kendo-angular-schematics": "23.3.0-develop.18"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-menu.mjs",

package/rendering/list.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, NgZone, OnDestroy, OnInit, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ElementRef, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ContextMenuService } from '../context-menu/context-menu.service';
@@ -37,8 +37,10 @@ export declare class ListComponent implements OnInit, OnDestroy {
     itemTemplate: TemplateRef<any>;
     itemLinkTemplate: TemplateRef<any>;
     popupSettings: PopupSettings;
+    trackBy: TrackByFunction<any>;
     private domSubscriptions;
     constructor(itemsService: ItemsService, hover: HoverService, actions: ActionsService, navigation: NavigationService, renderer: Renderer2, ngZone: NgZone, element: ElementRef);
+    trackByWrapper(index: number, item: any): any;
     hierarchyIndex(index: number): string;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -48,12 +50,12 @@ export declare class ListComponent implements OnInit, OnDestroy {
     private nodeItem;
     private clickHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "[kendoMenuList]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "items": { "alias": "items"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "[kendoMenuList]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "items": { "alias": "items"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; }, {}, never, never, true, never>;
 }
 /**
  * @hidden
  */
-export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
+export declare class ItemComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
     private itemsService;
     private navigation;
     private changeDetector;
@@ -75,6 +77,7 @@ export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
     itemTemplate: TemplateRef<any>;
     itemLinkTemplate: TemplateRef<any>;
     popupSettings: PopupSettings;
+    trackBy: TrackByFunction<any>;
     link: ElementRef;
     popupTemplate: TemplateRef<any>;
     get disabled(): boolean;
@@ -109,6 +112,7 @@ export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
     constructor(itemsService: ItemsService, navigation: NavigationService, changeDetector: ChangeDetectorRef, renderer: Renderer2, popupService: PopupService, element: ElementRef, contextService?: ContextMenuService);
     hasContentTemplates(): boolean;
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     focus(): void;
@@ -120,5 +124,5 @@ export declare class ItemComponent implements OnInit, AfterViewInit, OnDestroy {
     private setAttribute;
     private getMergedPopupSettings;
     static ɵfac: i0.ɵɵFactoryDeclaration<ItemComponent, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "[kendoMenuItem]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "item": { "alias": "item"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "siblingIndex": { "alias": "siblingIndex"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ItemComponent, "[kendoMenuItem]", never, { "appendTo": { "alias": "appendTo"; "required": false; }; "item": { "alias": "item"; "required": false; }; "level": { "alias": "level"; "required": false; }; "index": { "alias": "index"; "required": false; }; "siblingIndex": { "alias": "siblingIndex"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "size": { "alias": "size"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "rtl": { "alias": "rtl"; "required": false; }; "openOnClick": { "alias": "openOnClick"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "itemLinkTemplate": { "alias": "itemLinkTemplate"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; }, {}, never, never, true, never>;
 }

package/utils.d.ts

@@ -25,3 +25,7 @@ export declare const getFontIcon: (horizontal: boolean, rtl: boolean) => string;
  * @hidden
  */
 export declare const getSVGIcon: (horizontal: boolean, rtl: boolean) => SVGIcon;
+/**
+ * @hidden
+ */
+export declare function defaultTrackBy(index: number): number;