@progress/kendo-react-layout 14.4.1 → 14.5.0-develop.1

package/menu/components/Menu.d.ts

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
 import { MenuProps } from '../MenuProps';
 import * as React from 'react';
 /**
@@ -15,7 +14,19 @@ export interface MenuState {
     focusedItemId: string;
     hoveredItemId: string;
     tabbableItemId: string;
-    isFirstRender: boolean;
+}
+/**
+ * Represent the `ref` of the Menu component.
+ */
+export interface MenuHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Resets the selection and opening of Menu items.
+     */
+    reset: () => void;
 }
 /**
  * Represents the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
@@ -39,94 +50,4 @@ export interface MenuState {
  * }
  * ```
  */
-export declare class Menu extends React.Component<MenuProps, MenuState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        vertical: PropTypes.Requireable<boolean>;
-        items: PropTypes.Requireable<(object | null | undefined)[]>;
-        style: PropTypes.Requireable<object>;
-        animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-            openDuration: PropTypes.Requireable<number>;
-            closeDuration: PropTypes.Requireable<number>;
-        }> | null | undefined>>;
-        dir: PropTypes.Requireable<string>;
-        hoverOpenDelay: PropTypes.Requireable<number>;
-        hoverCloseDelay: PropTypes.Requireable<number>;
-        openOnClick: PropTypes.Requireable<boolean>;
-        itemRender: PropTypes.Requireable<any>;
-        linkRender: PropTypes.Requireable<any>;
-        customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        role: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        vertical: boolean;
-        animate: boolean;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: MenuState;
-    private itemHoverRequest;
-    private itemLeaveRequest;
-    private menuWrapperEl;
-    private get menuItemId();
-    private directionHolder;
-    private inputItems;
-    private items;
-    private mouseOverHandler;
-    /**
-     * The current element or `null` if there is no one.
-     */
-    get element(): HTMLDivElement | null;
-    constructor(props: MenuProps);
-    protected get animate(): boolean;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: MenuProps): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * Resets the selection and opening of Menu items.
-     */
-    reset: () => void;
-    private handleClickOutside;
-    private onKeyDown;
-    private onItemMouseOver;
-    private onItemMouseLeave;
-    private onItemFocus;
-    private onItemClick;
-    private onPopupClose;
-    private onItemBlur;
-    private getInputItem;
-    private setFocusedItemId;
-    private setHoveredItemId;
-    private getMenuClassName;
-    private clearItemHoverAndLeaveRequestsIfApplicable;
-    private isItemWithDefaultClose;
-    private checkIsDirectionRightToLeft;
-    private prepareItems;
-    private dispatchSelectEventIfWired;
-}
-/**
- * Represent the `ref` of the Menu component.
- */
-export interface MenuHandle extends Pick<Menu, keyof Menu> {
-}
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuHandle>>;

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 v=require("react"),r=require("prop-types"),a=require("@progress/kendo-react-common"),s=require("../utils/itemsIdsUtils.js"),f=require("../utils/prepareInputItemsForInternalWork.js"),c=require("../utils/getNewItemIdUponKeyboardNavigation.js"),u=require("../utils/hoverDelay.js"),g=require("./MenuItemInternal.js"),b=require("../utils/DirectionHolder.js"),D=require("../utils/MouseOverHandler.js");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>n[e]})}}return i.default=n,Object.freeze(i)}const h=E(v),p={focusedItemId:s.EMPTY_ID,hoveredItemId:s.EMPTY_ID,tabbableItemId:s.ZERO_LEVEL_ZERO_ITEM_ID},l=class l extends h.Component{constructor(i){super(i),this.menuWrapperEl=null,this.directionHolder=new b.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(p)},this.handleClickOutside=e=>{var t;if(this.props.openOnClick&&this.state.hoveredItemId!==s.EMPTY_ID){const o=e.target;this.menuWrapperEl&&!this.menuWrapperEl.contains(o)&&(this.menuItemId&&((t=o.closest)!=null&&t.call(o,`[id^="${this.menuItemId}_"]`))||this.setHoveredItemId(s.EMPTY_ID))}},this.onKeyDown=e=>{if(this.state.focusedItemId!==s.EMPTY_ID){const t=s.getItemById(this.state.focusedItemId,this.items);let o=c.getNewItemIdUponKeyboardNavigation(this.items,t.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());const d=s.getItemById(o,this.items);if(d&&d.separator&&(o=c.getNewItemIdUponKeyboardNavigation(this.items,o,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft())),t.id!==o&&(e.preventDefault(),this.setFocusedItemId(o)),(e.keyCode===a.Keys.enter||e.keyCode===a.Keys.space)&&!t.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,t.id),!e.isDefaultPrevented()&&t.items.length===0&&t.url&&window.location.assign(t.url)),e.keyCode===a.Keys.esc&&s.isIdZeroLevel(t.id)&&this.props.onClose){const I=this.getInputItem(t.id);this.props.onClose({target:this,item:I,itemId:t.id})}}},this.onItemMouseOver=e=>{const t=this.props.openOnClick&&!s.isIdZeroLevel(e)&&this.state.hoveredItemId!==s.EMPTY_ID;(this.mouseOverHandler.IsMouseOverEnabled||t)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},u.getHoverOpenDelay(this.props)))},this.onItemMouseLeave=e=>{const t=this.props.openOnClick&&!s.isIdZeroLevel(e)&&this.state.hoveredItemId!==s.EMPTY_ID;(this.mouseOverHandler.IsMouseOverEnabled||t)&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{t?this.setHoveredItemId(s.getDirectParentId(e)):this.setHoveredItemId(s.EMPTY_ID),this.itemLeaveRequest=null},u.getHoverCloseDelay(this.props)))},this.onItemFocus=e=>{this.state.hoveredItemId===s.EMPTY_ID?this.setFocusedItemId(e):this.setState(t=>({focusedItemId:e,hoveredItemId:t.hoveredItemId,tabbableItemId:s.getRootParentId(e)}))},this.onItemClick=(e,t)=>{const o=s.getItemById(t,this.items);if(!o.disabled){const d=s.isIdZeroLevel(t),I=!o.items||o.items.length===0;d?(this.setFocusedItemId(t),I?this.setHoveredItemId(s.EMPTY_ID):this.props.openOnClick&&this.state.hoveredItemId!==s.EMPTY_ID&&s.getRootParentId(this.state.hoveredItemId)===t?this.setHoveredItemId(s.EMPTY_ID):this.setHoveredItemId(t)):I&&(this.setFocusedItemId(t),this.setHoveredItemId(s.EMPTY_ID)),this.dispatchSelectEventIfWired(e,t),!e.isDefaultPrevented()&&o.url&&window.location.assign(o.url)}},this.onPopupClose=(e,t)=>{this.props.onClose&&this.props.onClose({target:this,item:this.getInputItem(e),itemId:e,popupCloseEvent:t})},this.onItemBlur=(e,t)=>{if(this.isItemWithDefaultClose(e)&&this.setFocusedItemId(s.EMPTY_ID),t.relatedTarget&&t.relatedTarget.nodeName==="LI"){const o=t.relatedTarget.getAttribute("id");if(o&&o.includes(this.menuItemId))return}if(s.isIdZeroLevel(e)&&this.props.onClose){const o=this.getInputItem(e);this.props.onClose({target:this,item:o,itemId:e})}},this.getInputItem=e=>s.getItemById(e,this.inputItems),this.mouseOverHandler=new D.MouseOverHandler(this.props.openOnClick,this.reset),this.state=Object.assign({},p,{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 i=this.state.hoveredItemId?this.state.hoveredItemId:this.state.focusedItemId?s.getDirectParentId(this.state.focusedItemId):s.EMPTY_ID;return h.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}},h.createElement(g.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:i,tabbableItemId:this.state.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.menuItemId,onMouseLeave:this.onItemMouseLeave,onMouseOver:this.onItemMouseOver,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,onOriginalItemNeeded:this.getInputItem,onPopupClose:this.onPopupClose,role:this.props.role}))}componentDidMount(){this.setState({isFirstRender:!1}),this.props.openOnClick&&document.addEventListener("mousedown",this.handleClickOutside)}componentDidUpdate(i){(!!i.vertical!=!!this.props.vertical||this.directionHolder.hasDirectionChanged())&&this.reset(),this.mouseOverHandler.OpenOnClick=this.props.openOnClick,i.openOnClick!==this.props.openOnClick&&(this.props.openOnClick?document.addEventListener("mousedown",this.handleClickOutside):document.removeEventListener("mousedown",this.handleClickOutside))}componentWillUnmount(){this.clearItemHoverAndLeaveRequestsIfApplicable(),document.removeEventListener("mousedown",this.handleClickOutside)}setFocusedItemId(i){this.setState(e=>{const t=i===s.EMPTY_ID?e.tabbableItemId:s.getRootParentId(i);return{hoveredItemId:i===s.EMPTY_ID||s.isIdEmptyOrZeroLevel(e.hoveredItemId)&&s.isIdEmptyOrZeroLevel(i)?e.hoveredItemId:s.EMPTY_ID,focusedItemId:i,tabbableItemId:t}})}setHoveredItemId(i){this.setState(e=>s.isIdEmptyOrZeroLevel(i)&&s.isIdEmptyOrZeroLevel(e.focusedItemId)?{hoveredItemId:i,focusedItemId:e.focusedItemId,tabbableItemId:e.tabbableItemId}:{hoveredItemId:i,focusedItemId:s.EMPTY_ID,tabbableItemId:s.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(i){return!this.props.customCloseItemIds||this.props.customCloseItemIds.indexOf(i)===-1}checkIsDirectionRightToLeft(){return!!(this.props.dir!==void 0?this.props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl")}prepareItems(){const{items:i,inputItems:e}=f.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=i,this.inputItems=e}dispatchSelectEventIfWired(i,e){a.dispatchEvent(this.props.onSelect,i,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:r.bool,items:r.arrayOf(r.object),style:r.object,animate:r.oneOfType([r.bool,r.shape({openDuration:r.number,closeDuration:r.number})]),dir:r.string,hoverOpenDelay:r.number,hoverCloseDelay:r.number,openOnClick:r.bool,itemRender:r.any,linkRender:r.any,customCloseItemIds:r.arrayOf(r.string),onSelect:r.func,onClose:r.func,role:r.string},l.defaultProps={vertical:!1,animate:!0};let m=l;exports.Menu=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),i=require("prop-types"),M=require("@progress/kendo-react-common"),t=require("../utils/itemsIdsUtils.js"),ee=require("../utils/prepareInputItemsForInternalWork.js"),Z=require("../utils/getNewItemIdUponKeyboardNavigation.js"),B=require("../utils/hoverDelay.js"),te=require("./MenuItemInternal.js"),re=require("../utils/DirectionHolder.js"),ne=require("../utils/MouseOverHandler.js");function oe(o){const D=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const I in o)if(I!=="default"){const b=Object.getOwnPropertyDescriptor(o,I);Object.defineProperty(D,I,b.get?b:{enumerable:!0,get:()=>o[I]})}}return D.default=o,Object.freeze(D)}const n=oe(X),K={focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID},S=n.forwardRef((o,D)=>{const I=n.useRef(null),b=n.useRef(null),y=n.useRef(null),R=n.useRef(new re.DirectionHolder),O=n.useRef([]),N=n.useRef([]),l=n.useRef(o);l.current=o;const[v,h]=n.useState({...K}),C=n.useRef(v);C.current=v;const w=n.useRef(()=>{}),P=n.useRef(new ne.MouseOverHandler(o.openOnClick,()=>w.current())),{items:j,inputItems:F}=ee.prepareInputItemsForInternalWork(o.items,o.children);O.current=j,N.current=F,R.current.setIsDirectionRightToLeft(V());function V(){return!!(l.current.dir!==void 0?l.current.dir==="rtl":I.current&&getComputedStyle(I.current).direction==="rtl")}const g=n.useCallback(()=>{b.current&&(clearTimeout(b.current),b.current=null),y.current&&(clearTimeout(y.current),y.current=null)},[]),H=n.useCallback(()=>{g(),h({...K})},[g]);w.current=H;const E=n.useRef({get element(){return I.current},reset:()=>w.current()});n.useImperativeHandle(D,()=>E.current,[]);const m=n.useCallback(e=>{h(r=>{const c=e===t.EMPTY_ID?r.tabbableItemId:t.getRootParentId(e);return{hoveredItemId:e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(r.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?r.hoveredItemId:t.EMPTY_ID,focusedItemId:e,tabbableItemId:c}})},[]),a=n.useCallback(e=>{h(r=>t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(r.focusedItemId)?{hoveredItemId:e,focusedItemId:r.focusedItemId,tabbableItemId:r.tabbableItemId}:{hoveredItemId:e,focusedItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID})},[]),f=n.useCallback(e=>t.getItemById(e,N.current),[]),T=n.useCallback((e,r)=>{M.dispatchEvent(l.current.onSelect,e,E.current,{item:f(r),itemId:r})},[f]),_=n.useCallback(e=>!l.current.customCloseItemIds||l.current.customCloseItemIds.indexOf(e)===-1,[]),Y=n.useCallback(e=>{var s,u;const r=l.current,c=C.current;if(r.openOnClick&&c.hoveredItemId!==t.EMPTY_ID){const d=e.target;((s=I.current)==null?void 0:s.contains(d))===!1&&(r.id&&((u=d.closest)!=null&&u.call(d,`[id^="${r.id}_"]`))||a(t.EMPTY_ID))}},[a]),W=n.useCallback(e=>{const r=C.current,c=l.current,s=O.current;if(r.focusedItemId!==t.EMPTY_ID){const u=t.getItemById(r.focusedItemId,s);let d=Z.getNewItemIdUponKeyboardNavigation(s,u.id,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft());const k=t.getItemById(d,s);if(k!=null&&k.separator&&(d=Z.getNewItemIdUponKeyboardNavigation(s,d,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft())),u.id!==d&&(e.preventDefault(),m(d)),(e.keyCode===M.Keys.enter||e.keyCode===M.Keys.space)&&!u.disabled&&(P.current.handleItemSelectedViaKeyboard(),T(e,u.id),!e.isDefaultPrevented()&&u.items.length===0&&u.url&&window.location.assign(u.url)),e.keyCode===M.Keys.esc&&t.isIdZeroLevel(u.id)&&c.onClose){const p=f(u.id);c.onClose({target:E.current,item:p,itemId:u.id})}}},[m,T,f]),U=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&(g(),b.current=window.setTimeout(()=>{a(e),b.current=null},B.getHoverOpenDelay(c)))},[g,a]),A=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&_(e)&&(g(),y.current=window.setTimeout(()=>{a(s?t.getDirectParentId(e):t.EMPTY_ID),y.current=null},B.getHoverCloseDelay(c)))},[g,_,a]),z=n.useCallback(e=>{C.current.hoveredItemId===t.EMPTY_ID?m(e):h(c=>({focusedItemId:e,hoveredItemId:c.hoveredItemId,tabbableItemId:t.getRootParentId(e)}))},[m]),G=n.useCallback((e,r)=>{const c=O.current,s=t.getItemById(r,c),u=C.current,d=l.current;if(!s.disabled){const k=t.isIdZeroLevel(r),p=!s.items||s.items.length===0;k?(m(r),p||d.openOnClick&&u.hoveredItemId!==t.EMPTY_ID&&t.getRootParentId(u.hoveredItemId)===r?a(t.EMPTY_ID):a(r)):p&&(m(r),a(t.EMPTY_ID)),T(e,r),!e.isDefaultPrevented()&&s.url&&window.location.assign(s.url)}},[m,a,T]),$=n.useCallback((e,r)=>{const c=l.current;c.onClose&&c.onClose({target:E.current,item:f(e),itemId:e,popupCloseEvent:r})},[f]),x=n.useCallback((e,r)=>{var s;const c=l.current;if(_(e)&&m(t.EMPTY_ID),((s=r.relatedTarget)==null?void 0:s.nodeName)==="LI"){const u=r.relatedTarget.getAttribute("id");if(u!=null&&u.includes(c.id))return}if(t.isIdZeroLevel(e)&&c.onClose){const u=f(e);c.onClose({target:E.current,item:u,itemId:e})}},[_,m,f]),q=n.useRef(o.vertical);n.useEffect(()=>()=>{g()},[g]),n.useEffect(()=>(o.openOnClick&&document.addEventListener("mousedown",Y),()=>{document.removeEventListener("mousedown",Y)}),[o.openOnClick,Y]),n.useEffect(()=>{const e=!!q.current!=!!o.vertical,r=R.current.hasDirectionChanged();(e||r)&&H(),P.current.OpenOnClick=o.openOnClick,q.current=o.vertical});const J=()=>M.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!o.vertical},{"k-menu-vertical":o.vertical},o.className);let L;v.hoveredItemId?L=v.hoveredItemId:v.focusedItemId?L=t.getDirectParentId(v.focusedItemId):L=t.EMPTY_ID;const Q=o.animate!==void 0?o.animate:!0;return n.createElement("div",{id:o.id,onKeyDown:W,style:o.style,className:R.current.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:I},n.createElement(te.MenuItemInternalsList,{className:J(),"aria-orientation":o.vertical?"vertical":void 0,items:O.current,animate:Q,isMenuVertical:o.vertical,isDirectionRightToLeft:R.current.getIsDirectionRightToLeft(),focusedItemId:v.focusedItemId,lastItemIdToBeOpened:L,tabbableItemId:v.tabbableItemId,itemRender:o.itemRender,linkRender:o.linkRender,menuGuid:o.id,onMouseLeave:A,onMouseOver:U,onFocus:z,onClick:G,onBlur:x,onOriginalItemNeeded:f,onPopupClose:$,role:o.role}))});S.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,openOnClick:i.bool,itemRender:i.any,linkRender:i.any,customCloseItemIds:i.arrayOf(i.string),onSelect:i.func,onClose:i.func,role:i.string};S.displayName="Menu";exports.Menu=S;

package/menu/components/Menu.mjs

@@ -5,240 +5,251 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as p from "react";
-import o from "prop-types";
-import { Keys as I, classNames as C, dispatchEvent as k } from "@progress/kendo-react-common";
-import { ZERO_LEVEL_ZERO_ITEM_ID as g, EMPTY_ID as r, getItemById as l, isIdZeroLevel as d, getDirectParentId as c, getRootParentId as u, isIdEmptyOrZeroLevel as m } from "../utils/itemsIdsUtils.mjs";
-import { prepareInputItemsForInternalWork as O } from "../utils/prepareInputItemsForInternalWork.mjs";
-import { getNewItemIdUponKeyboardNavigation as f } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
-import { getHoverOpenDelay as H, getHoverCloseDelay as R } from "../utils/hoverDelay.mjs";
-import { MenuItemInternalsList as L } from "./MenuItemInternal.mjs";
-import { DirectionHolder as y } from "../utils/DirectionHolder.mjs";
-import { MouseOverHandler as D } from "../utils/MouseOverHandler.mjs";
-const v = {
-  focusedItemId: r,
-  hoveredItemId: r,
-  tabbableItemId: g
-}, h = class h extends p.Component {
-  constructor(s) {
-    super(s), this.menuWrapperEl = null, this.directionHolder = new y(), this.inputItems = [], this.items = [], this.reset = () => {
-      this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(v);
-    }, this.handleClickOutside = (e) => {
-      var t;
-      if (this.props.openOnClick && this.state.hoveredItemId !== r) {
-        const i = e.target;
-        this.menuWrapperEl && !this.menuWrapperEl.contains(i) && (this.menuItemId && ((t = i.closest) != null && t.call(i, `[id^="${this.menuItemId}_"]`)) || this.setHoveredItemId(r));
+import * as r from "react";
+import u from "prop-types";
+import { dispatchEvent as oe, Keys as B, classNames as ce } from "@progress/kendo-react-common";
+import { ZERO_LEVEL_ZERO_ITEM_ID as A, EMPTY_ID as i, getRootParentId as _, isIdEmptyOrZeroLevel as P, getItemById as S, isIdZeroLevel as O, getDirectParentId as W } from "../utils/itemsIdsUtils.mjs";
+import { prepareInputItemsForInternalWork as se } from "../utils/prepareInputItemsForInternalWork.mjs";
+import { getNewItemIdUponKeyboardNavigation as Z } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
+import { getHoverOpenDelay as ue, getHoverCloseDelay as ie } from "../utils/hoverDelay.mjs";
+import { MenuItemInternalsList as le } from "./MenuItemInternal.mjs";
+import { DirectionHolder as ae } from "../utils/DirectionHolder.mjs";
+import { MouseOverHandler as de } from "../utils/MouseOverHandler.mjs";
+const q = {
+  focusedItemId: i,
+  hoveredItemId: i,
+  tabbableItemId: A
+}, j = r.forwardRef((o, x) => {
+  const R = r.useRef(null), g = r.useRef(null), h = r.useRef(null), k = r.useRef(new ae()), D = r.useRef([]), F = r.useRef([]), l = r.useRef(o);
+  l.current = o;
+  const [f, L] = r.useState({ ...q }), C = r.useRef(f);
+  C.current = f;
+  const H = r.useRef(() => {
+  }), p = r.useRef(new de(o.openOnClick, () => H.current())), { items: z, inputItems: G } = se(
+    o.items,
+    o.children
+  );
+  D.current = z, F.current = G, k.current.setIsDirectionRightToLeft(U());
+  function U() {
+    return !!(l.current.dir !== void 0 ? l.current.dir === "rtl" : R.current && getComputedStyle(R.current).direction === "rtl");
+  }
+  const b = r.useCallback(() => {
+    g.current && (clearTimeout(g.current), g.current = null), h.current && (clearTimeout(h.current), h.current = null);
+  }, []), K = r.useCallback(() => {
+    b(), L({ ...q });
+  }, [b]);
+  H.current = K;
+  const y = r.useRef({
+    get element() {
+      return R.current;
+    },
+    reset: () => H.current()
+  });
+  r.useImperativeHandle(x, () => y.current, []);
+  const m = r.useCallback((e) => {
+    L((t) => {
+      const n = e === i ? t.tabbableItemId : _(e);
+      return { hoveredItemId: e === i || P(t.hoveredItemId) && P(e) ? t.hoveredItemId : i, focusedItemId: e, tabbableItemId: n };
+    });
+  }, []), a = r.useCallback((e) => {
+    L((t) => P(e) && P(t.focusedItemId) ? {
+      hoveredItemId: e,
+      focusedItemId: t.focusedItemId,
+      tabbableItemId: t.tabbableItemId
+    } : { hoveredItemId: e, focusedItemId: i, tabbableItemId: A });
+  }, []), I = r.useCallback((e) => S(e, F.current), []), T = r.useCallback(
+    (e, t) => {
+      oe(l.current.onSelect, e, y.current, {
+        item: I(t),
+        itemId: t
+      });
+    },
+    [I]
+  ), E = r.useCallback((e) => !l.current.customCloseItemIds || l.current.customCloseItemIds.indexOf(e) === -1, []), N = r.useCallback(
+    (e) => {
+      var c, s;
+      const t = l.current, n = C.current;
+      if (t.openOnClick && n.hoveredItemId !== i) {
+        const d = e.target;
+        ((c = R.current) == null ? void 0 : c.contains(d)) === !1 && (t.id && ((s = d.closest) != null && s.call(d, `[id^="${t.id}_"]`)) || a(i));
       }
-    }, this.onKeyDown = (e) => {
-      if (this.state.focusedItemId !== r) {
-        const t = l(this.state.focusedItemId, this.items);
-        let i = f(
-          this.items,
-          t.id,
+    },
+    [a]
+  ), Y = r.useCallback(
+    (e) => {
+      const t = C.current, n = l.current, c = D.current;
+      if (t.focusedItemId !== i) {
+        const s = S(t.focusedItemId, c);
+        let d = Z(
+          c,
+          s.id,
           e.keyCode,
           e.key,
-          this.props.vertical,
-          this.directionHolder.getIsDirectionRightToLeft()
+          n.vertical,
+          k.current.getIsDirectionRightToLeft()
         );
-        const n = l(i, this.items);
-        if (n && n.separator && (i = f(
-          this.items,
-          i,
+        const v = S(d, c);
+        if (v != null && v.separator && (d = Z(
+          c,
+          d,
           e.keyCode,
           e.key,
-          this.props.vertical,
-          this.directionHolder.getIsDirectionRightToLeft()
-        )), t.id !== i && (e.preventDefault(), this.setFocusedItemId(i)), (e.keyCode === I.enter || e.keyCode === I.space) && !t.disabled && (this.mouseOverHandler.handleItemSelectedViaKeyboard(), this.dispatchSelectEventIfWired(e, t.id), !e.isDefaultPrevented() && t.items.length === 0 && t.url && window.location.assign(t.url)), e.keyCode === I.esc && d(t.id) && this.props.onClose) {
-          const a = this.getInputItem(t.id);
-          this.props.onClose({
-            target: this,
-            item: a,
-            itemId: t.id
+          n.vertical,
+          k.current.getIsDirectionRightToLeft()
+        )), s.id !== d && (e.preventDefault(), m(d)), (e.keyCode === B.enter || e.keyCode === B.space) && !s.disabled && (p.current.handleItemSelectedViaKeyboard(), T(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url && window.location.assign(s.url)), e.keyCode === B.esc && O(s.id) && n.onClose) {
+          const w = I(s.id);
+          n.onClose({
+            target: y.current,
+            item: w,
+            itemId: s.id
           });
         }
       }
-    }, this.onItemMouseOver = (e) => {
-      const t = this.props.openOnClick && !d(e) && this.state.hoveredItemId !== r;
-      (this.mouseOverHandler.IsMouseOverEnabled || t) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemHoverRequest = window.setTimeout(() => {
-        this.setHoveredItemId(e), this.itemHoverRequest = null;
-      }, H(this.props)));
-    }, this.onItemMouseLeave = (e) => {
-      const t = this.props.openOnClick && !d(e) && this.state.hoveredItemId !== r;
-      (this.mouseOverHandler.IsMouseOverEnabled || t) && this.isItemWithDefaultClose(e) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemLeaveRequest = window.setTimeout(() => {
-        t ? this.setHoveredItemId(c(e)) : this.setHoveredItemId(r), this.itemLeaveRequest = null;
-      }, R(this.props)));
-    }, this.onItemFocus = (e) => {
-      this.state.hoveredItemId === r ? this.setFocusedItemId(e) : this.setState((t) => ({
+    },
+    [m, T, I]
+  ), $ = r.useCallback(
+    (e) => {
+      const t = C.current, n = l.current, c = n.openOnClick && !O(e) && t.hoveredItemId !== i;
+      (p.current.IsMouseOverEnabled || c) && (b(), g.current = window.setTimeout(() => {
+        a(e), g.current = null;
+      }, ue(n)));
+    },
+    [b, a]
+  ), J = r.useCallback(
+    (e) => {
+      const t = C.current, n = l.current, c = n.openOnClick && !O(e) && t.hoveredItemId !== i;
+      (p.current.IsMouseOverEnabled || c) && E(e) && (b(), h.current = window.setTimeout(() => {
+        a(c ? W(e) : i), h.current = null;
+      }, ie(n)));
+    },
+    [b, E, a]
+  ), Q = r.useCallback(
+    (e) => {
+      C.current.hoveredItemId === i ? m(e) : L((n) => ({
         focusedItemId: e,
-        hoveredItemId: t.hoveredItemId,
-        tabbableItemId: u(e)
+        hoveredItemId: n.hoveredItemId,
+        tabbableItemId: _(e)
       }));
-    }, this.onItemClick = (e, t) => {
-      const i = l(t, this.items);
-      if (!i.disabled) {
-        const n = d(t), a = !i.items || i.items.length === 0;
-        n ? (this.setFocusedItemId(t), a ? this.setHoveredItemId(r) : this.props.openOnClick && this.state.hoveredItemId !== r && u(this.state.hoveredItemId) === t ? this.setHoveredItemId(r) : this.setHoveredItemId(t)) : a && (this.setFocusedItemId(t), this.setHoveredItemId(r)), this.dispatchSelectEventIfWired(e, t), !e.isDefaultPrevented() && i.url && window.location.assign(i.url);
+    },
+    [m]
+  ), X = r.useCallback(
+    (e, t) => {
+      const n = D.current, c = S(t, n), s = C.current, d = l.current;
+      if (!c.disabled) {
+        const v = O(t), w = !c.items || c.items.length === 0;
+        v ? (m(t), w ? a(i) : d.openOnClick && s.hoveredItemId !== i && _(s.hoveredItemId) === t ? a(i) : a(t)) : w && (m(t), a(i)), T(e, t), !e.isDefaultPrevented() && c.url && window.location.assign(c.url);
       }
-    }, this.onPopupClose = (e, t) => {
-      this.props.onClose && this.props.onClose({
-        target: this,
-        item: this.getInputItem(e),
+    },
+    [m, a, T]
+  ), ee = r.useCallback(
+    (e, t) => {
+      const n = l.current;
+      n.onClose && n.onClose({
+        target: y.current,
+        item: I(e),
         itemId: e,
         popupCloseEvent: t
       });
-    }, this.onItemBlur = (e, t) => {
-      if (this.isItemWithDefaultClose(e) && this.setFocusedItemId(r), t.relatedTarget && t.relatedTarget.nodeName === "LI") {
-        const i = t.relatedTarget.getAttribute("id");
-        if (i && i.includes(this.menuItemId))
+    },
+    [I]
+  ), te = r.useCallback(
+    (e, t) => {
+      var c;
+      const n = l.current;
+      if (E(e) && m(i), ((c = t.relatedTarget) == null ? void 0 : c.nodeName) === "LI") {
+        const s = t.relatedTarget.getAttribute("id");
+        if (s != null && s.includes(n.id))
           return;
       }
-      if (d(e) && this.props.onClose) {
-        const i = this.getInputItem(e);
-        this.props.onClose({
-          target: this,
-          item: i,
+      if (O(e) && n.onClose) {
+        const s = I(e);
+        n.onClose({
+          target: y.current,
+          item: s,
           itemId: e
         });
       }
-    }, this.getInputItem = (e) => l(e, this.inputItems), this.mouseOverHandler = new D(this.props.openOnClick, this.reset), this.state = Object.assign({}, v, { isFirstRender: !0 });
-  }
-  get menuItemId() {
-    return this.props.id;
-  }
-  /**
-   * The current element or `null` if there is no one.
-   */
-  get element() {
-    return this.menuWrapperEl;
-  }
-  get animate() {
-    return this.props.animate !== void 0 ? this.props.animate : h.defaultProps.animate;
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    this.prepareItems(), this.state.isFirstRender || this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
-    const s = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ? c(this.state.focusedItemId) : r;
-    return /* @__PURE__ */ p.createElement(
-      "div",
+    },
+    [E, m, I]
+  ), V = r.useRef(o.vertical);
+  r.useEffect(() => () => {
+    b();
+  }, [b]), r.useEffect(() => (o.openOnClick && document.addEventListener("mousedown", N), () => {
+    document.removeEventListener("mousedown", N);
+  }), [o.openOnClick, N]), r.useEffect(() => {
+    const e = !!V.current != !!o.vertical, t = k.current.hasDirectionChanged();
+    (e || t) && K(), p.current.OpenOnClick = o.openOnClick, V.current = o.vertical;
+  });
+  const re = () => ce(
+    "k-reset",
+    "k-header",
+    "k-menu",
+    { "k-menu-horizontal": !o.vertical },
+    { "k-menu-vertical": o.vertical },
+    o.className
+  );
+  let M;
+  f.hoveredItemId ? M = f.hoveredItemId : f.focusedItemId ? M = W(f.focusedItemId) : M = i;
+  const ne = o.animate !== void 0 ? o.animate : !0;
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      id: o.id,
+      onKeyDown: Y,
+      style: o.style,
+      className: k.current.getIsDirectionRightToLeft() ? "k-rtl" : void 0,
+      ref: R
+    },
+    /* @__PURE__ */ r.createElement(
+      le,
       {
-        id: this.props.id,
-        onKeyDown: this.onKeyDown,
-        style: this.props.style,
-        className: this.directionHolder.getIsDirectionRightToLeft() ? "k-rtl" : void 0,
-        ref: (e) => {
-          this.menuWrapperEl = e;
-        }
-      },
-      /* @__PURE__ */ p.createElement(
-        L,
-        {
-          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: s,
-          tabbableItemId: this.state.tabbableItemId,
-          itemRender: this.props.itemRender,
-          linkRender: this.props.linkRender,
-          menuGuid: this.menuItemId,
-          onMouseLeave: this.onItemMouseLeave,
-          onMouseOver: this.onItemMouseOver,
-          onFocus: this.onItemFocus,
-          onClick: this.onItemClick,
-          onBlur: this.onItemBlur,
-          onOriginalItemNeeded: this.getInputItem,
-          onPopupClose: this.onPopupClose,
-          role: this.props.role
-        }
-      )
-    );
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.setState({ isFirstRender: !1 }), this.props.openOnClick && document.addEventListener("mousedown", this.handleClickOutside);
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(s) {
-    (!!s.vertical != !!this.props.vertical || this.directionHolder.hasDirectionChanged()) && this.reset(), this.mouseOverHandler.OpenOnClick = this.props.openOnClick, s.openOnClick !== this.props.openOnClick && (this.props.openOnClick ? document.addEventListener("mousedown", this.handleClickOutside) : document.removeEventListener("mousedown", this.handleClickOutside));
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    this.clearItemHoverAndLeaveRequestsIfApplicable(), document.removeEventListener("mousedown", this.handleClickOutside);
-  }
-  setFocusedItemId(s) {
-    this.setState((e) => {
-      const t = s === r ? e.tabbableItemId : u(s);
-      return { hoveredItemId: s === r || m(e.hoveredItemId) && m(s) ? e.hoveredItemId : r, focusedItemId: s, tabbableItemId: t };
-    });
-  }
-  setHoveredItemId(s) {
-    this.setState((e) => m(s) && m(e.focusedItemId) ? {
-      hoveredItemId: s,
-      focusedItemId: e.focusedItemId,
-      tabbableItemId: e.tabbableItemId
-    } : { hoveredItemId: s, focusedItemId: r, tabbableItemId: g });
-  }
-  getMenuClassName() {
-    return C(
-      "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(s) {
-    return !this.props.customCloseItemIds || this.props.customCloseItemIds.indexOf(s) === -1;
-  }
-  checkIsDirectionRightToLeft() {
-    return !!(this.props.dir !== void 0 ? this.props.dir === "rtl" : this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === "rtl");
-  }
-  prepareItems() {
-    const { items: s, inputItems: e } = O(this.props.items, this.props.children);
-    this.items = s, this.inputItems = e;
-  }
-  dispatchSelectEventIfWired(s, e) {
-    k(this.props.onSelect, s, this, { item: this.getInputItem(e), itemId: e });
-  }
-};
-h.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
+        className: re(),
+        "aria-orientation": o.vertical ? "vertical" : void 0,
+        items: D.current,
+        animate: ne,
+        isMenuVertical: o.vertical,
+        isDirectionRightToLeft: k.current.getIsDirectionRightToLeft(),
+        focusedItemId: f.focusedItemId,
+        lastItemIdToBeOpened: M,
+        tabbableItemId: f.tabbableItemId,
+        itemRender: o.itemRender,
+        linkRender: o.linkRender,
+        menuGuid: o.id,
+        onMouseLeave: J,
+        onMouseOver: $,
+        onFocus: Q,
+        onClick: X,
+        onBlur: te,
+        onOriginalItemNeeded: I,
+        onPopupClose: ee,
+        role: o.role
+      }
+    )
+  );
+});
+j.propTypes = {
+  vertical: u.bool,
+  items: u.arrayOf(u.object),
+  style: u.object,
+  animate: u.oneOfType([
+    u.bool,
+    u.shape({
+      openDuration: u.number,
+      closeDuration: u.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,
-  onClose: o.func,
-  role: o.string
-}, h.defaultProps = { vertical: !1, animate: !0 };
-let b = h;
+  dir: u.string,
+  hoverOpenDelay: u.number,
+  hoverCloseDelay: u.number,
+  openOnClick: u.bool,
+  itemRender: u.any,
+  linkRender: u.any,
+  customCloseItemIds: u.arrayOf(u.string),
+  onSelect: u.func,
+  onClose: u.func,
+  role: u.string
+};
+j.displayName = "Menu";
 export {
-  b as Menu
+  j as Menu
 };