@progress/kendo-react-layout/menu/components/MenuItemInternal.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 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;