@progress/kendo-vue-layout 10.2.0-develop.5 → 10.2.0-develop.6

package/index.d.mts

@@ -44,7 +44,10 @@ export * from './menu/components/Menu.js';
 export * from './menu/components/MenuItemLink.js';
 export * from './menu/components/MenuItemArrow.js';
 export * from './menu/models/MenuItemModel.js';
+export * from './menu/models/MenuItemActionsRenderProps.js';
+export * from './menu/models/MenuItemGroupHeaderRenderProps.js';
 export * from './menu/events.js';
+export type { MenuSize } from './menu/MenuProps.js';
 export * from './contextmenu/ContextMenu.js';
 export * from './splitter/Splitter.js';
 export * from './splitter/SplitterPane.js';

package/index.d.ts

@@ -44,7 +44,10 @@ export * from './menu/components/Menu';
 export * from './menu/components/MenuItemLink';
 export * from './menu/components/MenuItemArrow';
 export * from './menu/models/MenuItemModel';
+export * from './menu/models/MenuItemActionsRenderProps';
+export * from './menu/models/MenuItemGroupHeaderRenderProps';
 export * from './menu/events';
+export type { MenuSize } from './menu/MenuProps';
 export * from './contextmenu/ContextMenu';
 export * from './splitter/Splitter';
 export * from './splitter/SplitterPane';

package/menu/BaseMenuItemInternalProps.d.ts

@@ -5,6 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { MenuSize } from './MenuProps';
 /**
  * @hidden
  */
@@ -14,8 +15,11 @@ export interface BaseMenuItemInternalProps {
     tabbableItemId: string;
     itemRender?: any;
     linkRender?: any;
+    actionsRender?: any;
     isMenuVertical: boolean;
     isDirectionRightToLeft?: boolean;
+    size?: MenuSize;
+    isContextMenu?: boolean;
     menuGuid: string;
     onMouseOver?: any;
     onMouseLeave?: any;

package/menu/MenuProps.d.ts

@@ -7,6 +7,10 @@
  */
 import { MenuItemModel } from './models/MenuItemModel';
 import { MenuSelectEvent } from './events';
+/**
+ * Represents the values of the size property of the Menu.
+ */
+export type MenuSize = 'small' | 'medium' | 'large';
 /**
  * The properties of the [Kendo UI for Vue Menu component]({% slug overview_menu %}).
  */
@@ -43,6 +47,18 @@ export interface MenuProps {
      * A Vue functional or class component which is used for rendering the link of the item ([see example]({% slug rendering_menu %}#toc-links)). The item link is a part of the visual representation of the item which, by default, includes an arrow, icon, and text.
      */
     linkRender?: any;
+    /**
+     * Specifies a component, render function, or slot name for trailing actions on each Menu item.
+     * Receives `{ item, itemId }`. An item-level `actionsRender` overrides this setting.
+     *
+     * @example
+     * ```vue
+     * <Menu :items="items" :actions-render="'actions'">
+     *     <template #actions="{ props }"><kbd>{{ props.item.data?.shortcut }}</kbd></template>
+     * </Menu>
+     * ```
+     */
+    actionsRender?: any;
     /**
      * Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child item acquires a `0_0` id and the second acquires a `0_1` id.
      */
@@ -51,6 +67,25 @@ export interface MenuProps {
      * Adds a custom className to the Menu top element.
      */
     className?: string;
+    /**
+     * Configures the `size` of the Menu. Applies to the root items and to the popup items.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+    *
+    * @example
+    * ```vue
+    * <Menu :items="items" :size="'large'" />
+    * ```
+     */
+    size?: MenuSize;
+    /**
+     * @hidden
+     * Renders the Menu as the root list of a ContextMenu.
+     */
+    contextMenu?: boolean;
     /**
      * Fires when a Menu item is selected.
      */

package/menu/components/Menu.d.ts

@@ -10,7 +10,7 @@ import { PropType } from 'vue';
  * @hidden
  */
 export interface MenuComputed {
-    menuClassName: object;
+    menuClassName: string;
 }
 /**
  * @hidden
@@ -60,10 +60,14 @@ declare const Menu: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: any;
     };
     openOnClick: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    contextMenu: PropType<boolean>;
     onSelect: PropType<(event: import('../events').MenuSelectEvent) => void>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
-    customCloseItemIds: ArrayConstructor;
+    actionsRender: PropType<any>;
+    customCloseItemIds: PropType<string[]>;
+    className: PropType<string>;
 }>, {}, {
     focusedItemId: string;
     hoveredItemId: string;
@@ -105,10 +109,14 @@ declare const Menu: import('vue').DefineComponent<import('vue').ExtractPropTypes
         default: any;
     };
     openOnClick: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    contextMenu: PropType<boolean>;
     onSelect: PropType<(event: import('../events').MenuSelectEvent) => void>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
-    customCloseItemIds: ArrayConstructor;
+    actionsRender: PropType<any>;
+    customCloseItemIds: PropType<string[]>;
+    className: PropType<string>;
 }>> & Readonly<{}>, {
     vertical: boolean;
     hoverOpenDelay: number;

package/menu/components/Menu.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),i=require("@progress/kendo-vue-common"),t=require("../utils/itemsIdsUtils.js"),d=require("../utils/prepareInputItemsForInternalWork.js"),I=require("../utils/getNewItemIdUponKeyboardNavigation.js"),n=require("../utils/hoverDelay.js"),a=require("../utils/DirectionHolder.js"),l=require("../utils/MouseOverHandler.js"),u=require("../../package-metadata.js"),m=require("./MenuItemInternal.js"),h=o.defineComponent({name:"KendoMenu",props:{vertical:{type:Boolean,default:!1},items:Array,dir:String,hoverOpenDelay:{type:Number,default:void 0},hoverCloseDelay:{type:Number,default:void 0},openOnClick:Boolean,onSelect:Function,itemRender:[String,Object,Function],linkRender:[String,Object,Function],customCloseItemIds:Array},created(){i.validatePackage(u.packageMetadata),this.mouseOverHandler=new l.MouseOverHandler(this.$props.openOnClick,this.reset,this.onItemMouseOver),this.guid=i.guid(),this.directionHolder=new a.DirectionHolder,this.inputItems=[],this.currentItems=[]},mounted(){this.isFirstRender=!1,this.menuWrapperEl=i.getRef(this,"menuWrapper")},updated(){this.mouseOverHandler.OpenOnClick=this.$props.openOnClick},unmounted(){this.clearItemHoverAndLeaveRequestsIfApplicable()},data(){return{focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID,isFirstRender:!0}},computed:{menuClassName(){return{"k-widget":!0,"k-reset":!0,"k-header":!0,"k-menu":!0,"k-menu-horizontal":!this.$props.vertical,"k-menu-vertical":this.$props.vertical}}},render(){this.prepareItems(),this.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());let e=this.hoveredItemId?this.hoveredItemId:this.focusedItemId?t.getDirectParentId(this.focusedItemId):t.EMPTY_ID;return o.createVNode("div",{class:this.getMenuWrapperClassName(),ref:i.setRef(this,"menuWrapper")},[o.createVNode(m.MenuItemInternalsList,{class:this.menuClassName,"aria-orientation":this.$props.vertical?"vertical":void 0,items:this.currentItems,isMenuVertical:this.$props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.focusedItemId,lastItemIdToBeOpened:e,tabbableItemId:this.tabbableItemId,itemRender:i.templateRendering.call(this,this.$props.itemRender,i.getListeners.call(this)),linkRender:i.templateRendering.call(this,this.$props.linkRender,i.getListeners.call(this)),menuGuid:this.guid,onMouseleave:this.onItemMouseLeave,onMouseover:this.onItemMouseOver,onMousedown:this.onItemMouseDown,onKeydown:this.onKeyDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,originalItemNeeded:this.getInputItem},null)])},methods:{reset(){this.clearItemHoverAndLeaveRequestsIfApplicable(),this.focusedItemId=t.EMPTY_ID,this.hoveredItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID},onKeyDown(e){if(this.focusedItemId!==t.EMPTY_ID){const s=t.getItemById(this.focusedItemId,this.currentItems),r=I.getNewItemIdUponKeyboardNavigation(this.currentItems,s.id,e.keyCode,e.key,this.$props.vertical,this.directionHolder.getIsDirectionRightToLeft());s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.defaultPrevented&&s.items.length===0&&s.url&&i.isSafeUrl(s.url)&&i.canUseDOM&&window.location.assign(s.url))}},onItemMouseOver(e){this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},n.getHoverOpenDelay({...this.$props})))},onItemMouseLeave(e){this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(t.EMPTY_ID),this.itemLeaveRequest=null},n.getHoverCloseDelay({...this.$props})))},onItemMouseDown(){this.mouseOverHandler.handleItemMouseDown()},onItemFocus(e){this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},onItemClick(e,s){const r=t.getItemById(s,this.currentItems);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.defaultPrevented&&r.url&&i.isSafeUrl(r.url)&&i.canUseDOM&&window.location.assign(r.url))},onItemBlur(e){this.isItemWithDefaultClose(e)&&this.setFocusedItemId(t.EMPTY_ID)},getInputItem(e){return t.getItemById(e,this.inputItems)},setFocusedItemId(e){const s=e===t.EMPTY_ID?this.tabbableItemId:t.getRootParentId(e),r=e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(this.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?this.hoveredItemId:t.EMPTY_ID;this.hoveredItemId=r,this.focusedItemId=e,this.tabbableItemId=s},setHoveredItemId(e){t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(this.focusedItemId)?this.hoveredItemId=e:(this.hoveredItemId=e,this.focusedItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID)},getMenuWrapperClassName(){return{"k-rtl":this.directionHolder.getIsDirectionRightToLeft()}},clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)},isItemWithDefaultClose(e){return!this.$props.customCloseItemIds||this.$props.customCloseItemIds.indexOf(e)===-1},checkIsDirectionRightToLeft(){return this.$props.dir!==void 0?this.$props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl"},prepareItems(){const{items:e,inputItems:s}=d.prepareInputItemsForInternalWork.call(this,this.$props.items);this.currentItems=e,this.inputItems=s},dispatchSelectEventIfWired(e,s){this.$emit("select",{event:e,component:this,item:this.getInputItem(s),itemId:s})}}});exports.Menu=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),i=require("@progress/kendo-vue-common"),t=require("../utils/itemsIdsUtils.js"),a=require("../utils/prepareInputItemsForInternalWork.js"),d=require("../utils/getNewItemIdUponKeyboardNavigation.js"),l=require("../utils/navigableItems.js"),n=require("../utils/hoverDelay.js"),I=require("../utils/DirectionHolder.js"),u=require("../utils/MouseOverHandler.js"),m=require("../../package-metadata.js"),h=require("./MenuItemInternal.js"),c=o.defineComponent({name:"KendoMenu",props:{vertical:{type:Boolean,default:!1},items:Array,dir:String,hoverOpenDelay:{type:Number,default:void 0},hoverCloseDelay:{type:Number,default:void 0},openOnClick:Boolean,size:String,contextMenu:Boolean,onSelect:Function,itemRender:[String,Object,Function],linkRender:[String,Object,Function],actionsRender:[String,Object,Function],customCloseItemIds:Array,className:String},created(){i.validatePackage(m.packageMetadata),this.mouseOverHandler=new u.MouseOverHandler(this.$props.openOnClick,this.reset,this.onItemMouseOver),this.guid=i.guid(),this.directionHolder=new I.DirectionHolder,this.inputItems=[],this.currentItems=[]},mounted(){this.isFirstRender=!1,this.menuWrapperEl=i.getRef(this,"menuWrapper")},updated(){this.mouseOverHandler.OpenOnClick=this.$props.openOnClick},unmounted(){this.clearItemHoverAndLeaveRequestsIfApplicable()},data(){return{focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID,isFirstRender:!0}},computed:{menuClassName(){const e=this.$props.size&&i.kendoThemeMaps.sizeMap[this.$props.size];return this.$props.contextMenu&&this.$props.vertical?i.classNames("k-context-menu","k-menu-group",e&&`k-menu-group-${e}`,this.$props.className):i.classNames({"k-context-menu":!!this.$props.contextMenu,"k-reset":!0,"k-header":!0,"k-menu":!0,"k-menu-horizontal":!this.$props.vertical,"k-menu-vertical":this.$props.vertical,[`k-menu-${e}`]:e},this.$props.className)}},render(){this.prepareItems(),this.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());let e=this.hoveredItemId?this.hoveredItemId:this.focusedItemId?t.getDirectParentId(this.focusedItemId):t.EMPTY_ID;const s=this.tabbableItemId===t.ZERO_LEVEL_ZERO_ITEM_ID?l.getFirstNavigableRootId(this.currentItems):this.tabbableItemId;return o.createVNode("div",{class:this.getMenuWrapperClassName(),ref:i.setRef(this,"menuWrapper")},[o.createVNode(h.MenuItemInternalsList,{class:this.menuClassName,"aria-orientation":this.$props.vertical?"vertical":void 0,items:this.currentItems,isMenuVertical:this.$props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),size:this.$props.size,isContextMenu:!!this.$props.contextMenu,role:this.$props.contextMenu?"menu":void 0,focusedItemId:this.focusedItemId,lastItemIdToBeOpened:e,tabbableItemId:s,itemRender:i.templateRendering.call(this,this.$props.itemRender,i.getListeners.call(this)),linkRender:i.templateRendering.call(this,this.$props.linkRender,i.getListeners.call(this)),actionsRender:i.templateRendering.call(this,this.$props.actionsRender,i.getListeners.call(this)),menuGuid:this.guid,onMouseleave:this.onItemMouseLeave,onMouseover:this.onItemMouseOver,onMousedown:this.onItemMouseDown,onKeydown:this.onKeyDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,originalItemNeeded:this.getInputItem},null)])},methods:{reset(){this.clearItemHoverAndLeaveRequestsIfApplicable(),this.focusedItemId=t.EMPTY_ID,this.hoveredItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID},onKeyDown(e){if(this.focusedItemId!==t.EMPTY_ID){const s=t.getItemById(this.focusedItemId,this.currentItems),r=d.getNewItemIdUponKeyboardNavigation(this.currentItems,s.id,e.keyCode,e.key,this.$props.vertical,this.directionHolder.getIsDirectionRightToLeft());s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===i.Keys.enter||e.keyCode===i.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.defaultPrevented&&s.items.length===0&&s.url&&i.isSafeUrl(s.url)&&i.canUseDOM&&window.location.assign(s.url))}},onItemMouseOver(e){this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},n.getHoverOpenDelay({...this.$props})))},onItemMouseLeave(e){this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(t.EMPTY_ID),this.itemLeaveRequest=null},n.getHoverCloseDelay({...this.$props})))},onItemMouseDown(){this.mouseOverHandler.handleItemMouseDown()},onItemFocus(e){this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},onItemClick(e,s){const r=t.getItemById(s,this.currentItems);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.defaultPrevented&&r.url&&i.isSafeUrl(r.url)&&i.canUseDOM&&window.location.assign(r.url))},onItemBlur(e){this.isItemWithDefaultClose(e)&&this.setFocusedItemId(t.EMPTY_ID)},getInputItem(e){return t.getItemById(e,this.inputItems)},setFocusedItemId(e){const s=e===t.EMPTY_ID?this.tabbableItemId:t.getRootParentId(e),r=e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(this.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?this.hoveredItemId:t.EMPTY_ID;this.hoveredItemId=r,this.focusedItemId=e,this.tabbableItemId=s},setHoveredItemId(e){t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(this.focusedItemId)?this.hoveredItemId=e:(this.hoveredItemId=e,this.focusedItemId=t.EMPTY_ID,this.tabbableItemId=t.ZERO_LEVEL_ZERO_ITEM_ID)},getMenuWrapperClassName(){return{"k-rtl":this.directionHolder.getIsDirectionRightToLeft()}},clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)},isItemWithDefaultClose(e){return!this.$props.customCloseItemIds||this.$props.customCloseItemIds.indexOf(e)===-1},checkIsDirectionRightToLeft(){return this.$props.dir!==void 0?this.$props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl"},prepareItems(){const{items:e,inputItems:s}=a.prepareInputItemsForInternalWork.call(this,this.$props.items);this.currentItems=e,this.inputItems=s},dispatchSelectEventIfWired(e,s){this.$emit("select",{event:e,component:this,item:this.getInputItem(s),itemId:s})}}});exports.Menu=c;

package/menu/components/Menu.mjs

@@ -5,17 +5,18 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as I, createVNode as d } from "vue";
-import { isSafeUrl as m, canUseDOM as l, Keys as a, setRef as c, templateRendering as h, getListeners as u, getRef as p, validatePackage as f, guid as v } from "@progress/kendo-vue-common";
-import { isIdEmptyOrZeroLevel as r, EMPTY_ID as s, ZERO_LEVEL_ZERO_ITEM_ID as o, getRootParentId as b, getItemById as n, getDirectParentId as g } from "../utils/itemsIdsUtils.mjs";
-import { prepareInputItemsForInternalWork as R } from "../utils/prepareInputItemsForInternalWork.mjs";
-import { getNewItemIdUponKeyboardNavigation as H } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
-import { getHoverCloseDelay as O, getHoverOpenDelay as k } from "../utils/hoverDelay.mjs";
-import { DirectionHolder as C } from "../utils/DirectionHolder.mjs";
-import { MouseOverHandler as D } from "../utils/MouseOverHandler.mjs";
-import { packageMetadata as L } from "../../package-metadata.mjs";
-import { MenuItemInternalsList as M } from "./MenuItemInternal.mjs";
-const S = /* @__PURE__ */ I({
+import { defineComponent as p, createVNode as m } from "vue";
+import { isSafeUrl as l, canUseDOM as h, Keys as u, setRef as c, templateRendering as n, getListeners as a, kendoThemeMaps as f, classNames as I, getRef as v, validatePackage as b, guid as g } from "@progress/kendo-vue-common";
+import { isIdEmptyOrZeroLevel as r, EMPTY_ID as s, ZERO_LEVEL_ZERO_ITEM_ID as o, getRootParentId as R, getItemById as d, getDirectParentId as k } from "../utils/itemsIdsUtils.mjs";
+import { prepareInputItemsForInternalWork as M } from "../utils/prepareInputItemsForInternalWork.mjs";
+import { getNewItemIdUponKeyboardNavigation as O } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
+import { getFirstNavigableRootId as H } from "../utils/navigableItems.mjs";
+import { getHoverCloseDelay as $, getHoverOpenDelay as C } from "../utils/hoverDelay.mjs";
+import { DirectionHolder as D } from "../utils/DirectionHolder.mjs";
+import { MouseOverHandler as L } from "../utils/MouseOverHandler.mjs";
+import { packageMetadata as y } from "../../package-metadata.mjs";
+import { MenuItemInternalsList as w } from "./MenuItemInternal.mjs";
+const K = /* @__PURE__ */ p({
   name: "KendoMenu",
   props: {
     vertical: {
@@ -33,16 +34,20 @@ const S = /* @__PURE__ */ I({
       default: void 0
     },
     openOnClick: Boolean,
+    size: String,
+    contextMenu: Boolean,
     onSelect: Function,
     itemRender: [String, Object, Function],
     linkRender: [String, Object, Function],
-    customCloseItemIds: Array
+    actionsRender: [String, Object, Function],
+    customCloseItemIds: Array,
+    className: String
   },
   created() {
-    f(L), this.mouseOverHandler = new D(this.$props.openOnClick, this.reset, this.onItemMouseOver), this.guid = v(), this.directionHolder = new C(), this.inputItems = [], this.currentItems = [];
+    b(y), this.mouseOverHandler = new L(this.$props.openOnClick, this.reset, this.onItemMouseOver), this.guid = g(), this.directionHolder = new D(), this.inputItems = [], this.currentItems = [];
   },
   mounted() {
-    this.isFirstRender = !1, this.menuWrapperEl = p(this, "menuWrapper");
+    this.isFirstRender = !1, this.menuWrapperEl = v(this, "menuWrapper");
   },
   updated() {
     this.mouseOverHandler.OpenOnClick = this.$props.openOnClick;
@@ -60,33 +65,40 @@ const S = /* @__PURE__ */ I({
   },
   computed: {
     menuClassName() {
-      return {
-        "k-widget": !0,
+      const e = this.$props.size && f.sizeMap[this.$props.size];
+      return this.$props.contextMenu && this.$props.vertical ? I("k-context-menu", "k-menu-group", e && `k-menu-group-${e}`, this.$props.className) : I({
+        "k-context-menu": !!this.$props.contextMenu,
         "k-reset": !0,
         "k-header": !0,
         "k-menu": !0,
         "k-menu-horizontal": !this.$props.vertical,
-        "k-menu-vertical": this.$props.vertical
-      };
+        "k-menu-vertical": this.$props.vertical,
+        [`k-menu-${e}`]: e
+      }, this.$props.className);
     }
   },
   render() {
     this.prepareItems(), this.isFirstRender || this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
-    let e = this.hoveredItemId ? this.hoveredItemId : this.focusedItemId ? g(this.focusedItemId) : s;
-    return d("div", {
+    let e = this.hoveredItemId ? this.hoveredItemId : this.focusedItemId ? k(this.focusedItemId) : s;
+    const t = this.tabbableItemId === o ? H(this.currentItems) : this.tabbableItemId;
+    return m("div", {
       class: this.getMenuWrapperClassName(),
       ref: c(this, "menuWrapper")
-    }, [d(M, {
+    }, [m(w, {
       class: this.menuClassName,
       "aria-orientation": this.$props.vertical ? "vertical" : void 0,
       items: this.currentItems,
       isMenuVertical: this.$props.vertical,
       isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(),
+      size: this.$props.size,
+      isContextMenu: !!this.$props.contextMenu,
+      role: this.$props.contextMenu ? "menu" : void 0,
       focusedItemId: this.focusedItemId,
       lastItemIdToBeOpened: e,
-      tabbableItemId: this.tabbableItemId,
-      itemRender: h.call(this, this.$props.itemRender, u.call(this)),
-      linkRender: h.call(this, this.$props.linkRender, u.call(this)),
+      tabbableItemId: t,
+      itemRender: n.call(this, this.$props.itemRender, a.call(this)),
+      linkRender: n.call(this, this.$props.linkRender, a.call(this)),
+      actionsRender: n.call(this, this.$props.actionsRender, a.call(this)),
       menuGuid: this.guid,
       onMouseleave: this.onItemMouseLeave,
       onMouseover: this.onItemMouseOver,
@@ -104,21 +116,21 @@ const S = /* @__PURE__ */ I({
     },
     onKeyDown(e) {
       if (this.focusedItemId !== s) {
-        const t = n(this.focusedItemId, this.currentItems), i = H(this.currentItems, t.id, e.keyCode, e.key, this.$props.vertical, this.directionHolder.getIsDirectionRightToLeft());
-        t.id !== i && (e.preventDefault(), this.setFocusedItemId(i)), (e.keyCode === a.enter || e.keyCode === a.space) && !t.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, t.id), !e.defaultPrevented && t.items.length === 0 && t.url && m(t.url) && l && window.location.assign(t.url));
+        const t = d(this.focusedItemId, this.currentItems), i = O(this.currentItems, t.id, e.keyCode, e.key, this.$props.vertical, this.directionHolder.getIsDirectionRightToLeft());
+        t.id !== i && (e.preventDefault(), this.setFocusedItemId(i)), (e.keyCode === u.enter || e.keyCode === u.space) && !t.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, t.id), !e.defaultPrevented && t.items.length === 0 && t.url && l(t.url) && h && window.location.assign(t.url));
       }
     },
     onItemMouseOver(e) {
       this.mouseOverHandler.IsMouseOverEnabled && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
         this.setHoveredItemId(e), this.itemHoverRequest = null;
-      }, k({
+      }, C({
         ...this.$props
       })));
     },
     onItemMouseLeave(e) {
       this.mouseOverHandler.IsMouseOverEnabled && this.isItemWithDefaultClose(e) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemLeaveRequest = window.setTimeout(() => {
         this.setHoveredItemId(s), this.itemLeaveRequest = null;
-      }, O({
+      }, $({
         ...this.$props
       })));
     },
@@ -129,17 +141,17 @@ const S = /* @__PURE__ */ I({
       this.setFocusedItemId(e), this.mouseOverHandler.handleItemFocus();
     },
     onItemClick(e, t) {
-      const i = n(t, this.currentItems);
-      i.disabled || (this.setFocusedItemId(t), this.mouseOverHandler.handleItemClick(t, this.isItemWithDefaultClose(t)), this.dispatchSelectEventIfWired(e, t), !e.defaultPrevented && i.url && m(i.url) && l && window.location.assign(i.url));
+      const i = d(t, this.currentItems);
+      i.disabled || (this.setFocusedItemId(t), this.mouseOverHandler.handleItemClick(t, this.isItemWithDefaultClose(t)), this.dispatchSelectEventIfWired(e, t), !e.defaultPrevented && i.url && l(i.url) && h && window.location.assign(i.url));
     },
     onItemBlur(e) {
       this.isItemWithDefaultClose(e) && this.setFocusedItemId(s);
     },
     getInputItem(e) {
-      return n(e, this.inputItems);
+      return d(e, this.inputItems);
     },
     setFocusedItemId(e) {
-      const t = e === s ? this.tabbableItemId : b(e), i = e === s || r(this.hoveredItemId) && r(e) ? this.hoveredItemId : s;
+      const t = e === s ? this.tabbableItemId : R(e), i = e === s || r(this.hoveredItemId) && r(e) ? this.hoveredItemId : s;
       this.hoveredItemId = i, this.focusedItemId = e, this.tabbableItemId = t;
     },
     setHoveredItemId(e) {
@@ -163,7 +175,7 @@ const S = /* @__PURE__ */ I({
       const {
         items: e,
         inputItems: t
-      } = R.call(this, this.$props.items);
+      } = M.call(this, this.$props.items);
       this.currentItems = e, this.inputItems = t;
     },
     dispatchSelectEventIfWired(e, t) {
@@ -177,5 +189,5 @@ const S = /* @__PURE__ */ I({
   }
 });
 export {
-  S as Menu
+  K as Menu
 };

package/menu/components/MenuItemInternal.d.ts

@@ -20,10 +20,12 @@ export interface MenuItemInternalProps extends BaseMenuItemInternalProps {
 export interface MenuItemInternalComputed {
     currentItemRender: any;
     currentLinkRender: any;
+    currentActionsRender: any;
     contentRender: any;
     currentOpened: boolean;
     currentFocused: boolean;
     popupClassName: string;
+    popupListClassName: string;
     menuItemClassName: object;
     hasItems: boolean;
 }
@@ -37,8 +39,11 @@ declare const MenuItemInternal: import('vue').DefineComponent<import('vue').Extr
     tabbableItemId: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     isMenuVertical: PropType<boolean>;
     isDirectionRightToLeft: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    isContextMenu: PropType<boolean>;
     menuGuid: PropType<string>;
     originalItemNeeded: PropType<any>;
 }>, {}, {
@@ -47,16 +52,16 @@ declare const MenuItemInternal: import('vue').DefineComponent<import('vue').Extr
     hasItems(): boolean;
     currentItemRender(): any;
     currentLinkRender(): any;
+    currentActionsRender(): any;
     contentRender(): any;
     currentOpened(): boolean;
     currentFocused(): boolean;
     popupClassName(): string;
+    popupListClassName(): string;
     menuItemClassName(): {
         [x: number]: any;
         'k-item': boolean;
         'k-menu-item': boolean;
-        'k-first': boolean;
-        'k-last': any;
         'k-disabled': any;
     };
 }, {
@@ -72,6 +77,7 @@ declare const MenuItemInternal: import('vue').DefineComponent<import('vue').Extr
     handleOriginalItemNeeded(event: any): any;
     onMouseOver(event: any): void;
     onMouseLeave(event: any): void;
+    handlePopupMouseDown(event: MouseEvent): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     keydown: any;
     mouseover: any;
@@ -87,8 +93,11 @@ declare const MenuItemInternal: import('vue').DefineComponent<import('vue').Extr
     tabbableItemId: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     isMenuVertical: PropType<boolean>;
     isDirectionRightToLeft: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    isContextMenu: PropType<boolean>;
     menuGuid: PropType<string>;
     originalItemNeeded: PropType<any>;
 }>> & Readonly<{
@@ -105,6 +114,7 @@ declare const MenuItemInternal: import('vue').DefineComponent<import('vue').Extr
  */
 export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
     items: MenuItemInternalModel[];
+    role?: string;
     parentItemId?: string;
 }
 /**
@@ -121,8 +131,12 @@ declare const MenuItemInternalsList: import('vue').DefineComponent<import('vue')
     tabbableItemId: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     isMenuVertical: PropType<boolean>;
     isDirectionRightToLeft: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    isContextMenu: PropType<boolean>;
+    role: PropType<string>;
     menuGuid: PropType<string>;
     originalItemNeeded: PropType<any>;
 }>, {}, {}, {}, {
@@ -134,8 +148,6 @@ declare const MenuItemInternalsList: import('vue').DefineComponent<import('vue')
     handleItemMouseBlur(event: any): void;
     handleItemMouseFocus(event: any): void;
     handleItemMouseClick(event: any, itemId: string): void;
-    onMouseOver(event: any): void;
-    onMouseLeave(event: any): void;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     keydown: any;
     mouseover: any;
@@ -155,8 +167,12 @@ declare const MenuItemInternalsList: import('vue').DefineComponent<import('vue')
     tabbableItemId: PropType<string>;
     itemRender: PropType<any>;
     linkRender: PropType<any>;
+    actionsRender: PropType<any>;
     isMenuVertical: PropType<boolean>;
     isDirectionRightToLeft: PropType<boolean>;
+    size: PropType<import('../MenuProps').MenuSize>;
+    isContextMenu: PropType<boolean>;
+    role: PropType<string>;
     menuGuid: PropType<string>;
     originalItemNeeded: PropType<any>;
 }>> & Readonly<{

package/menu/components/MenuItemInternal.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),N=require("@progress/kendo-vue-popup"),p=require("../utils/itemsIdsUtils.js"),l=require("../utils/misc.js"),F=require("./MenuItemLink.js"),L=require("./MenuItemArrow.js"),c=n.defineComponent({name:"KendoMenuItemInternal",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{item:Object,focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},created(){this.itemElement=null,this.prevFocusedItemId=this.$props.focusedItemId,this.isFirstRender=!0,this._anchor=s.guid()},data(){return{opened:!1}},mounted(){this.itemElement=s.getRef(this,"kendoAnchor");const e=this.$props.focusedItemId,t=this.$props.item.id;e&&e===t&&this.itemElement&&this.itemElement.focus(),this.isFirstRender=!1},watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t}},updated(){const e=this.$props.focusedItemId,t=this.$props.item.id;e?this.prevFocusedItemId!==e&&e===t&&!this.itemElement.contains(document.activeElement)&&this.itemElement.focus():document.activeElement===this.itemElement&&this.itemElement.blur()},computed:{hasItems(){return this.$props.item.items.length>0},currentItemRender(){return this.$props.item.render||this.$props.itemRender},currentLinkRender(){return this.$props.item.linkRender||this.$props.linkRender},contentRender(){return this.$props.item.contentParentItemId?this.$props.item.contentRender:null},currentOpened(){const e=this.$props;return this.hasItems&&p.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender},currentFocused(){const e=this.$props.focusedItemId,t=this.$props.item.id;return e===t},popupClassName(){return s.classNames({"k-menu-popup":!0,"k-overflow-visible":!0,"k-rtl":this.$props.isDirectionRightToLeft,[this.item.popupClass]:this.item.popupClass})},menuItemClassName(){const e=this.$props.item;return{"k-item":!0,"k-menu-item":!0,"k-first":p.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled,[e.cssClass?e.cssClass:""]:e.cssClass}}},render(){const{icon:e,svgIcon:t,id:r,contentParentItemId:m,items:y,text:a,cssStyle:f,disabled:$,url:g,separator:M}=this.$props.item,o=r,k=function(){const i=m,d=function(u){return s.getTemplate.call(this,{h:n.h,template:this.contentRender,additionalProps:u})};return n.createVNode("div",{class:"k-content",role:"presentation"},[d.call(this,{item:this.handleOriginalItemNeeded(i),itemId:i})])},b=function(){return e||t?n.createVNode(s.Icon,{name:s.getIconName(e),icon:t},null):null},v=function(){return this.hasItems?n.createVNode(L.MenuItemArrow,{itemId:r,verticalMenu:this.$props.isMenuVertical,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},h=this.$props.originalItemNeeded(r),R=function(){const i=n.createVNode("span",{class:"k-menu-link-text"},[a]),d=s.getTemplate.call(this,{h:n.h,template:this.currentItemRender,defaultRendering:i,additionalProps:{item:h,itemId:r,key:"1"}}),u=n.createVNode(F.MenuItemLink,{url:g,opened:this.currentOpened,focused:this.currentFocused},{default:()=>[[b.call(this),d,v.call(this)]]});return s.getTemplate.call(this,{h:n.h,template:this.currentLinkRender,defaultRendering:u,additionalProps:{item:h,itemId:r,opened:this.currentOpened,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},O=function(){const{anchorAlign:i,popupAlign:d,collision:u}=l.getPopupSettings(o,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return n.createVNode(N.Popup,{anchor:this._anchor,show:this.currentOpened,popupClass:this.popupClassName,anchorAlign:i,popupAlign:d,collision:u,animate:!1,key:"1"},{default:()=>[n.createVNode(I,{parentItemId:o,items:this.$props.item.items,menuGuid:this.$props.menuGuid,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,class:"k-group k-menu-group k-menu-group-md k-reset",onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleMouseDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleClick,onKeydown:this.handleKeyDown,originalItemNeeded:this.handleOriginalItemNeeded},null)]})},w=n.createVNode("li",{class:"k-separator k-item","aria-hidden":!0,key:o},null);return M?w:n.createVNode("li",{class:this.menuItemClassName,style:f,tabindex:o===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:i=>this.handleMouseDown(i),onFocusout:()=>this.handleBlur(o),onFocusin:()=>this.handleFocus(o),onClick:i=>this.handleClick(i,o),onKeydown:this.handleKeyDown,role:"menuitem","aria-disabled":$?!0:void 0,"aria-haspopup":this.hasItems?!0:void 0,"aria-expanded":this.hasItems?this.currentOpened:void 0,"aria-label":a,"aria-owns":this.currentOpened?l.getDOMElementId(this.$props.menuGuid,o):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?k.call(this):R.call(this),O.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleClick(e,t){this.$emit("click",e,t)},handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},handleMouseDown(e){this.$emit("mousedown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},onMouseOver(e){this.$emit("mouseover",this.$props.item.id),e.stopPropagation()},onMouseLeave(e){this.$emit("mouseleave",this.$props.item.id),e.stopPropagation()}}}),I=n.defineComponent({name:"KendoMenuItemInternalsList",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{items:Array,parentItemId:{type:String,default:void 0},focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},render(){const e=this.$props.parentItemId,t=function(){return this.$props.items.length>0?this.$props.items.map(function(r,m){return n.createVNode(c,{item:r,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,menuGuid:this.$props.menuGuid,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleItemMouseDown,onKeydown:this.handleKeyDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleItemMouseClick,originalItemNeeded:this.handleOriginalItemNeeded,key:m},null)},this):null};return n.createVNode("ul",{role:e!==void 0?"menu":"menubar",id:e!==void 0?l.getDOMElementId(this.$props.menuGuid,e):void 0},[t.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseDown(e){this.$emit("mousedown",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleItemMouseClick(e,t){this.$emit("click",e,t)},onMouseOver(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseover",this.$props.parentItemId),e.stopPropagation())},onMouseLeave(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseleave",this.$props.parentItemId),e.stopPropagation())}}});exports.MenuItemInternal=c;exports.MenuItemInternalsList=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),s=require("@progress/kendo-vue-common"),F=require("@progress/kendo-vue-popup"),h=require("../utils/itemsIdsUtils.js"),u=require("../utils/misc.js"),T=require("./MenuItemLink.js"),S=require("./MenuItemArrow.js"),M=t.defineComponent({name:"KendoMenuItemInternal",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{item:Object,focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],actionsRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,size:String,isContextMenu:Boolean,menuGuid:String,originalItemNeeded:Function},created(){this.itemElement=null,this.prevFocusedItemId=this.$props.focusedItemId,this.isFirstRender=!0,this._anchor=s.guid()},data(){return{opened:!1}},mounted(){this.itemElement=s.getRef(this,"kendoAnchor");const e=this.$props.focusedItemId,n=this.$props.item.id;e&&e===n&&this.itemElement&&this.itemElement.focus(),this.isFirstRender=!1},watch:{focusedItemId:function(e,n){this.prevFocusedItemId=n}},updated(){const e=this.$props.focusedItemId,n=this.$props.item.id;e?this.prevFocusedItemId!==e&&e===n&&!this.itemElement.contains(document.activeElement)&&this.itemElement.focus():document.activeElement===this.itemElement&&this.itemElement.blur()},computed:{hasItems(){return this.$props.item.items.length>0},currentItemRender(){return this.$props.item.render||this.$props.itemRender},currentLinkRender(){return this.$props.item.linkRender||this.$props.linkRender},currentActionsRender(){return this.$props.item.actionsRender||this.$props.actionsRender},contentRender(){return this.$props.item.contentParentItemId?this.$props.item.contentRender:null},currentOpened(){const e=this.$props;return this.hasItems&&h.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender},currentFocused(){const e=this.$props.focusedItemId,n=this.$props.item.id;return e===n},popupClassName(){return s.classNames({"k-menu-popup":!0,"k-overflow-visible":!0,"k-rtl":this.$props.isDirectionRightToLeft,[this.item.popupClass]:this.item.popupClass})},popupListClassName(){return s.classNames("k-menu-group",this.$props.size&&`k-menu-group-${s.kendoThemeMaps.sizeMap[this.$props.size]}`)},menuItemClassName(){const e=this.$props.item;return{"k-item":!0,"k-menu-item":!0,"k-disabled":e.disabled,[e.cssClass?e.cssClass:""]:e.cssClass}}},render(){const{icon:e,svgIcon:n,id:r,contentParentItemId:a,items:P,text:I,description:$,cssStyle:m,disabled:f,url:R,separator:b,groupHeader:v,cssClass:g}=this.$props.item,i=r,p=u.getDOMElementId(this.$props.menuGuid,i);if(b)return t.createVNode("li",{id:p,class:s.classNames("k-separator","k-item",g),style:m,"aria-hidden":!0,key:i},null);if(v){if(!(!h.isIdZeroLevel(i)||!!this.$props.isContextMenu&&!!this.$props.isMenuVertical))return null;const l=this.$props.item.groupHeaderRender,d=l?s.getTemplate.call(this,{h:t.h,template:l,additionalProps:{item:this.$props.originalItemNeeded(i),itemId:i}}):t.createVNode(t.Fragment,null,[e||n?t.createVNode(s.Icon,{class:"k-menu-link-icon",name:s.getIconName(e),icon:n},null):null,t.createVNode("span",{class:"k-menu-link-text"},[I])]);return t.createVNode("li",{id:p,class:s.classNames("k-menu-group-header",g),style:m,role:"presentation",onMousedown:B=>B.preventDefault(),key:i},[d])}const N=!!f&&(!h.isIdZeroLevel(i)||!!this.$props.isContextMenu),O=function(){const o=a,l=function(d){return s.getTemplate.call(this,{h:t.h,template:this.contentRender,additionalProps:d})};return t.createVNode("div",{class:"k-content",role:"presentation"},[l.call(this,{item:this.handleOriginalItemNeeded(o),itemId:o})])},w=function(){return e||n?t.createVNode(s.Icon,{class:"k-menu-link-icon",name:s.getIconName(e),icon:n},null):null},C=function(){return this.hasItems?t.createVNode(S.MenuItemArrow,{itemId:r,verticalMenu:this.$props.isMenuVertical,dir:u.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},D=function(){return $&&!this.currentItemRender?t.createVNode("span",{class:"k-menu-link-description",key:"3"},[$]):null},c=this.$props.originalItemNeeded(r),L=function(){const o=s.getTemplate.call(this,{h:t.h,template:this.currentActionsRender,additionalProps:{item:c,itemId:r}});return u.hasRenderableContent(o)?t.createVNode("span",{class:"k-menu-link-actions",key:"4"},[o]):null},y=function(){const o=t.createVNode("span",{class:"k-menu-link-text"},[I]),l=s.getTemplate.call(this,{h:t.h,template:this.currentItemRender,defaultRendering:o,additionalProps:{item:c,itemId:r,key:"1"}}),d=t.createVNode(T.MenuItemLink,{url:R,opened:this.currentOpened,focused:this.currentFocused,disabled:N},{default:()=>[[w.call(this),l,L.call(this),C.call(this),D.call(this)]]});return s.getTemplate.call(this,{h:t.h,template:this.currentLinkRender,defaultRendering:d,additionalProps:{item:c,itemId:r,opened:this.currentOpened,dir:u.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},V=function(){const{anchorAlign:o,popupAlign:l,collision:d}=u.getPopupSettings(i,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return t.createVNode(F.Popup,t.mergeProps({anchor:this._anchor,show:this.currentOpened,popupClass:this.popupClassName,anchorAlign:o,popupAlign:l,collision:d,animate:!1},{onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:this.handlePopupMouseDown},{key:"1"}),{default:()=>[t.createVNode(k,{parentItemId:i,items:this.$props.item.items,menuGuid:this.$props.menuGuid,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,actionsRender:this.$props.actionsRender,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,size:this.$props.size,isContextMenu:this.$props.isContextMenu,class:this.popupListClassName,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleMouseDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleClick,onKeydown:this.handleKeyDown,originalItemNeeded:this.handleOriginalItemNeeded},null)]})};return t.createVNode("li",{id:p,class:this.menuItemClassName,style:m,tabindex:i===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:o=>this.handleMouseDown(o),onFocusout:()=>this.handleBlur(i),onFocusin:()=>this.handleFocus(i),onClick:o=>this.handleClick(o,i),onKeydown:this.handleKeyDown,role:"menuitem","aria-disabled":f?!0:void 0,"aria-haspopup":this.hasItems?"menu":void 0,"aria-expanded":this.hasItems?this.currentOpened:void 0,"aria-controls":this.currentOpened?u.getDOMPopupListId(this.$props.menuGuid,i):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?O.call(this):y.call(this),V.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleClick(e,n){this.$emit("click",e,n)},handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},handleMouseDown(e){this.$emit("mousedown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},onMouseOver(e){this.$emit("mouseover",this.$props.item.id),e.stopPropagation()},onMouseLeave(e){this.$emit("mouseleave",this.$props.item.id),e.stopPropagation()},handlePopupMouseDown(e){e.target.closest(".k-menu-item, .k-content")||e.preventDefault()}}}),k=t.defineComponent({name:"KendoMenuItemInternalsList",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{items:Array,parentItemId:{type:String,default:void 0},focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],actionsRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,size:String,isContextMenu:Boolean,role:String,menuGuid:String,originalItemNeeded:Function},render(){const e=this.$props.parentItemId,n=function(){return this.$props.items.length>0?this.$props.items.map(function(r,a){return t.createVNode(M,{item:r,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,size:this.$props.size,isContextMenu:this.$props.isContextMenu,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,actionsRender:this.$props.actionsRender,menuGuid:this.$props.menuGuid,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleItemMouseDown,onKeydown:this.handleKeyDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleItemMouseClick,originalItemNeeded:this.handleOriginalItemNeeded,key:a},null)},this):null};return t.createVNode("ul",{role:this.$props.role||(e!==void 0?"menu":"menubar"),id:e!==void 0?u.getDOMPopupListId(this.$props.menuGuid,e):void 0},[n.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseDown(e){this.$emit("mousedown",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleItemMouseClick(e,n){this.$emit("click",e,n)}}});exports.MenuItemInternal=M;exports.MenuItemInternalsList=k;