@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/index.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./tabstrip/TabStrip.js"),i=require("./tabstrip/TabStripContent.js"),a=require("./tabstrip/TabStripNavigation.js"),n=require("./tabstrip/TabStripNavigationItem.js"),o=require("./tabstrip/TabStripTab.js"),c=require("./card/Card.js"),u=require("./card/CardHeader.js"),s=require("./card/CardTitle.js"),p=require("./card/CardBody.js"),S=require("./card/CardActions.js"),d=require("./card/CardImage.js"),l=require("./card/CardSubtitle.js"),q=require("./card/CardFooter.js"),C=require("./card/Avatar.js"),A=require("./drawer/Drawer.js"),I=require("./drawer/DrawerNavigation.js"),m=require("./drawer/DrawerContent.js"),b=require("./drawer/DrawerItem.js"),g=require("./stepper/Stepper.js"),T=require("./stepper/Step.js"),B=require("./menu/components/Menu.js"),h=require("./menu/components/MenuItemLink.js"),t=require("./menu/components/MenuItemArrow.js"),w=require("./splitter/Splitter.js"),v=require("./splitter/SplitterPane.js"),y=require("./panelbar/PanelBar.js"),P=require("./panelbar/PanelBarItem.js"),e=require("./panelbar/util.js"),L=require("./tilelayout/TileLayout.js"),N=require("./appbar/AppBar.js"),D=require("./appbar/AppBarSection.js"),M=require("./appbar/AppBarSpacer.js"),f=require("./bottomnavigation/BottomNavigation.js"),E=require("./bottomnavigation/BottomNavigationItem.js"),F=require("./gridlayout/GridLayout.js"),k=require("./gridlayout/GridLayoutItem.js"),x=require("./actionsheet/ActionSheet.js"),G=require("./actionsheet/ActionSheetItem.js"),H=require("./actionsheet/ActionSheetHeader.js"),V=require("./actionsheet/ActionSheetContent.js"),j=require("./actionsheet/ActionSheetFooter.js"),O=require("./stacklayout/StackLayout.js"),z=require("./expansionpanel/ExpansionPanel.js"),J=require("./expansionpanel/ExpansionPanelContent.js");exports.TabStrip=r.TabStrip;exports.TabStripContent=i.TabStripContent;exports.TabStripNavigation=a.TabStripNavigation;exports.TabStripNavigationItem=n.TabStripNavigationItem;exports.TabStripTab=o.TabStripTab;exports.Card=c.Card;exports.CardHeader=u.CardHeader;exports.CardTitle=s.CardTitle;exports.CardBody=p.CardBody;exports.CardActions=S.CardActions;exports.CardImage=d.CardImage;exports.CardSubtitle=l.CardSubtitle;exports.CardFooter=q.CardFooter;exports.Avatar=C.Avatar;exports.Drawer=A.Drawer;exports.DrawerNavigation=I.DrawerNavigation;exports.DrawerContent=m.DrawerContent;exports.DrawerItem=b.DrawerItem;exports.Stepper=g.Stepper;exports.Step=T.Step;exports.Menu=B.Menu;exports.MenuItemLink=h.MenuItemLink;exports.MenuItemArrow=t.MenuItemArrow;exports.downArrowIcon=t.downArrowIcon;exports.leftArrowIcon=t.leftArrowIcon;exports.rightArrowIcon=t.rightArrowIcon;exports.Splitter=w.Splitter;exports.SplitterPane=v.SplitterPane;exports.PanelBar=y.PanelBar;exports.PanelBarItem=P.PanelBarItem;exports.flatChildren=e.flatChildren;exports.flatVisibleChildren=e.flatVisibleChildren;exports.flatVisibleItems=e.flatVisibleItems;exports.getFirstId=e.getFirstId;exports.getInitialState=e.getInitialState;exports.isArrayEqual=e.isArrayEqual;exports.isPresent=e.isPresent;exports.renderChildren=e.renderChildren;exports.TileLayout=L.TileLayout;exports.AppBar=N.AppBar;exports.AppBarSection=D.AppBarSection;exports.AppBarSpacer=M.AppBarSpacer;exports.BottomNavigation=f.BottomNavigation;exports.BottomNavigationItem=E.BottomNavigationItem;exports.GridLayout=F.GridLayout;exports.GridLayoutItem=k.GridLayoutItem;exports.ActionSheet=x.ActionSheet;exports.ActionSheetItem=G.ActionSheetItem;exports.ActionSheetHeader=H.ActionSheetHeader;exports.ActionSheetContent=V.ActionSheetContent;exports.ActionSheetFooter=j.ActionSheetFooter;exports.StackLayout=O.StackLayout;exports.ExpansionPanel=z.ExpansionPanel;exports.ExpansionPanelContent=J.ExpansionPanelContent;

package/index.mjs

@@ -0,0 +1,107 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TabStrip as t } from "./tabstrip/TabStrip.mjs";
+import { TabStripContent as p } from "./tabstrip/TabStripContent.mjs";
+import { TabStripNavigation as m } from "./tabstrip/TabStripNavigation.mjs";
+import { TabStripNavigationItem as x } from "./tabstrip/TabStripNavigationItem.mjs";
+import { TabStripTab as n } from "./tabstrip/TabStripTab.mjs";
+import { Card as d } from "./card/Card.mjs";
+import { CardHeader as A } from "./card/CardHeader.mjs";
+import { CardTitle as I } from "./card/CardTitle.mjs";
+import { CardBody as s } from "./card/CardBody.mjs";
+import { CardActions as g } from "./card/CardActions.mjs";
+import { CardImage as u } from "./card/CardImage.mjs";
+import { CardSubtitle as B } from "./card/CardSubtitle.mjs";
+import { CardFooter as v } from "./card/CardFooter.mjs";
+import { Avatar as P } from "./card/Avatar.mjs";
+import { Drawer as N } from "./drawer/Drawer.mjs";
+import { DrawerNavigation as E } from "./drawer/DrawerNavigation.mjs";
+import { DrawerContent as M } from "./drawer/DrawerContent.mjs";
+import { DrawerItem as G } from "./drawer/DrawerItem.mjs";
+import { Stepper as V } from "./stepper/Stepper.mjs";
+import { Step as j } from "./stepper/Step.mjs";
+import { Menu as J } from "./menu/components/Menu.mjs";
+import { MenuItemLink as O } from "./menu/components/MenuItemLink.mjs";
+import { MenuItemArrow as R, downArrowIcon as U, leftArrowIcon as W, rightArrowIcon as X } from "./menu/components/MenuItemArrow.mjs";
+import { Splitter as Z } from "./splitter/Splitter.mjs";
+import { SplitterPane as $ } from "./splitter/SplitterPane.mjs";
+import { PanelBar as or } from "./panelbar/PanelBar.mjs";
+import { PanelBarItem as er } from "./panelbar/PanelBarItem.mjs";
+import { flatChildren as ar, flatVisibleChildren as mr, flatVisibleItems as fr, getFirstId as xr, getInitialState as ir, isArrayEqual as nr, isPresent as lr, renderChildren as dr } from "./panelbar/util.mjs";
+import { TileLayout as Ar } from "./tilelayout/TileLayout.mjs";
+import { AppBar as Ir } from "./appbar/AppBar.mjs";
+import { AppBarSection as sr } from "./appbar/AppBarSection.mjs";
+import { AppBarSpacer as gr } from "./appbar/AppBarSpacer.mjs";
+import { BottomNavigation as ur } from "./bottomnavigation/BottomNavigation.mjs";
+import { BottomNavigationItem as Br } from "./bottomnavigation/BottomNavigationItem.mjs";
+import { GridLayout as vr } from "./gridlayout/GridLayout.mjs";
+import { GridLayoutItem as Pr } from "./gridlayout/GridLayoutItem.mjs";
+import { ActionSheet as Nr } from "./actionsheet/ActionSheet.mjs";
+import { ActionSheetItem as Er } from "./actionsheet/ActionSheetItem.mjs";
+import { ActionSheetHeader as Mr } from "./actionsheet/ActionSheetHeader.mjs";
+import { ActionSheetContent as Gr } from "./actionsheet/ActionSheetContent.mjs";
+import { ActionSheetFooter as Vr } from "./actionsheet/ActionSheetFooter.mjs";
+import { StackLayout as jr } from "./stacklayout/StackLayout.mjs";
+import { ExpansionPanel as Jr } from "./expansionpanel/ExpansionPanel.mjs";
+import { ExpansionPanelContent as Or } from "./expansionpanel/ExpansionPanelContent.mjs";
+export {
+  Nr as ActionSheet,
+  Gr as ActionSheetContent,
+  Vr as ActionSheetFooter,
+  Mr as ActionSheetHeader,
+  Er as ActionSheetItem,
+  Ir as AppBar,
+  sr as AppBarSection,
+  gr as AppBarSpacer,
+  P as Avatar,
+  ur as BottomNavigation,
+  Br as BottomNavigationItem,
+  d as Card,
+  g as CardActions,
+  s as CardBody,
+  v as CardFooter,
+  A as CardHeader,
+  u as CardImage,
+  B as CardSubtitle,
+  I as CardTitle,
+  N as Drawer,
+  M as DrawerContent,
+  G as DrawerItem,
+  E as DrawerNavigation,
+  Jr as ExpansionPanel,
+  Or as ExpansionPanelContent,
+  vr as GridLayout,
+  Pr as GridLayoutItem,
+  J as Menu,
+  R as MenuItemArrow,
+  O as MenuItemLink,
+  or as PanelBar,
+  er as PanelBarItem,
+  Z as Splitter,
+  $ as SplitterPane,
+  jr as StackLayout,
+  j as Step,
+  V as Stepper,
+  t as TabStrip,
+  p as TabStripContent,
+  m as TabStripNavigation,
+  x as TabStripNavigationItem,
+  n as TabStripTab,
+  Ar as TileLayout,
+  U as downArrowIcon,
+  ar as flatChildren,
+  mr as flatVisibleChildren,
+  fr as flatVisibleItems,
+  xr as getFirstId,
+  ir as getInitialState,
+  nr as isArrayEqual,
+  lr as isPresent,
+  W as leftArrowIcon,
+  dr as renderChildren,
+  X as rightArrowIcon
+};

package/menu/components/Menu.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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,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.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.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,compontent:this,item:this.getInputItem(s),itemId:s})}}});exports.Menu=h;

package/menu/components/Menu.mjs

@@ -0,0 +1,180 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as I, createVNode as d } from "vue";
+import { validatePackage as u, guid as c, getRef as p, setRef as f, templateRendering as m, getListeners as l, Keys as a, canUseDOM as h } from "@progress/kendo-vue-common";
+import { EMPTY_ID as s, ZERO_LEVEL_ZERO_ITEM_ID as o, getDirectParentId as v, getItemById as n, getRootParentId as b, isIdEmptyOrZeroLevel as r } from "../utils/itemsIdsUtils.mjs";
+import { prepareInputItemsForInternalWork as g } from "../utils/prepareInputItemsForInternalWork.mjs";
+import { getNewItemIdUponKeyboardNavigation as R } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
+import { getHoverOpenDelay as H, getHoverCloseDelay as O } from "../utils/hoverDelay.mjs";
+import { DirectionHolder as k } from "../utils/DirectionHolder.mjs";
+import { MouseOverHandler as C } from "../utils/MouseOverHandler.mjs";
+import { packageMetadata as D } from "../../package-metadata.mjs";
+import { MenuItemInternalsList as L } from "./MenuItemInternal.mjs";
+const N = /* @__PURE__ */ I({
+  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,
+    itemRender: [String, Object, Function],
+    linkRender: [String, Object, Function],
+    customCloseItemIds: Array
+  },
+  created() {
+    u(D), this.mouseOverHandler = new C(this.$props.openOnClick, this.reset, this.onItemMouseOver), this.guid = c(), this.directionHolder = new k(), this.inputItems = [], this.currentItems = [];
+  },
+  mounted() {
+    this.isFirstRender = !1, this.menuWrapperEl = p(this, "menuWrapper");
+  },
+  updated() {
+    this.mouseOverHandler.OpenOnClick = this.$props.openOnClick;
+  },
+  unmounted() {
+    this.clearItemHoverAndLeaveRequestsIfApplicable();
+  },
+  data() {
+    return {
+      focusedItemId: s,
+      hoveredItemId: s,
+      tabbableItemId: o,
+      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 ? v(this.focusedItemId) : s;
+    return d("div", {
+      class: this.getMenuWrapperClassName(),
+      ref: f(this, "menuWrapper")
+    }, [d(L, {
+      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: m.call(this, this.$props.itemRender, l.call(this)),
+      linkRender: m.call(this, this.$props.linkRender, l.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 = s, this.hoveredItemId = s, this.tabbableItemId = o;
+    },
+    onKeyDown(e) {
+      if (this.focusedItemId !== s) {
+        const t = n(this.focusedItemId, this.currentItems), i = R(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 && h && window.location.assign(t.url));
+      }
+    },
+    onItemMouseOver(e) {
+      this.mouseOverHandler.IsMouseOverEnabled && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
+        this.setHoveredItemId(e), this.itemHoverRequest = null;
+      }, H({
+        ...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
+      })));
+    },
+    onItemMouseDown() {
+      this.mouseOverHandler.handleItemMouseDown();
+    },
+    onItemFocus(e) {
+      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 && h && window.location.assign(i.url));
+    },
+    onItemBlur(e) {
+      this.isItemWithDefaultClose(e) && this.setFocusedItemId(s);
+    },
+    getInputItem(e) {
+      return n(e, this.inputItems);
+    },
+    setFocusedItemId(e) {
+      const t = e === s ? this.tabbableItemId : b(e), i = e === s || r(this.hoveredItemId) && r(e) ? this.hoveredItemId : s;
+      this.hoveredItemId = i, this.focusedItemId = e, this.tabbableItemId = t;
+    },
+    setHoveredItemId(e) {
+      r(e) && r(this.focusedItemId) ? this.hoveredItemId = e : (this.hoveredItemId = e, this.focusedItemId = s, this.tabbableItemId = o);
+    },
+    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: t
+      } = g.call(this, this.$props.items);
+      this.currentItems = e, this.inputItems = t;
+    },
+    dispatchSelectEventIfWired(e, t) {
+      this.$emit("select", {
+        event: e,
+        compontent: this,
+        item: this.getInputItem(t),
+        itemId: t
+      });
+    }
+  }
+});
+export {
+  N as Menu
+};

package/menu/components/MenuItemArrow.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("@progress/kendo-vue-common"),o=require("@progress/kendo-svg-icons"),s=require("../utils/misc.js"),t=o.caretAltDownIcon,n=o.caretAltRightIcon,i=o.caretAltLeftIcon,d=e.defineComponent({name:"KendoMenuItemArrow",props:{itemId:String,dir:String,verticalMenu:Boolean},render(){return e.createVNode("span",{class:"k-menu-expand-arrow","aria-hidden":"true"},[e.createVNode(c.Icon,{icon:this.getArrowName(),role:"presentation"},null)])},methods:{getArrowName(){const r=s.getChildrenPosition(this.$props.itemId,this.$props.verticalMenu===!0,this.$props.dir==="rtl");return r==="downward"?t:r==="rightward"?n:r==="leftward"?i:""}}});exports.MenuItemArrow=d;exports.downArrowIcon=t;exports.leftArrowIcon=i;exports.rightArrowIcon=n;

package/menu/components/MenuItemArrow.mjs

@@ -0,0 +1,40 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as t, createVNode as o } from "vue";
+import { Icon as e } from "@progress/kendo-vue-common";
+import { caretAltDownIcon as n, caretAltRightIcon as i, caretAltLeftIcon as c } from "@progress/kendo-svg-icons";
+import { getChildrenPosition as a } from "../utils/misc.mjs";
+const s = n, d = i, m = c, I = /* @__PURE__ */ t({
+  name: "KendoMenuItemArrow",
+  props: {
+    itemId: String,
+    dir: String,
+    verticalMenu: Boolean
+  },
+  render() {
+    return o("span", {
+      class: "k-menu-expand-arrow",
+      "aria-hidden": "true"
+    }, [o(e, {
+      icon: this.getArrowName(),
+      role: "presentation"
+    }, null)]);
+  },
+  methods: {
+    getArrowName() {
+      const r = a(this.$props.itemId, this.$props.verticalMenu === !0, this.$props.dir === "rtl");
+      return r === "downward" ? s : r === "rightward" ? d : r === "leftward" ? m : "";
+    }
+  }
+});
+export {
+  I as MenuItemArrow,
+  s as downArrowIcon,
+  m as leftArrowIcon,
+  d as rightArrowIcon
+};

package/menu/components/MenuItemInternal.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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"),O=require("@progress/kendo-vue-popup"),p=require("../utils/itemsIdsUtils.js"),l=require("../utils/misc.js"),w=require("./MenuItemLink.js"),N=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-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:o,contentParentItemId:m,items:F,text:a,cssStyle:f,disabled:$,url:g}=this.$props.item,r=o,M=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})])},k=function(){return e||t?n.createVNode(s.Icon,{name:s.getIconName(e),icon:t},null):null},b=function(){return this.hasItems?n.createVNode(N.MenuItemArrow,{itemId:o,verticalMenu:this.$props.isMenuVertical,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},h=this.$props.originalItemNeeded(o),v=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:o,key:"1"}}),u=n.createVNode(w.MenuItemLink,{url:g,opened:this.currentOpened,focused:this.currentFocused},{default:()=>[[k.call(this),d,b.call(this)]]});return s.getTemplate.call(this,{h:n.h,template:this.currentLinkRender,defaultRendering:u,additionalProps:{item:h,itemId:o,opened:this.currentOpened,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},R=function(){const{anchorAlign:i,popupAlign:d,collision:u}=l.getPopupSettings(r,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return n.createVNode(O.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:r,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)]})};return n.createVNode("li",{class:this.menuItemClassName,style:f,tabindex:r===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:i=>this.handleMouseDown(i),onFocusout:()=>this.handleBlur(r),onFocusin:()=>this.handleFocus(r),onClick:i=>this.handleClick(i,r),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,r):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?M.call(this):v.call(this),R.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(o,m){return n.createVNode(c,{item:o,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;