@progress/kendo-vue-layout 2.5.2-dev.202110121006 → 2.5.2-dev.202110150637

package/dist/es/menu/components/Menu.js

@@ -18,6 +18,7 @@ var __assign = this && this.__assign || function () {
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
+import { templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { Keys, guid, validatePackage } from '@progress/kendo-vue-common';
 import { getDirectParentId, isIdEmptyOrZeroLevel, EMPTY_ID, ZERO_LEVEL_ZERO_ITEM_ID, getRootParentId, getItemById } from '../utils/itemsIdsUtils';
 import { prepareInputItemsForInternalWork } from '../utils/prepareInputItemsForInternalWork';
@@ -26,8 +27,7 @@ import { getHoverOpenDelay, getHoverCloseDelay } from '../utils/hoverDelay';
 import { MenuItemInternalsList } from './MenuItemInternalsList';
 import { DirectionHolder } from '../utils/DirectionHolder';
 import { MouseOverHandler } from '../utils/MouseOverHandler';
-import { packageMetadata } from '../../package-metadata';
-var initialItemsIds = {}; // tslint:enable:max-line-length
+import { packageMetadata } from '../../package-metadata'; // tslint:enable:max-line-length
 
 var Menu = {
   name: 'KendoMenu',
@@ -111,10 +111,6 @@ var Menu = {
 
     var lastItemIdToBeOpened = this.hoveredItemId ? this.hoveredItemId : this.focusedItemId ? getDirectParentId(this.focusedItemId) : EMPTY_ID;
     return h("div", {
-      onKeydown: this.onKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.onKeyDown
-      },
       "class": this.getMenuWrapperClassName(),
       ref: function ref(el) {
         return _this.menuWrapperEl = el;
@@ -131,9 +127,10 @@ var Menu = {
         focusedItemId: this.focusedItemId,
         lastItemIdToBeOpened: lastItemIdToBeOpened,
         tabbableItemId: this.tabbableItemId,
-        itemRender: this.$props.itemRender,
-        linkRender: this.$props.linkRender,
-        menuGuid: this.guid
+        itemRender: templateRendering.call(this, this.$props.itemRender, getListeners.call(this)),
+        linkRender: templateRendering.call(this, this.$props.linkRender, getListeners.call(this)),
+        menuGuid: this.guid,
+        originalItemNeeded: this.getInputItem
       },
       items: this.currentItems,
       isMenuVertical: this.$props.vertical,
@@ -141,31 +138,34 @@ var Menu = {
       focusedItemId: this.focusedItemId,
       lastItemIdToBeOpened: lastItemIdToBeOpened,
       tabbableItemId: this.tabbableItemId,
-      itemRender: this.$props.itemRender,
-      linkRender: this.$props.linkRender,
+      itemRender: templateRendering.call(this, this.$props.itemRender, getListeners.call(this)),
+      linkRender: templateRendering.call(this, this.$props.linkRender, getListeners.call(this)),
       menuGuid: this.guid,
       onMouseleave: this.onItemMouseLeave,
       on: this.v3 ? undefined : {
         "mouseleave": this.onItemMouseLeave,
         "mouseover": this.onItemMouseOver,
         "mousedown": this.onItemMouseDown,
+        "keydown": this.onKeyDown,
         "focus": this.onItemFocus,
         "click": this.onItemClick,
-        "blur": this.onItemBlur,
-        "originalitemneeded": this.getInputItem
+        "blur": this.onItemBlur
       },
       onMouseover: this.onItemMouseOver,
       onMousedown: this.onItemMouseDown,
+      onKeydown: this.onKeyDown,
       onFocus: this.onItemFocus,
       onClick: this.onItemClick,
       onBlur: this.onItemBlur,
-      onOriginalitemneeded: this.getInputItem
+      originalItemNeeded: this.getInputItem
     })]);
   },
   methods: {
     reset: function reset() {
       this.clearItemHoverAndLeaveRequestsIfApplicable();
-      this.setState(initialItemsIds);
+      this.focusedItemId = EMPTY_ID;
+      this.hoveredItemId = EMPTY_ID;
+      this.tabbableItemId = ZERO_LEVEL_ZERO_ITEM_ID;
     },
     onKeyDown: function onKeyDown(event) {
       // The focusedItemId may be empty when contentRender is used.
@@ -245,6 +245,7 @@ var Menu = {
       var tabbableItemId = focusedItemId === EMPTY_ID ? this.tabbableItemId : getRootParentId(focusedItemId);
       var hoveredItemId = focusedItemId === EMPTY_ID || isIdEmptyOrZeroLevel(this.hoveredItemId) && isIdEmptyOrZeroLevel(focusedItemId) ? this.hoveredItemId : EMPTY_ID;
       this.hoveredItemId = hoveredItemId;
+      this.focusedItemId = focusedItemId;
       this.tabbableItemId = tabbableItemId;
     },
     setHoveredItemId: function setHoveredItemId(hoveredItemId) {
@@ -279,7 +280,7 @@ var Menu = {
       return this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl';
     },
     prepareItems: function prepareItems() {
-      var _a = prepareInputItemsForInternalWork(this.$props.items),
+      var _a = prepareInputItemsForInternalWork.call(this, this.$props.items),
           items = _a.items,
           inputItems = _a.inputItems;
 

package/dist/es/menu/components/MenuItemInternal.d.ts

@@ -18,6 +18,7 @@ export interface MenuItemInternalProps extends BaseMenuItemInternalProps {
 export interface MenuItemInternalState {
     itemElement: any;
     isFirstRender: boolean;
+    prevFocusedItemId?: string;
     kendoAnchorRef: any;
     _anchor: string;
 }
@@ -25,6 +26,12 @@ export interface MenuItemInternalState {
  * @hidden
  */
 export interface MenuItemInternalComputed {
+    currentItemRender: any;
+    currentLinkRender: any;
+    contentRender: any;
+    currentOpened: boolean;
+    popupClassName: string;
+    menuItemClassName: object;
 }
 /**
  * @hidden

package/dist/es/menu/components/MenuItemInternal.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var ref = allVue.ref;
-import { classNames, guid } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc';
@@ -13,6 +13,16 @@ import { MenuItemArrow } from './MenuItemArrow'; // tslint:enable:max-line-lengt
 
 var MenuItemInternal = {
   name: 'KendoMenuItemInternal',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'mouseover': null,
+    'mouseleave': null,
+    'blur': null,
+    'focus': null,
+    'click': null,
+    'mousedown': null
+  },
   props: {
     item: Object,
     focusedItemId: String,
@@ -22,10 +32,12 @@ var MenuItemInternal = {
     linkRender: [String, Object, Function],
     isMenuVertical: Boolean,
     isDirectionRightToLeft: Boolean,
-    menuGuid: String
+    menuGuid: String,
+    originalItemNeeded: Function
   },
   created: function created() {
     this.itemElement = null;
+    this.prevFocusedItemId = this.$props.focusedItemId;
     this.isFirstRender = true;
     this._anchor = guid();
   },
@@ -35,7 +47,7 @@ var MenuItemInternal = {
     };
   },
   mounted: function mounted() {
-    this.itemElement = this.$refs[this._anchor];
+    this.itemElement = this.v3 ? this.kendoAnchorRef : this.$refs[this._anchor];
     var focusedItemId = this.$props.focusedItemId;
     var currentItemId = this.$props.item.id; // If the menu item component has been just mounted due to
     // keyboard navigation and it is the selected one.
@@ -46,26 +58,29 @@ var MenuItemInternal = {
 
     this.isFirstRender = false;
   },
+  watch: {
+    focusedItemId: function focusedItemId(_, oldValue) {
+      this.prevFocusedItemId = oldValue;
+    }
+  },
   updated: function updated() {
     var focusedItemId = this.$props.focusedItemId;
     var currentItemId = this.$props.item.id;
 
-    if (focusedItemId) {// If the item has been navigated to via the keyboard navigation
+    if (focusedItemId) {
+      // If the item has been navigated to via the keyboard navigation
       // (Clicking and focusing an item also come here).
-      // if (prevProps.focusedItemId !== focusedItemId
-      //     && focusedItemId === currentItemId
-      //     // https://github.com/telerik/kendo-react/issues/216 :
-      //     // No need to focus the wrapping menu item DOM element
-      //     // when a child DOM element was clicked.
-      //     && !this.itemElement.contains(document.activeElement)) {
-      //     this.itemElement.focus();
-      // }
+      if (this.prevFocusedItemId !== focusedItemId && focusedItemId === currentItemId // No need to focus the wrapping menu item DOM element
+      // when a child DOM element was clicked.
+      && !this.itemElement.contains(document.activeElement)) {
+        this.itemElement.focus();
+      }
     } else if (document.activeElement === this.itemElement) {
       this.itemElement.blur();
     }
   },
   computed: {
-    currnetItemRender: function currnetItemRender() {
+    currentItemRender: function currentItemRender() {
       return this.$props.item.render || this.$props.itemRender;
     },
     currentLinkRender: function currentLinkRender() {
@@ -85,6 +100,18 @@ var MenuItemInternal = {
         'k-menu-popup': true,
         'k-rtl': this.$props.isDirectionRightToLeft
       });
+    },
+    menuItemClassName: function menuItemClassName() {
+      var _a;
+
+      var item = this.$props.item;
+      return _a = {
+        'k-item': true,
+        'k-menu-item': true,
+        'k-first': isFirstItemFromSiblings(item.id),
+        'k-last': item.isLastFromSiblings,
+        'k-state-disabled': item.disabled
+      }, _a[item.cssClass ? item.cssClass : ''] = item.cssClass, _a;
     }
   },
   // @ts-ignore
@@ -105,20 +132,25 @@ var MenuItemInternal = {
 
     var renderContent = function renderContent() {
       var parentItemId = this.$props.item.contentParentItemId;
+
+      var contentRender = function contentRender(args) {
+        return getTemplate.call(this, {
+          h: h,
+          template: this.contentRender,
+          additionalProps: args
+        });
+      };
+
       return h("div", {
         "class": "k-content",
         role: "presentation",
         attrs: this.v3 ? undefined : {
           role: "presentation"
         }
-      }, [h(this.contentRender, {
+      }, [contentRender.call(this, {
         item: this.handleOriginalItemNeeded(parentItemId),
-        attrs: this.v3 ? undefined : {
-          item: this.handleOriginalItemNeeded(parentItemId),
-          itemId: parentItemId
-        },
         itemId: parentItemId
-      })]);
+      }), h(this.contentRender)]);
     };
 
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
@@ -150,42 +182,39 @@ var MenuItemInternal = {
     var renderMenuItemLink = function renderMenuItemLink() {
       var _this2 = this;
 
-      if (this.currentLinkRender) {
-        return h(this.currentLinkRender, {
-          item: this.$props.onOriginalItemNeeded(item.id),
-          attrs: this.v3 ? undefined : {
-            item: this.$props.onOriginalItemNeeded(item.id),
-            itemId: item.id,
-            opened: this.currentOpened,
-            dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
-          },
+      var defaultItemRender = item.text;
+      var textOrItemRender = getTemplate.call(this, {
+        h: h,
+        template: this.currentItemRender,
+        defaultRendering: defaultItemRender,
+        additionalProps: {
+          item: this.$props.originalItemNeeded(item.id),
+          itemId: item.id,
+          key: '1'
+        }
+      });
+      var defaultLink = // @ts-ignore function children
+      h(MenuItemLink, {
+        url: item.url,
+        attrs: this.v3 ? undefined : {
+          url: item.url,
+          opened: this.currentOpened
+        },
+        opened: this.currentOpened
+      }, this.v3 ? function () {
+        return [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]];
+      } : [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]]);
+      return getTemplate.call(this, {
+        h: h,
+        template: this.currentLinkRender,
+        defaultRendering: defaultLink,
+        additionalProps: {
+          item: this.$props.originalItemNeeded(item.id),
           itemId: item.id,
           opened: this.currentOpened,
           dir: convertBoolDirectionToString(this.$props.isDirectionRightToLeft)
-        });
-      } else {
-        var textOrItemRender = this.currnetItemRender ? h(this.currnetItemRender, {
-          item: this.$props.onOriginalItemNeeded(item.id),
-          attrs: this.v3 ? undefined : {
-            item: this.$props.onOriginalItemNeeded(item.id),
-            itemId: item.id
-          },
-          itemId: item.id,
-          key: "1"
-        }) : item.text;
-        return (// @ts-ignore function children
-          h(MenuItemLink, {
-            url: item.url,
-            attrs: this.v3 ? undefined : {
-              url: item.url,
-              opened: this.currentOpened
-            },
-            opened: this.currentOpened
-          }, this.v3 ? function () {
-            return [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]];
-          } : [[renderMenuIconIfApplicable.call(_this2), textOrItemRender, renderArrowIfApplicable.call(_this2)]])
-        );
-      }
+        }
+      });
     };
 
     var renderPopupIfOpened = function renderPopupIfOpened() {
@@ -229,7 +258,8 @@ var MenuItemInternal = {
               itemRender: _this3.$props.itemRender,
               linkRender: _this3.$props.linkRender,
               isMenuVertical: _this3.$props.isMenuVertical,
-              isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft
+              isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
+              originalItemNeeded: _this3.handleOriginalItemNeeded
             },
             items: _this3.$props.item.items,
             menuGuid: _this3.$props.menuGuid,
@@ -245,18 +275,19 @@ var MenuItemInternal = {
             on: _this3.v3 ? undefined : {
               "mouseover": _this3.handleItemMouseOver,
               "mouseleave": _this3.handleItemMouseLeave,
-              "mousedown": _this3.handleItemMouseDown,
+              "mousedown": _this3.handleMouseDown,
               "blur": _this3.handleItemMouseBlur,
               "focus": _this3.handleItemMouseFocus,
-              "click": _this3.handleItemMouseClick,
-              "originalitemneeded": _this3.handleOriginalItemNeeded
+              "click": _this3.handleClick,
+              "keydown": _this3.handleKeyDown
             },
             onMouseleave: _this3.handleItemMouseLeave,
-            onMousedown: _this3.handleItemMouseDown,
+            onMousedown: _this3.handleMouseDown,
             onBlur: _this3.handleItemMouseBlur,
             onFocus: _this3.handleItemMouseFocus,
-            onClick: _this3.handleItemMouseClick,
-            onOriginalitemneeded: _this3.handleOriginalItemNeeded
+            onClick: _this3.handleClick,
+            onKeydown: _this3.handleKeyDown,
+            originalItemNeeded: _this3.handleOriginalItemNeeded
           })];
         } : [h(MenuItemInternalsList, {
           parentItemId: itemId,
@@ -270,7 +301,8 @@ var MenuItemInternal = {
             itemRender: _this3.$props.itemRender,
             linkRender: _this3.$props.linkRender,
             isMenuVertical: _this3.$props.isMenuVertical,
-            isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft
+            isDirectionRightToLeft: _this3.$props.isDirectionRightToLeft,
+            originalItemNeeded: _this3.handleOriginalItemNeeded
           },
           items: _this3.$props.item.items,
           menuGuid: _this3.$props.menuGuid,
@@ -286,18 +318,19 @@ var MenuItemInternal = {
           on: _this3.v3 ? undefined : {
             "mouseover": _this3.handleItemMouseOver,
             "mouseleave": _this3.handleItemMouseLeave,
-            "mousedown": _this3.handleItemMouseDown,
+            "mousedown": _this3.handleMouseDown,
             "blur": _this3.handleItemMouseBlur,
             "focus": _this3.handleItemMouseFocus,
-            "click": _this3.handleItemMouseClick,
-            "originalitemneeded": _this3.handleOriginalItemNeeded
+            "click": _this3.handleClick,
+            "keydown": _this3.handleKeyDown
           },
           onMouseleave: _this3.handleItemMouseLeave,
-          onMousedown: _this3.handleItemMouseDown,
+          onMousedown: _this3.handleMouseDown,
           onBlur: _this3.handleItemMouseBlur,
           onFocus: _this3.handleItemMouseFocus,
-          onClick: _this3.handleItemMouseClick,
-          onOriginalitemneeded: _this3.handleOriginalItemNeeded
+          onClick: _this3.handleClick,
+          onKeydown: _this3.handleKeyDown,
+          originalItemNeeded: _this3.handleOriginalItemNeeded
         })])
       );
     };
@@ -330,7 +363,8 @@ var MenuItemInternal = {
         },
         "click": function click(event) {
           return _this.handleClick(event, itemId);
-        }
+        },
+        "keydown": this.handleKeyDown
       },
       onMouseleave: this.onMouseLeave,
       onMousedown: function mousedown(event) {
@@ -345,6 +379,7 @@ var MenuItemInternal = {
       onClick: function click(event) {
         return _this.handleClick(event, itemId);
       },
+      onKeydown: this.handleKeyDown,
       role: "menuitem",
       "aria-disabled": item.disabled ? true : undefined,
       "aria-haspopup": item.items.length > 0 ? true : undefined,
@@ -358,24 +393,21 @@ var MenuItemInternal = {
     }, [this.contentRender ? renderContent.call(this) : renderMenuItemLink.call(this), renderPopupIfOpened.call(this)]);
   },
   methods: {
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', event);
+    },
     handleItemMouseOver: function handleItemMouseOver(event) {
       this.$emit('mouseover', event);
     },
     handleItemMouseLeave: function handleItemMouseLeave(event) {
       this.$emit('mouseleave', event);
     },
-    handleItemMouseDown: function handleItemMouseDown(event) {
-      this.$emit('mousedown', event);
-    },
     handleItemMouseBlur: function handleItemMouseBlur(event) {
       this.$emit('blur', event);
     },
     handleItemMouseFocus: function handleItemMouseFocus(event) {
       this.$emit('focus', event);
     },
-    handleItemMouseClick: function handleItemMouseClick(event) {
-      this.$emit('click', event);
-    },
     handleClick: function handleClick(event, itemId) {
       this.$emit('click', event, itemId);
     },
@@ -389,7 +421,7 @@ var MenuItemInternal = {
       this.$emit('mousedown', event);
     },
     handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
-      this.$emit('originalitemneeded', event);
+      this.$props.originalItemNeeded(event);
     },
     onMouseOver: function onMouseOver(event) {
       this.$emit('mouseover', this.$props.item.id);
@@ -398,18 +430,6 @@ var MenuItemInternal = {
     onMouseLeave: function onMouseLeave(event) {
       this.$emit('mouseleave', this.$props.item.id);
       event.stopPropagation();
-    },
-    menuItemClassName: function menuItemClassName() {
-      var _a;
-
-      var item = this.$props.item;
-      return _a = {
-        'k-item': true,
-        'k-menu-item': true,
-        'k-first': isFirstItemFromSiblings(item.id),
-        'k-last': item.isLastFromSiblings,
-        'k-state-disabled': item.disabled
-      }, _a[item.cssClass ? item.cssClass : ''] = item.cssClass, _a;
     }
   }
 };

package/dist/es/menu/components/MenuItemInternalsList.js

@@ -7,6 +7,16 @@ import { getDOMElementId } from './../utils/misc'; // tslint:enable:max-line-len
 
 var MenuItemInternalsList = {
   name: 'KendoMenuItemInternalsList',
+  // @ts-ignore
+  emits: {
+    'keydown': null,
+    'mouseover': null,
+    'mouseleave': null,
+    'blur': null,
+    'focus': null,
+    'click': null,
+    'mousedown': null
+  },
   props: {
     items: Array,
     parentItemId: String,
@@ -17,7 +27,8 @@ var MenuItemInternalsList = {
     linkRender: [String, Object, Function],
     isMenuVertical: Boolean,
     isDirectionRightToLeft: Boolean,
-    menuGuid: String
+    menuGuid: String,
+    originalItemNeeded: Function
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -44,7 +55,8 @@ var MenuItemInternalsList = {
               tabbableItemId: this.$props.tabbableItemId,
               itemRender: this.$props.itemRender,
               linkRender: this.$props.linkRender,
-              menuGuid: this.$props.menuGuid
+              menuGuid: this.$props.menuGuid,
+              originalItemNeeded: this.handleOriginalItemNeeded
             },
             isMenuVertical: this.$props.isMenuVertical,
             isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
@@ -59,17 +71,18 @@ var MenuItemInternalsList = {
               "mouseover": this.handleItemMouseOver,
               "mouseleave": this.handleItemMouseLeave,
               "mousedown": this.handleItemMouseDown,
+              "keydown": this.handleKeyDown,
               "blur": this.handleItemMouseBlur,
               "focus": this.handleItemMouseFocus,
-              "click": this.handleItemMouseClick,
-              "originalitemneeded": this.handleOriginalItemNeeded
+              "click": this.handleItemMouseClick
             },
             onMouseleave: this.handleItemMouseLeave,
             onMousedown: this.handleItemMouseDown,
+            onKeydown: this.handleKeyDown,
             onBlur: this.handleItemMouseBlur,
             onFocus: this.handleItemMouseFocus,
             onClick: this.handleItemMouseClick,
-            onOriginalitemneeded: this.handleOriginalItemNeeded,
+            originalItemNeeded: this.handleOriginalItemNeeded,
             key: index
           })
         );
@@ -92,8 +105,11 @@ var MenuItemInternalsList = {
     }, [renderChildItems.call(this)]);
   },
   methods: {
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', event);
+    },
     handleOriginalItemNeeded: function handleOriginalItemNeeded(event) {
-      this.$emit('originalitemneeded', event);
+      this.$props.originalItemNeeded(event);
     },
     handleItemMouseOver: function handleItemMouseOver(event) {
       this.$emit('mouseover', event);

package/dist/es/menu/utils/prepareInputItemsForInternalWork.d.ts

@@ -2,4 +2,4 @@ import { MenuItemModel } from '../models/MenuItemModel';
 /**
  * @hidden
  */
-export declare function prepareInputItemsForInternalWork(models?: MenuItemModel[]): any;
+export declare function prepareInputItemsForInternalWork(this: any, models?: MenuItemModel[]): any;

package/dist/es/menu/utils/prepareInputItemsForInternalWork.js

@@ -1,3 +1,4 @@
+import { templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { createId, ZERO_LEVEL_ZERO_ITEM_ID } from './itemsIdsUtils';
 /**
  * @hidden
@@ -5,7 +6,7 @@ import { createId, ZERO_LEVEL_ZERO_ITEM_ID } from './itemsIdsUtils';
 export function prepareInputItemsForInternalWork(models) {
     if (models && models.length > 0) {
         return {
-            items: convertInputModelsToInternalOnesHelper(models),
+            items: convertInputModelsToInternalOnesHelper.call(this, models),
             inputItems: models
         };
     }
@@ -35,13 +36,13 @@ function copyInputItemWithoutChildren(inputModel) {
         result.cssStyle = cssStyle;
     }
     if (render !== undefined) {
-        result.render = render;
+        result.render = templateRendering.call(this, render, getListeners.call(this));
     }
     if (linkRender !== undefined) {
-        result.linkRender = linkRender;
+        result.linkRender = templateRendering.call(this, linkRender, getListeners.call(this));
     }
     if (contentRender !== undefined) {
-        result.contentRender = contentRender;
+        result.contentRender = templateRendering.call(this, contentRender, getListeners.call(this));
     }
     if (data !== undefined) {
         result.data = data;
@@ -52,7 +53,7 @@ function convertInputModelsToInternalOnesHelper(inputModels, parentId) {
     var result = [];
     for (var index = 0; index < inputModels.length; index++) {
         var inputModel = inputModels[index];
-        var internalModel = copyInputItemWithoutChildren(inputModel);
+        var internalModel = copyInputItemWithoutChildren.call(this, inputModel);
         internalModel.id = createId(index.toString(), parentId);
         internalModel.isLastFromSiblings = index === inputModels.length - 1;
         internalModel.items = copyOrCreateModelChildren(inputModel, internalModel);
@@ -71,7 +72,7 @@ function copyOrCreateModelChildren(inputModel, internalModel) {
             }];
     }
     else if (inputModel.items) {
-        return convertInputModelsToInternalOnesHelper(inputModel.items, internalModel.id);
+        return convertInputModelsToInternalOnesHelper.call(this, inputModel.items, internalModel.id);
     }
     else {
         return [];

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1634033037,
+    publishDate: 1634279685,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/menu/BaseMenuItemInternalProps.d.ts

@@ -16,5 +16,5 @@ export interface BaseMenuItemInternalProps {
     onFocus?: any;
     onClick?: any;
     onBlur?: any;
-    onOriginalItemNeeded?: any;
+    originalItemNeeded?: any;
 }