@progress/kendo-react-layout 10.1.0-develop.1 → 10.1.0-develop.11

package/index.d.mts

@@ -13,6 +13,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { Navigation } from '@progress/kendo-react-common';
 import { Offset } from '@progress/kendo-react-popup';
+import { PopupAnimation } from '@progress/kendo-react-popup';
 import * as React_2 from 'react';
 import { RefAttributes } from 'react';
 import { SVGIcon } from '@progress/kendo-react-common';
@@ -2546,6 +2547,10 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
         vertical: default_2.Requireable<boolean>;
         items: default_2.Requireable<(object | null | undefined)[]>;
         style: default_2.Requireable<object>;
+        animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
+            openDuration: default_2.Requireable<number>;
+            closeDuration: default_2.Requireable<number>;
+        }> | null | undefined>>;
         dir: default_2.Requireable<string>;
         hoverOpenDelay: default_2.Requireable<number>;
         hoverCloseDelay: default_2.Requireable<number>;
@@ -2561,6 +2566,7 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
      */
     static defaultProps: {
         vertical: boolean;
+        animate: boolean;
     };
     /**
      * @hidden
@@ -2576,6 +2582,7 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
     private mouseOverHandler;
     get element(): HTMLDivElement | null;
     constructor(props: MenuProps);
+    protected get animate(): boolean;
     /**
      * @hidden
      */
@@ -2704,6 +2711,7 @@ declare interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
     items: MenuItemInternalModel[];
     parentItemId?: string;
     className: string;
+    animate?: boolean | PopupAnimation;
     role?: string;
     'aria-orientation'?: 'vertical';
 }
@@ -2781,6 +2789,10 @@ export declare interface MenuProps {
      * Sets the ID of the Menu.
      */
     id?: string;
+    /**
+     * Controls the Popup animation. By default, the opening and closing animations are enabled and set to `300`.
+     */
+    animate?: boolean | PopupAnimation;
     /**
      * Sets the direction of the Menu.
      */
@@ -3903,10 +3915,6 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
      * @hidden
      */
     private onScroll;
-    /**
-     * @hidden
-     */
-    private handleResize;
     /**
      * @hidden
      */

package/index.d.ts

@@ -13,6 +13,7 @@ import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { Navigation } from '@progress/kendo-react-common';
 import { Offset } from '@progress/kendo-react-popup';
+import { PopupAnimation } from '@progress/kendo-react-popup';
 import * as React_2 from 'react';
 import { RefAttributes } from 'react';
 import { SVGIcon } from '@progress/kendo-react-common';
@@ -2546,6 +2547,10 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
         vertical: default_2.Requireable<boolean>;
         items: default_2.Requireable<(object | null | undefined)[]>;
         style: default_2.Requireable<object>;
+        animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
+            openDuration: default_2.Requireable<number>;
+            closeDuration: default_2.Requireable<number>;
+        }> | null | undefined>>;
         dir: default_2.Requireable<string>;
         hoverOpenDelay: default_2.Requireable<number>;
         hoverCloseDelay: default_2.Requireable<number>;
@@ -2561,6 +2566,7 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
      */
     static defaultProps: {
         vertical: boolean;
+        animate: boolean;
     };
     /**
      * @hidden
@@ -2576,6 +2582,7 @@ export declare class MenuClassComponent extends React_2.Component<MenuProps, Men
     private mouseOverHandler;
     get element(): HTMLDivElement | null;
     constructor(props: MenuProps);
+    protected get animate(): boolean;
     /**
      * @hidden
      */
@@ -2704,6 +2711,7 @@ declare interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
     items: MenuItemInternalModel[];
     parentItemId?: string;
     className: string;
+    animate?: boolean | PopupAnimation;
     role?: string;
     'aria-orientation'?: 'vertical';
 }
@@ -2781,6 +2789,10 @@ export declare interface MenuProps {
      * Sets the ID of the Menu.
      */
     id?: string;
+    /**
+     * Controls the Popup animation. By default, the opening and closing animations are enabled and set to `300`.
+     */
+    animate?: boolean | PopupAnimation;
     /**
      * Sets the direction of the Menu.
      */
@@ -3903,10 +3915,6 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
      * @hidden
      */
     private onScroll;
-    /**
-     * @hidden
-     */
-    private handleResize;
     /**
      * @hidden
      */

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 p=require("react"),o=require("prop-types"),a=require("@progress/kendo-react-common"),i=require("../utils/itemsIdsUtils.js"),v=require("../utils/prepareInputItemsForInternalWork.js"),h=require("../utils/getNewItemIdUponKeyboardNavigation.js"),u=require("../utils/hoverDelay.js"),f=require("./MenuItemInternal.js"),g=require("../utils/DirectionHolder.js"),b=require("../utils/MouseOverHandler.js");function D(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const d=D(p),c={focusedItemId:i.EMPTY_ID,hoveredItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID},l=class l extends d.Component{constructor(t){super(t),this.menuWrapperEl=null,this.directionHolder=new g.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(c)},this.onKeyDown=e=>{if(this.state.focusedItemId!==i.EMPTY_ID){const s=i.getItemById(this.state.focusedItemId,this.items);let r=h.getNewItemIdUponKeyboardNavigation(this.items,s.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());const m=i.getItemById(r,this.items);m&&m.separator&&(r=h.getNewItemIdUponKeyboardNavigation(this.items,r,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft())),s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===a.Keys.enter||e.keyCode===a.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.isDefaultPrevented()&&s.items.length===0&&s.url&&window.location.assign(s.url))}e.keyCode===a.Keys.esc&&this.props.onClose&&this.props.onClose.call(void 0,e)},this.onItemMouseOver=e=>{this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},u.getHoverOpenDelay(this.props)))},this.onItemMouseLeave=e=>{this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(i.EMPTY_ID),this.itemLeaveRequest=null},u.getHoverCloseDelay(this.props)))},this.onItemMouseDown=()=>{this.mouseOverHandler.handleItemMouseDown()},this.onItemFocus=e=>{this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},this.onItemClick=(e,s)=>{const r=i.getItemById(s,this.items);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.isDefaultPrevented()&&r.url&&window.location.assign(r.url))},this.onItemBlur=(e,s)=>{if(this.isItemWithDefaultClose(e)&&this.setFocusedItemId(i.EMPTY_ID),s.relatedTarget&&s.relatedTarget.nodeName==="LI"){const r=s.relatedTarget.getAttribute("id");if(r&&r.includes(this.menuItemId))return}this.props.onClose&&this.props.onClose.call(void 0,s)},this.getInputItem=e=>i.getItemById(e,this.inputItems),this.mouseOverHandler=new b.MouseOverHandler(this.props.openOnClick,this.reset,this.onItemMouseOver),this.state=Object.assign({},c,{isFirstRender:!0})}get menuItemId(){return this.props.id}get element(){return this.menuWrapperEl}render(){this.prepareItems(),this.state.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());const t=this.state.hoveredItemId?this.state.hoveredItemId:this.state.focusedItemId?i.getDirectParentId(this.state.focusedItemId):i.EMPTY_ID;return d.createElement("div",{id:this.props.id,onKeyDown:this.onKeyDown,style:this.props.style,className:this.directionHolder.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:e=>this.menuWrapperEl=e},d.createElement(f.MenuItemInternalsList,{className:this.getMenuClassName(),"aria-orientation":this.props.vertical?"vertical":void 0,items:this.items,isMenuVertical:this.props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.state.focusedItemId,lastItemIdToBeOpened:t,tabbableItemId:this.state.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.menuItemId,onMouseLeave:this.onItemMouseLeave,onMouseOver:this.onItemMouseOver,onMouseDown:this.onItemMouseDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,onOriginalItemNeeded:this.getInputItem,role:this.props.role}))}componentDidMount(){this.setState({isFirstRender:!1})}componentDidUpdate(t){(!!t.vertical!=!!this.props.vertical||this.directionHolder.hasDirectionChanged())&&this.reset(),this.mouseOverHandler.OpenOnClick=this.props.openOnClick}componentWillUnmount(){this.clearItemHoverAndLeaveRequestsIfApplicable()}setFocusedItemId(t){this.setState(e=>{const s=t===i.EMPTY_ID?e.tabbableItemId:i.getRootParentId(t);return{hoveredItemId:t===i.EMPTY_ID||i.isIdEmptyOrZeroLevel(e.hoveredItemId)&&i.isIdEmptyOrZeroLevel(t)?e.hoveredItemId:i.EMPTY_ID,focusedItemId:t,tabbableItemId:s}})}setHoveredItemId(t){this.setState(e=>i.isIdEmptyOrZeroLevel(t)&&i.isIdEmptyOrZeroLevel(e.focusedItemId)?{hoveredItemId:t,focusedItemId:e.focusedItemId,tabbableItemId:e.tabbableItemId}:{hoveredItemId:t,focusedItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID})}getMenuClassName(){return a.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!this.props.vertical},{"k-menu-vertical":this.props.vertical},this.props.className)}clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)}isItemWithDefaultClose(t){return!this.props.customCloseItemIds||this.props.customCloseItemIds.indexOf(t)===-1}checkIsDirectionRightToLeft(){return!!(this.props.dir!==void 0?this.props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl")}prepareItems(){const{items:t,inputItems:e}=v.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=t,this.inputItems=e}dispatchSelectEventIfWired(t,e){a.dispatchEvent(this.props.onSelect,t,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:o.bool,items:o.arrayOf(o.object),style:o.object,dir:o.string,hoverOpenDelay:o.number,hoverCloseDelay:o.number,openOnClick:o.bool,itemRender:o.any,linkRender:o.any,customCloseItemIds:o.arrayOf(o.string),onSelect:o.func,role:o.string},l.defaultProps={vertical:!1};let I=l;exports.Menu=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react"),o=require("prop-types"),a=require("@progress/kendo-react-common"),i=require("../utils/itemsIdsUtils.js"),v=require("../utils/prepareInputItemsForInternalWork.js"),h=require("../utils/getNewItemIdUponKeyboardNavigation.js"),u=require("../utils/hoverDelay.js"),f=require("./MenuItemInternal.js"),b=require("../utils/DirectionHolder.js"),g=require("../utils/MouseOverHandler.js");function D(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const d=D(p),c={focusedItemId:i.EMPTY_ID,hoveredItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID},l=class l extends d.Component{constructor(t){super(t),this.menuWrapperEl=null,this.directionHolder=new b.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(c)},this.onKeyDown=e=>{if(this.state.focusedItemId!==i.EMPTY_ID){const s=i.getItemById(this.state.focusedItemId,this.items);let r=h.getNewItemIdUponKeyboardNavigation(this.items,s.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());const I=i.getItemById(r,this.items);I&&I.separator&&(r=h.getNewItemIdUponKeyboardNavigation(this.items,r,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft())),s.id!==r&&(e.preventDefault(),this.setFocusedItemId(r)),(e.keyCode===a.Keys.enter||e.keyCode===a.Keys.space)&&!s.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,s.id),!e.isDefaultPrevented()&&s.items.length===0&&s.url&&window.location.assign(s.url))}e.keyCode===a.Keys.esc&&this.props.onClose&&this.props.onClose.call(void 0,e)},this.onItemMouseOver=e=>{this.mouseOverHandler.IsMouseOverEnabled&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},u.getHoverOpenDelay(this.props)))},this.onItemMouseLeave=e=>{this.mouseOverHandler.IsMouseOverEnabled&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{this.setHoveredItemId(i.EMPTY_ID),this.itemLeaveRequest=null},u.getHoverCloseDelay(this.props)))},this.onItemMouseDown=()=>{this.mouseOverHandler.handleItemMouseDown()},this.onItemFocus=e=>{this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},this.onItemClick=(e,s)=>{const r=i.getItemById(s,this.items);r.disabled||(this.setFocusedItemId(s),this.mouseOverHandler.handleItemClick(s,this.isItemWithDefaultClose(s)),this.dispatchSelectEventIfWired(e,s),!e.isDefaultPrevented()&&r.url&&window.location.assign(r.url))},this.onItemBlur=(e,s)=>{if(this.isItemWithDefaultClose(e)&&this.setFocusedItemId(i.EMPTY_ID),s.relatedTarget&&s.relatedTarget.nodeName==="LI"){const r=s.relatedTarget.getAttribute("id");if(r&&r.includes(this.menuItemId))return}this.props.onClose&&this.props.onClose.call(void 0,s)},this.getInputItem=e=>i.getItemById(e,this.inputItems),this.mouseOverHandler=new g.MouseOverHandler(this.props.openOnClick,this.reset,this.onItemMouseOver),this.state=Object.assign({},c,{isFirstRender:!0})}get menuItemId(){return this.props.id}get element(){return this.menuWrapperEl}get animate(){return this.props.animate!==void 0?this.props.animate:l.defaultProps.animate}render(){this.prepareItems(),this.state.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());const t=this.state.hoveredItemId?this.state.hoveredItemId:this.state.focusedItemId?i.getDirectParentId(this.state.focusedItemId):i.EMPTY_ID;return d.createElement("div",{id:this.props.id,onKeyDown:this.onKeyDown,style:this.props.style,className:this.directionHolder.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:e=>this.menuWrapperEl=e},d.createElement(f.MenuItemInternalsList,{className:this.getMenuClassName(),"aria-orientation":this.props.vertical?"vertical":void 0,items:this.items,animate:this.animate,isMenuVertical:this.props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.state.focusedItemId,lastItemIdToBeOpened:t,tabbableItemId:this.state.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.menuItemId,onMouseLeave:this.onItemMouseLeave,onMouseOver:this.onItemMouseOver,onMouseDown:this.onItemMouseDown,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,onOriginalItemNeeded:this.getInputItem,role:this.props.role}))}componentDidMount(){this.setState({isFirstRender:!1})}componentDidUpdate(t){(!!t.vertical!=!!this.props.vertical||this.directionHolder.hasDirectionChanged())&&this.reset(),this.mouseOverHandler.OpenOnClick=this.props.openOnClick}componentWillUnmount(){this.clearItemHoverAndLeaveRequestsIfApplicable()}setFocusedItemId(t){this.setState(e=>{const s=t===i.EMPTY_ID?e.tabbableItemId:i.getRootParentId(t);return{hoveredItemId:t===i.EMPTY_ID||i.isIdEmptyOrZeroLevel(e.hoveredItemId)&&i.isIdEmptyOrZeroLevel(t)?e.hoveredItemId:i.EMPTY_ID,focusedItemId:t,tabbableItemId:s}})}setHoveredItemId(t){this.setState(e=>i.isIdEmptyOrZeroLevel(t)&&i.isIdEmptyOrZeroLevel(e.focusedItemId)?{hoveredItemId:t,focusedItemId:e.focusedItemId,tabbableItemId:e.tabbableItemId}:{hoveredItemId:t,focusedItemId:i.EMPTY_ID,tabbableItemId:i.ZERO_LEVEL_ZERO_ITEM_ID})}getMenuClassName(){return a.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!this.props.vertical},{"k-menu-vertical":this.props.vertical},this.props.className)}clearItemHoverAndLeaveRequestsIfApplicable(){this.itemHoverRequest&&(clearTimeout(this.itemHoverRequest),this.itemHoverRequest=null),this.itemLeaveRequest&&(clearTimeout(this.itemLeaveRequest),this.itemLeaveRequest=null)}isItemWithDefaultClose(t){return!this.props.customCloseItemIds||this.props.customCloseItemIds.indexOf(t)===-1}checkIsDirectionRightToLeft(){return!!(this.props.dir!==void 0?this.props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl")}prepareItems(){const{items:t,inputItems:e}=v.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=t,this.inputItems=e}dispatchSelectEventIfWired(t,e){a.dispatchEvent(this.props.onSelect,t,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:o.bool,items:o.arrayOf(o.object),style:o.object,animate:o.oneOfType([o.bool,o.shape({openDuration:o.number,closeDuration:o.number})]),dir:o.string,hoverOpenDelay:o.number,hoverCloseDelay:o.number,openOnClick:o.bool,itemRender:o.any,linkRender:o.any,customCloseItemIds:o.arrayOf(o.string),onSelect:o.func,role:o.string},l.defaultProps={vertical:!1,animate:!0};let m=l;exports.Menu=m;

package/menu/components/Menu.mjs

@@ -7,25 +7,25 @@
  */
 import * as m from "react";
 import i from "prop-types";
-import { Keys as d, classNames as f, dispatchEvent as v } from "@progress/kendo-react-common";
-import { EMPTY_ID as r, getItemById as n, getDirectParentId as b, getRootParentId as g, isIdEmptyOrZeroLevel as l, ZERO_LEVEL_ZERO_ITEM_ID as c } from "../utils/itemsIdsUtils.mjs";
+import { Keys as h, classNames as f, dispatchEvent as v } from "@progress/kendo-react-common";
+import { EMPTY_ID as r, getItemById as a, getDirectParentId as b, getRootParentId as g, isIdEmptyOrZeroLevel as l, ZERO_LEVEL_ZERO_ITEM_ID as c } from "../utils/itemsIdsUtils.mjs";
 import { prepareInputItemsForInternalWork as R } from "../utils/prepareInputItemsForInternalWork.mjs";
 import { getNewItemIdUponKeyboardNavigation as I } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
 import { getHoverOpenDelay as D, getHoverCloseDelay as H } from "../utils/hoverDelay.mjs";
-import { MenuItemInternalsList as C } from "./MenuItemInternal.mjs";
-import { DirectionHolder as O } from "../utils/DirectionHolder.mjs";
+import { MenuItemInternalsList as O } from "./MenuItemInternal.mjs";
+import { DirectionHolder as C } from "../utils/DirectionHolder.mjs";
 import { MouseOverHandler as y } from "../utils/MouseOverHandler.mjs";
 const p = {
   focusedItemId: r,
   hoveredItemId: r,
   tabbableItemId: c
-}, a = class a extends m.Component {
+}, n = class n extends m.Component {
   constructor(t) {
-    super(t), this.menuWrapperEl = null, this.directionHolder = new O(), this.inputItems = [], this.items = [], this.reset = () => {
+    super(t), this.menuWrapperEl = null, this.directionHolder = new C(), this.inputItems = [], this.items = [], this.reset = () => {
       this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(p);
     }, this.onKeyDown = (e) => {
       if (this.state.focusedItemId !== r) {
-        const s = n(this.state.focusedItemId, this.items);
+        const s = a(this.state.focusedItemId, this.items);
         let o = I(
           this.items,
           s.id,
@@ -34,17 +34,17 @@ const p = {
           this.props.vertical,
           this.directionHolder.getIsDirectionRightToLeft()
         );
-        const h = n(o, this.items);
-        h && h.separator && (o = I(
+        const d = a(o, this.items);
+        d && d.separator && (o = I(
           this.items,
           o,
           e.keyCode,
           e.key,
           this.props.vertical,
           this.directionHolder.getIsDirectionRightToLeft()
-        )), s.id !== o && (e.preventDefault(), this.setFocusedItemId(o)), (e.keyCode === d.enter || e.keyCode === d.space) && !s.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url && window.location.assign(s.url));
+        )), s.id !== o && (e.preventDefault(), this.setFocusedItemId(o)), (e.keyCode === h.enter || e.keyCode === h.space) && !s.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url && window.location.assign(s.url));
       }
-      e.keyCode === d.esc && this.props.onClose && this.props.onClose.call(void 0, e);
+      e.keyCode === h.esc && this.props.onClose && this.props.onClose.call(void 0, e);
     }, this.onItemMouseOver = (e) => {
       this.mouseOverHandler.IsMouseOverEnabled && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
         this.setHoveredItemId(e), this.itemHoverRequest = null;
@@ -58,7 +58,7 @@ const p = {
     }, this.onItemFocus = (e) => {
       this.setFocusedItemId(e), this.mouseOverHandler.handleItemFocus();
     }, this.onItemClick = (e, s) => {
-      const o = n(s, this.items);
+      const o = a(s, this.items);
       o.disabled || (this.setFocusedItemId(s), this.mouseOverHandler.handleItemClick(s, this.isItemWithDefaultClose(s)), this.dispatchSelectEventIfWired(e, s), !e.isDefaultPrevented() && o.url && window.location.assign(o.url));
     }, this.onItemBlur = (e, s) => {
       if (this.isItemWithDefaultClose(e) && this.setFocusedItemId(r), s.relatedTarget && s.relatedTarget.nodeName === "LI") {
@@ -67,7 +67,7 @@ const p = {
           return;
       }
       this.props.onClose && this.props.onClose.call(void 0, s);
-    }, this.getInputItem = (e) => n(e, this.inputItems), this.mouseOverHandler = new y(this.props.openOnClick, this.reset, this.onItemMouseOver), this.state = Object.assign({}, p, { isFirstRender: !0 });
+    }, this.getInputItem = (e) => a(e, this.inputItems), this.mouseOverHandler = new y(this.props.openOnClick, this.reset, this.onItemMouseOver), this.state = Object.assign({}, p, { isFirstRender: !0 });
   }
   get menuItemId() {
     return this.props.id;
@@ -75,6 +75,9 @@ const p = {
   get element() {
     return this.menuWrapperEl;
   }
+  get animate() {
+    return this.props.animate !== void 0 ? this.props.animate : n.defaultProps.animate;
+  }
   /**
    * @hidden
    */
@@ -91,11 +94,12 @@ const p = {
         ref: (e) => this.menuWrapperEl = e
       },
       /* @__PURE__ */ m.createElement(
-        C,
+        O,
         {
           className: this.getMenuClassName(),
           "aria-orientation": this.props.vertical ? "vertical" : void 0,
           items: this.items,
+          animate: this.animate,
           isMenuVertical: this.props.vertical,
           isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(),
           focusedItemId: this.state.focusedItemId,
@@ -174,10 +178,17 @@ const p = {
     v(this.props.onSelect, t, this, { item: this.getInputItem(e), itemId: e });
   }
 };
-a.propTypes = {
+n.propTypes = {
   vertical: i.bool,
   items: i.arrayOf(i.object),
   style: i.object,
+  animate: i.oneOfType([
+    i.bool,
+    i.shape({
+      openDuration: i.number,
+      closeDuration: i.number
+    })
+  ]),
   dir: i.string,
   hoverOpenDelay: i.number,
   hoverCloseDelay: i.number,
@@ -187,8 +198,8 @@ a.propTypes = {
   customCloseItemIds: i.arrayOf(i.string),
   onSelect: i.func,
   role: i.string
-}, a.defaultProps = { vertical: !1 };
-let u = a;
+}, n.defaultProps = { vertical: !1, animate: !0 };
+let u = n;
 export {
   u as Menu
 };

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 l=require("react"),d=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-popup"),a=require("../utils/itemsIdsUtils.js"),p=require("../utils/misc.js"),h=require("./MenuItemLink.js"),I=require("./MenuItemArrow.js");function g(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const s=g(l);class m extends s.Component{constructor(){super(...arguments),this.onMouseOver=e=>{this.props.onMouseOver(this.props.parentItemId),e.stopPropagation()},this.onMouseLeave=e=>{this.props.onMouseLeave(this.props.parentItemId),e.stopPropagation()}}render(){const e=this.props.parentItemId;return s.createElement("ul",{className:this.props.className,role:this.props.role?this.props.role:e!==void 0?"menu":"menubar",id:e!==void 0?p.getDOMElementId(this.props.menuGuid,e):void 0,onMouseOver:e!==void 0?this.onMouseOver:void 0,onMouseLeave:e!==void 0?this.onMouseLeave:void 0,"aria-orientation":this.props["aria-orientation"]},this.renderChildItems())}renderChildItems(){return this.props.items.length>0?this.props.items.map((e,t)=>s.createElement(u,{item:e,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.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded,key:t})):null}}class u extends s.Component{constructor(e){super(e),this.isFirstRender=!0,this.onMouseOver=t=>{this.props.onMouseOver(this.props.item.id),t.stopPropagation()},this.onMouseLeave=t=>{this.props.onMouseLeave(this.props.item.id),t.stopPropagation()},this.state={opened:!1}}componentDidMount(){const e=this.props.focusedItemId,t=this.props.item.id;e&&e===t&&this.itemElement.focus({preventScroll:!0}),this.isFirstRender=!1}componentDidUpdate(e){const t=this.props.focusedItemId,n=this.props.item.id;if(t){const r=d.getActiveElement(document);e.focusedItemId!==t&&t===n&&!this.itemElement.contains(r)&&this.itemElement.focus({preventScroll:!0})}}render(){const e=this.props.item,t=e.id,n=p.getDOMElementId(this.props.menuGuid,t),r=e.separator;return s.createElement(s.Fragment,null,r?s.createElement("li",{className:"k-separator k-item","aria-hidden":!0,key:n,id:n,ref:i=>this.itemElement=i}):s.createElement("li",{id:n,className:this.getMenuItemClassName(e),style:e.cssStyle,tabIndex:t===this.props.tabbableItemId?0:-1,onMouseOver:this.onMouseOver,onMouseLeave:this.onMouseLeave,onMouseDown:i=>this.props.onMouseDown(i),onBlur:i=>this.props.onBlur(t,i),onFocus:()=>this.props.onFocus(t),onClick:i=>this.props.onClick(i,t),role:"menuitem","aria-disabled":e.disabled?!0:void 0,"aria-haspopup":e.items.length>0?!0:void 0,"aria-expanded":e.items.length>0?this.Opened:void 0,"aria-label":e.text,"aria-owns":this.Opened?n:void 0,ref:i=>this.itemElement=i,key:n},this.contentRender?this.renderContent():this.renderMenuItemLink()),this.renderPopupIfOpened())}renderContent(){const e=this.props.item.contentParentItemId;return s.createElement("div",{className:"k-content",role:"presentation"},s.createElement(this.contentRender,{item:this.props.onOriginalItemNeeded(e),itemId:e}))}renderMenuItemLink(){const e=this.props.item;if(this.linkRender)return s.createElement(this.linkRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,opened:this.Opened,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft)});const t=this.itemRender?s.createElement(this.itemRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,key:"1"}):s.createElement("span",{className:"k-menu-link-text"},e.text);return s.createElement(h.MenuItemLink,{url:e.url,opened:this.Opened},this.renderMenuIconIfApplicable(),t,this.renderArrowIfApplicable())}renderPopupIfOpened(){if(this.Opened){const e=this.props.item.id,{anchorAlign:t,popupAlign:n,collision:r}=p.getPopupSettings(e,this.props.isMenuVertical,this.props.isDirectionRightToLeft);return s.createElement(c.Popup,{anchor:this.itemElement,show:!0,popupClass:this.getPopupClassName(),anchorAlign:t,popupAlign:n,collision:r,animate:!1,key:"1"},s.createElement(m,{parentItemId:e,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,className:"k-group k-menu-group k-reset k-menu-group-md",onMouseOver:this.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded}))}return null}renderMenuIconIfApplicable(){const{icon:e,svgIcon:t}=this.props.item;return e||t?s.createElement(d.IconWrap,{name:e,icon:t,key:"0"}):null}renderArrowIfApplicable(){return this.props.item.items.length>0?s.createElement("span",{className:"k-menu-expand-arrow","aria-hidden":!0},s.createElement(I.MenuItemArrow,{itemId:this.props.item.id,verticalMenu:this.props.isMenuVertical,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft),key:"2"})):null}get itemRender(){return this.props.item.render||this.props.itemRender}get linkRender(){return this.props.item.linkRender||this.props.linkRender}get contentRender(){return this.props.item.contentParentItemId?this.props.item.contentRender:null}get Opened(){const e=this.props;return e.item.items.length>0&&a.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender}getPopupClassName(){return d.classNames("k-menu-popup",{"k-rtl":this.props.isDirectionRightToLeft})}getMenuItemClassName(e){return d.classNames("k-item","k-menu-item",{"k-first":a.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled},e.cssClass)}}exports.MenuItemInternal=u;exports.MenuItemInternalsList=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),a=require("@progress/kendo-react-common"),I=require("@progress/kendo-react-popup"),m=require("../utils/itemsIdsUtils.js"),p=require("../utils/misc.js"),g=require("./MenuItemLink.js"),M=require("./MenuItemArrow.js");function f(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const s=f(h);class u extends s.Component{constructor(){super(...arguments),this.onMouseOver=e=>{this.props.onMouseOver(this.props.parentItemId),e.stopPropagation()},this.onMouseLeave=e=>{this.props.onMouseLeave(this.props.parentItemId),e.stopPropagation()}}render(){const e=this.props.parentItemId;return s.createElement("ul",{className:this.props.className,role:this.props.role?this.props.role:e!==void 0?"menu":"menubar",id:e!==void 0?p.getDOMElementId(this.props.menuGuid,e):void 0,onMouseOver:e!==void 0?this.onMouseOver:void 0,onMouseLeave:e!==void 0?this.onMouseLeave:void 0,"aria-orientation":this.props["aria-orientation"]},this.renderChildItems())}renderChildItems(){return this.props.items.length>0?this.props.items.map((e,t)=>s.createElement(l,{item:e,animate:this.props.animate,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.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded,key:t})):null}}class l extends s.Component{constructor(e){super(e),this.isFirstRender=!0,this.onMouseOver=t=>{this.props.onMouseOver(this.props.item.id),t.stopPropagation()},this.onMouseLeave=t=>{this.props.onMouseLeave(this.props.item.id),t.stopPropagation()},this.state={opened:!1}}componentDidMount(){const e=this.props.focusedItemId,t=this.props.item.id;e&&e===t&&this.itemElement.focus({preventScroll:!0}),this.isFirstRender=!1}componentDidUpdate(e){const t=this.props.focusedItemId,i=this.props.item.id;if(t){const r=a.getActiveElement(document);e.focusedItemId!==t&&t===i&&!this.itemElement.contains(r)&&this.itemElement.focus({preventScroll:!0})}}render(){const e=this.props.item,t=e.id,i=p.getDOMElementId(this.props.menuGuid,t),r=e.separator;return s.createElement(s.Fragment,null,r?s.createElement("li",{className:"k-separator k-item","aria-hidden":!0,key:i,id:i,ref:n=>this.itemElement=n}):s.createElement("li",{id:i,className:this.getMenuItemClassName(e),style:e.cssStyle,tabIndex:t===this.props.tabbableItemId?0:-1,onMouseOver:this.onMouseOver,onMouseLeave:this.onMouseLeave,onMouseDown:n=>this.props.onMouseDown(n),onBlur:n=>this.props.onBlur(t,n),onFocus:()=>this.props.onFocus(t),onClick:n=>this.props.onClick(n,t),role:"menuitem","aria-disabled":e.disabled?!0:void 0,"aria-haspopup":e.items.length>0?!0:void 0,"aria-expanded":e.items.length>0?this.Opened:void 0,"aria-label":e.text,"aria-owns":this.Opened?i:void 0,ref:n=>this.itemElement=n,key:i},this.contentRender?this.renderContent():this.renderMenuItemLink()),this.renderPopupIfOpened())}renderContent(){const e=this.props.item.contentParentItemId;return s.createElement("div",{className:"k-content",role:"presentation"},s.createElement(this.contentRender,{item:this.props.onOriginalItemNeeded(e),itemId:e}))}renderMenuItemLink(){const e=this.props.item;if(this.linkRender)return s.createElement(this.linkRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,opened:this.Opened,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft)});const t=this.itemRender?s.createElement(this.itemRender,{item:this.props.onOriginalItemNeeded(e.id),itemId:e.id,key:"1"}):s.createElement("span",{className:"k-menu-link-text"},e.text);return s.createElement(g.MenuItemLink,{url:e.url,opened:this.Opened},this.renderMenuIconIfApplicable(),t,this.renderArrowIfApplicable())}renderPopupIfOpened(){const e=this.props.item.id,t=this.props.animate,{anchorAlign:i,popupAlign:r,collision:n,animationDirection:d}=p.getPopupSettings(e,this.props.isMenuVertical,this.props.isDirectionRightToLeft),c=t===!0?{openDuration:300,closeDuration:300,direction:d}:t===!1?!1:{openDuration:(t==null?void 0:t.openDuration)||300,closeDuration:(t==null?void 0:t.closeDuration)||300,direction:(t==null?void 0:t.direction)||d};return s.createElement(I.Popup,{anchor:this.itemElement,show:this.Opened,popupClass:this.getPopupClassName(),anchorAlign:i,popupAlign:r,collision:n,animate:c,key:"1"},s.createElement(u,{parentItemId:e,animate:this.props.animate,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,className:"k-group k-menu-group k-reset k-menu-group-md",onMouseOver:this.props.onMouseOver,onMouseLeave:this.props.onMouseLeave,onMouseDown:this.props.onMouseDown,onBlur:this.props.onBlur,onFocus:this.props.onFocus,onClick:this.props.onClick,onOriginalItemNeeded:this.props.onOriginalItemNeeded}))}renderMenuIconIfApplicable(){const{icon:e,svgIcon:t}=this.props.item;return e||t?s.createElement(a.IconWrap,{name:e,icon:t,key:"0"}):null}renderArrowIfApplicable(){return this.props.item.items.length>0?s.createElement("span",{className:"k-menu-expand-arrow","aria-hidden":!0},s.createElement(M.MenuItemArrow,{itemId:this.props.item.id,verticalMenu:this.props.isMenuVertical,dir:p.convertBoolDirectionToString(this.props.isDirectionRightToLeft),key:"2"})):null}get itemRender(){return this.props.item.render||this.props.itemRender}get linkRender(){return this.props.item.linkRender||this.props.linkRender}get contentRender(){return this.props.item.contentParentItemId?this.props.item.contentRender:null}get Opened(){const e=this.props;return e.item.items.length>0&&m.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender}getPopupClassName(){return a.classNames("k-menu-popup",{"k-rtl":this.props.isDirectionRightToLeft})}getMenuItemClassName(e){return a.classNames("k-item","k-menu-item",{"k-first":m.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled},e.cssClass)}}exports.MenuItemInternal=l;exports.MenuItemInternalsList=u;

package/menu/components/MenuItemInternal.mjs

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as s from "react";
-import { getActiveElement as a, IconWrap as l, classNames as r } from "@progress/kendo-react-common";
-import { Popup as u } from "@progress/kendo-react-popup";
-import { shouldOpenItem as h, isFirstItemFromSiblings as c } from "../utils/itemsIdsUtils.mjs";
-import { getDOMElementId as m, convertBoolDirectionToString as p, getPopupSettings as I } from "../utils/misc.mjs";
-import { MenuItemLink as M } from "./MenuItemLink.mjs";
-import { MenuItemArrow as g } from "./MenuItemArrow.mjs";
-class f extends s.Component {
+import { getActiveElement as u, IconWrap as h, classNames as p } from "@progress/kendo-react-common";
+import { Popup as c } from "@progress/kendo-react-popup";
+import { shouldOpenItem as I, isFirstItemFromSiblings as M } from "../utils/itemsIdsUtils.mjs";
+import { getDOMElementId as d, convertBoolDirectionToString as m, getPopupSettings as g } from "../utils/misc.mjs";
+import { MenuItemLink as f } from "./MenuItemLink.mjs";
+import { MenuItemArrow as v } from "./MenuItemArrow.mjs";
+class k extends s.Component {
   constructor() {
     super(...arguments), this.onMouseOver = (e) => {
       this.props.onMouseOver(this.props.parentItemId), e.stopPropagation();
@@ -27,7 +27,7 @@ class f extends s.Component {
       {
         className: this.props.className,
         role: this.props.role ? this.props.role : e !== void 0 ? "menu" : "menubar",
-        id: e !== void 0 ? m(this.props.menuGuid, e) : void 0,
+        id: e !== void 0 ? d(this.props.menuGuid, e) : void 0,
         onMouseOver: e !== void 0 ? this.onMouseOver : void 0,
         onMouseLeave: e !== void 0 ? this.onMouseLeave : void 0,
         "aria-orientation": this.props["aria-orientation"]
@@ -37,9 +37,10 @@ class f extends s.Component {
   }
   renderChildItems() {
     return this.props.items.length > 0 ? this.props.items.map((e, t) => /* @__PURE__ */ s.createElement(
-      v,
+      O,
       {
         item: e,
+        animate: this.props.animate,
         isMenuVertical: this.props.isMenuVertical,
         isDirectionRightToLeft: this.props.isDirectionRightToLeft,
         focusedItemId: this.props.focusedItemId,
@@ -60,7 +61,7 @@ class f extends s.Component {
     )) : null;
   }
 }
-class v extends s.Component {
+class O extends s.Component {
   constructor(e) {
     super(e), this.isFirstRender = !0, this.onMouseOver = (t) => {
       this.props.onMouseOver(this.props.item.id), t.stopPropagation();
@@ -73,47 +74,47 @@ class v extends s.Component {
     e && e === t && this.itemElement.focus({ preventScroll: !0 }), this.isFirstRender = !1;
   }
   componentDidUpdate(e) {
-    const t = this.props.focusedItemId, i = this.props.item.id;
+    const t = this.props.focusedItemId, o = this.props.item.id;
     if (t) {
-      const n = a(document);
-      e.focusedItemId !== t && t === i && // https://github.com/telerik/kendo-react/issues/216 :
+      const n = u(document);
+      e.focusedItemId !== t && t === o && // 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(n) && this.itemElement.focus({ preventScroll: !0 });
     }
   }
   render() {
-    const e = this.props.item, t = e.id, i = m(this.props.menuGuid, t), n = e.separator;
+    const e = this.props.item, t = e.id, o = d(this.props.menuGuid, t), n = e.separator;
     return /* @__PURE__ */ s.createElement(s.Fragment, null, n ? /* @__PURE__ */ s.createElement(
       "li",
       {
         className: "k-separator k-item",
         "aria-hidden": !0,
-        key: i,
-        id: i,
-        ref: (o) => this.itemElement = o
+        key: o,
+        id: o,
+        ref: (i) => this.itemElement = i
       }
     ) : /* @__PURE__ */ s.createElement(
       "li",
       {
-        id: i,
+        id: o,
         className: this.getMenuItemClassName(e),
         style: e.cssStyle,
         tabIndex: t === this.props.tabbableItemId ? 0 : -1,
         onMouseOver: this.onMouseOver,
         onMouseLeave: this.onMouseLeave,
-        onMouseDown: (o) => this.props.onMouseDown(o),
-        onBlur: (o) => this.props.onBlur(t, o),
+        onMouseDown: (i) => this.props.onMouseDown(i),
+        onBlur: (i) => this.props.onBlur(t, i),
         onFocus: () => this.props.onFocus(t),
-        onClick: (o) => this.props.onClick(o, t),
+        onClick: (i) => this.props.onClick(i, t),
         role: "menuitem",
         "aria-disabled": e.disabled ? !0 : void 0,
         "aria-haspopup": e.items.length > 0 ? !0 : void 0,
         "aria-expanded": e.items.length > 0 ? this.Opened : void 0,
         "aria-label": e.text,
-        "aria-owns": this.Opened ? i : void 0,
-        ref: (o) => this.itemElement = o,
-        key: i
+        "aria-owns": this.Opened ? o : void 0,
+        ref: (i) => this.itemElement = i,
+        key: o
       },
       this.contentRender ? this.renderContent() : this.renderMenuItemLink()
     ), this.renderPopupIfOpened());
@@ -131,69 +132,71 @@ class v extends s.Component {
           item: this.props.onOriginalItemNeeded(e.id),
           itemId: e.id,
           opened: this.Opened,
-          dir: p(this.props.isDirectionRightToLeft)
+          dir: m(this.props.isDirectionRightToLeft)
         }
       );
     const t = this.itemRender ? /* @__PURE__ */ s.createElement(this.itemRender, { item: this.props.onOriginalItemNeeded(e.id), itemId: e.id, key: "1" }) : /* @__PURE__ */ s.createElement("span", { className: "k-menu-link-text" }, e.text);
-    return /* @__PURE__ */ s.createElement(M, { url: e.url, opened: this.Opened }, this.renderMenuIconIfApplicable(), t, this.renderArrowIfApplicable());
+    return /* @__PURE__ */ s.createElement(f, { url: e.url, opened: this.Opened }, this.renderMenuIconIfApplicable(), t, this.renderArrowIfApplicable());
   }
   renderPopupIfOpened() {
-    if (this.Opened) {
-      const e = this.props.item.id, { anchorAlign: t, popupAlign: i, collision: n } = I(
-        e,
-        this.props.isMenuVertical,
-        this.props.isDirectionRightToLeft
-      );
-      return /* @__PURE__ */ s.createElement(
-        u,
+    const e = this.props.item.id, t = this.props.animate, { anchorAlign: o, popupAlign: n, collision: i, animationDirection: r } = g(
+      e,
+      this.props.isMenuVertical,
+      this.props.isDirectionRightToLeft
+    ), l = t === !0 ? { openDuration: 300, closeDuration: 300, direction: r } : t === !1 ? !1 : {
+      openDuration: (t == null ? void 0 : t.openDuration) || 300,
+      closeDuration: (t == null ? void 0 : t.closeDuration) || 300,
+      direction: (t == null ? void 0 : t.direction) || r
+    };
+    return /* @__PURE__ */ s.createElement(
+      c,
+      {
+        anchor: this.itemElement,
+        show: this.Opened,
+        popupClass: this.getPopupClassName(),
+        anchorAlign: o,
+        popupAlign: n,
+        collision: i,
+        animate: l,
+        key: "1"
+      },
+      /* @__PURE__ */ s.createElement(
+        k,
         {
-          anchor: this.itemElement,
-          show: !0,
-          popupClass: this.getPopupClassName(),
-          anchorAlign: t,
-          popupAlign: i,
-          collision: n,
-          animate: !1,
-          key: "1"
-        },
-        /* @__PURE__ */ s.createElement(
-          f,
-          {
-            parentItemId: e,
-            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,
-            className: "k-group k-menu-group k-reset k-menu-group-md",
-            onMouseOver: this.props.onMouseOver,
-            onMouseLeave: this.props.onMouseLeave,
-            onMouseDown: this.props.onMouseDown,
-            onBlur: this.props.onBlur,
-            onFocus: this.props.onFocus,
-            onClick: this.props.onClick,
-            onOriginalItemNeeded: this.props.onOriginalItemNeeded
-          }
-        )
-      );
-    }
-    return null;
+          parentItemId: e,
+          animate: this.props.animate,
+          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,
+          className: "k-group k-menu-group k-reset k-menu-group-md",
+          onMouseOver: this.props.onMouseOver,
+          onMouseLeave: this.props.onMouseLeave,
+          onMouseDown: this.props.onMouseDown,
+          onBlur: this.props.onBlur,
+          onFocus: this.props.onFocus,
+          onClick: this.props.onClick,
+          onOriginalItemNeeded: this.props.onOriginalItemNeeded
+        }
+      )
+    );
   }
   renderMenuIconIfApplicable() {
     const { icon: e, svgIcon: t } = this.props.item;
-    return e || t ? /* @__PURE__ */ s.createElement(l, { name: e, icon: t, key: "0" }) : null;
+    return e || t ? /* @__PURE__ */ s.createElement(h, { name: e, icon: t, key: "0" }) : null;
   }
   renderArrowIfApplicable() {
     return this.props.item.items.length > 0 ? /* @__PURE__ */ s.createElement("span", { className: "k-menu-expand-arrow", "aria-hidden": !0 }, /* @__PURE__ */ s.createElement(
-      g,
+      v,
       {
         itemId: this.props.item.id,
         verticalMenu: this.props.isMenuVertical,
-        dir: p(this.props.isDirectionRightToLeft),
+        dir: m(this.props.isDirectionRightToLeft),
         key: "2"
       }
     )) : null;
@@ -209,19 +212,19 @@ class v extends s.Component {
   }
   get Opened() {
     const e = this.props;
-    return e.item.items.length > 0 && h(e.item.id, e.lastItemIdToBeOpened) && // HACK: Wait for the second render because otherwise the scenario of
+    return e.item.items.length > 0 && I(e.item.id, e.lastItemIdToBeOpened) && // HACK: Wait for the second render because otherwise the scenario of
     // popup inside popup throws an error (for example, hover of item with id '0_0').
     !this.isFirstRender;
   }
   getPopupClassName() {
-    return r("k-menu-popup", { "k-rtl": this.props.isDirectionRightToLeft });
+    return p("k-menu-popup", { "k-rtl": this.props.isDirectionRightToLeft });
   }
   getMenuItemClassName(e) {
-    return r(
+    return p(
       "k-item",
       "k-menu-item",
       {
-        "k-first": c(e.id),
+        "k-first": M(e.id),
         "k-last": e.isLastFromSiblings,
         "k-disabled": e.disabled
       },
@@ -230,6 +233,6 @@ class v extends s.Component {
   }
 }
 export {
-  v as MenuItemInternal,
-  f as MenuItemInternalsList
+  O as MenuItemInternal,
+  k as MenuItemInternalsList
 };

package/menu/consts.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={vertical:"top",horizontal:"left"},t={vertical:"top",horizontal:"right"},i={vertical:"flip",horizontal:"fit"},l={vertical:"fit",horizontal:"flip"},n={downward:{anchorAlign:{vertical:"bottom",horizontal:"right"},popupAlign:t,collision:i},leftward:{anchorAlign:{vertical:"top",horizontal:"left"},popupAlign:t,collision:l}},r={downward:{anchorAlign:{vertical:"bottom",horizontal:"left"},popupAlign:o,collision:i},rightward:{anchorAlign:{vertical:"top",horizontal:"right"},popupAlign:o,collision:l}};exports.POPUP_SETTINGS=r;exports.POPUP_SETTINGS_RTL=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i={vertical:"top",horizontal:"left"},n={vertical:"top",horizontal:"left"},l={vertical:"top",horizontal:"right"},r={vertical:"top",horizontal:"right"},o={vertical:"flip",horizontal:"fit"},t={vertical:"fit",horizontal:"flip"},a={downward:{anchorAlign:{vertical:"bottom",horizontal:"right"},popupAlign:l,collision:o,animationDirection:"down"},leftward:{anchorAlign:{vertical:"top",horizontal:"left"},popupAlign:r,collision:t,animationDirection:"left"}},c={downward:{anchorAlign:{vertical:"bottom",horizontal:"left"},popupAlign:i,collision:o,animationDirection:"down"},rightward:{anchorAlign:{vertical:"top",horizontal:"right"},popupAlign:n,collision:t,animationDirection:"right"}};exports.POPUP_SETTINGS=c;exports.POPUP_SETTINGS_RTL=a;