@progress/kendo-react-layout/menu/components/Menu.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 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;