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

package/menu/components/MenuItemArrow.mjs

@@ -6,43 +6,34 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as e from "react";
-import t from "prop-types";
-import { IconWrap as n } from "@progress/kendo-react-common";
-import { caretAltLeftIcon as i, caretAltRightIcon as a, caretAltDownIcon as c } from "@progress/kendo-svg-icons";
-import { getChildrenPosition as s } from "../utils/misc.mjs";
-const l = "caret-alt-down", p = "caret-alt-right", d = "caret-alt-left", r = class r extends e.Component {
-  /**
-   * @hidden
-   */
-  render() {
-    return /* @__PURE__ */ e.createElement(n, { "aria-hidden": !0, ...this.getIcon() });
+import r from "prop-types";
+import { IconWrap as o } from "@progress/kendo-react-common";
+import { caretAltLeftIcon as n, caretAltRightIcon as i, caretAltDownIcon as a } from "@progress/kendo-svg-icons";
+import { getChildrenPosition as c } from "../utils/misc.mjs";
+const m = "caret-alt-down", l = "caret-alt-right", d = "caret-alt-left", s = (t) => {
+  switch (c(
+    t.itemId,
+    t.verticalMenu === !0,
+    t.dir === "rtl"
+  )) {
+    case "downward":
+      return { name: m, icon: a };
+    case "rightward":
+      return { name: l, icon: i };
+    case "leftward":
+      return { name: d, icon: n };
+    default:
+      return {};
   }
-  getIcon() {
-    switch (s(
-      this.props.itemId,
-      this.props.verticalMenu === !0,
-      this.props.dir === "rtl"
-    )) {
-      case "downward":
-        return { name: l, icon: c };
-      case "rightward":
-        return { name: p, icon: a };
-      case "leftward":
-        return { name: d, icon: i };
-      default:
-        return {};
-    }
-  }
-};
-r.propTypes = {
-  itemId: t.string,
-  dir: t.string,
-  verticalMenu: t.bool
+}, w = (t) => /* @__PURE__ */ e.createElement(o, { "aria-hidden": !0, ...s(t) });
+w.propTypes = {
+  itemId: r.string,
+  dir: r.string,
+  verticalMenu: r.bool
 };
-let o = r;
 export {
-  o as MenuItemArrow,
-  l as downArrowName,
+  w as MenuItemArrow,
+  m as downArrowName,
   d as leftArrowName,
-  p as rightArrowName
+  l as rightArrowName
 };

package/menu/components/MenuItemInternal.d.ts

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { MenuItemInternalModel } from '../models/MenuItemModel.js';
+import { MenuItemInternalModel } from '../models/MenuItemModel';
 import { PopupAnimation } from '@progress/kendo-react-popup';
-import { BaseMenuItemInternalProps } from './../BaseMenuItemInternalProps.js';
+import { BaseMenuItemInternalProps } from './../BaseMenuItemInternalProps';
 import * as React from 'react';
 /**
  * @hidden
@@ -23,12 +23,7 @@ export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
 /**
  * @hidden
  */
-export declare class MenuItemInternalsList extends React.Component<MenuItemInternalsListProps, {}> {
-    render(): React.JSX.Element;
-    private renderChildItems;
-    private onMouseOver;
-    private onMouseLeave;
-}
+export declare const MenuItemInternalsList: (props: MenuItemInternalsListProps) => React.JSX.Element;
 /**
  * @hidden
  */
@@ -39,32 +34,4 @@ export interface MenuItemInternalProps extends BaseMenuItemInternalProps {
 /**
  * @hidden
  */
-export interface MenuItemInternalState {
-    opened: boolean;
-}
-/**
- * @hidden
- */
-export declare class MenuItemInternal extends React.Component<MenuItemInternalProps, MenuItemInternalState> {
-    readonly state: MenuItemInternalState;
-    private itemElement;
-    private isFirstRender;
-    constructor(props: MenuItemInternalProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: MenuItemInternalProps): void;
-    render(): React.JSX.Element;
-    private renderContent;
-    private renderMenuItemLink;
-    private renderPopupIfOpened;
-    private renderMenuIconIfApplicable;
-    private renderArrowIfApplicable;
-    private onMouseOver;
-    private onMouseLeave;
-    private get itemRender();
-    private onPopupClose;
-    private get linkRender();
-    private get contentRender();
-    private get Opened();
-    private getPopupClassName;
-    private getMenuItemClassName;
-}
+export declare const MenuItemInternal: (props: MenuItemInternalProps) => React.JSX.Element;

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

package/menu/components/MenuItemInternal.mjs

@@ -5,240 +5,195 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as s from "react";
-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 g } from "../utils/itemsIdsUtils.mjs";
-import { getDOMElementId as d, convertBoolDirectionToString as m, getPopupSettings as f } from "../utils/misc.mjs";
-import { MenuItemLink as v } from "./MenuItemLink.mjs";
-import { MenuItemArrow as M } from "./MenuItemArrow.mjs";
-class k 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 /* @__PURE__ */ s.createElement(
-      "ul",
+import * as i from "react";
+import { getActiveElement as F, classNames as v, IconWrap as B } from "@progress/kendo-react-common";
+import { Popup as y } from "@progress/kendo-react-popup";
+import { shouldOpenItem as x, isFirstItemFromSiblings as S } from "../utils/itemsIdsUtils.mjs";
+import { getDOMElementId as M, convertBoolDirectionToString as R, getPopupSettings as G } from "../utils/misc.mjs";
+import { MenuItemLink as V } from "./MenuItemLink.mjs";
+import { MenuItemArrow as w } from "./MenuItemArrow.mjs";
+const A = (e) => {
+  const { parentItemId: a } = e, c = a !== void 0 ? (o) => {
+    e.onMouseOver(a), o.stopPropagation();
+  } : void 0, I = a !== void 0 ? (o) => {
+    e.onMouseLeave(a), o.stopPropagation();
+  } : void 0;
+  let t;
+  return e.role ? t = e.role : a !== void 0 ? t = "menu" : t = "menubar", /* @__PURE__ */ i.createElement(
+    "ul",
+    {
+      className: e.className,
+      role: t,
+      id: a !== void 0 ? M(e.menuGuid, a) : void 0,
+      onMouseOver: c,
+      onMouseLeave: I,
+      "aria-orientation": e["aria-orientation"]
+    },
+    e.items.length > 0 ? e.items.map((o, l) => /* @__PURE__ */ i.createElement(
+      W,
       {
-        className: this.props.className,
-        role: this.props.role ? this.props.role : e !== void 0 ? "menu" : "menubar",
-        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"]
-      },
-      this.renderChildItems()
-    );
-  }
-  renderChildItems() {
-    return this.props.items.length > 0 ? this.props.items.map((e, t) => /* @__PURE__ */ s.createElement(
-      O,
-      {
-        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,
-        onBlur: this.props.onBlur,
-        onFocus: this.props.onFocus,
-        onClick: this.props.onClick,
-        onOriginalItemNeeded: this.props.onOriginalItemNeeded,
-        onPopupClose: this.props.onPopupClose,
-        key: t
+        item: o,
+        animate: e.animate,
+        isMenuVertical: e.isMenuVertical,
+        isDirectionRightToLeft: e.isDirectionRightToLeft,
+        focusedItemId: e.focusedItemId,
+        lastItemIdToBeOpened: e.lastItemIdToBeOpened,
+        tabbableItemId: e.tabbableItemId,
+        itemRender: e.itemRender,
+        linkRender: e.linkRender,
+        menuGuid: e.menuGuid,
+        onMouseOver: e.onMouseOver,
+        onMouseLeave: e.onMouseLeave,
+        onBlur: e.onBlur,
+        onFocus: e.onFocus,
+        onClick: e.onClick,
+        onOriginalItemNeeded: e.onOriginalItemNeeded,
+        onPopupClose: e.onPopupClose,
+        key: l
       }
-    )) : null;
-  }
-}
-class O 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.onPopupClose = (t) => {
-      this.props.onPopupClose(this.props.item.id, t);
-    }, 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 n = u(document);
-      e.focusedItemId !== t && t === i && // https://github.com/telerik/kendo-react/issues/216 :
+    )) : null
+  );
+}, W = (e) => {
+  const a = i.useRef(null), c = i.useRef(!0), I = i.useRef(void 0), t = e.item, o = t.id, l = M(e.menuGuid, o), b = t.separator, O = t.render || e.itemRender, k = t.linkRender || e.linkRender, g = t.contentParentItemId ? t.contentRender : null, d = t.items.length > 0 && x(o, e.lastItemIdToBeOpened) && !c.current;
+  i.useEffect(() => {
+    var f, s, m;
+    const n = e.focusedItemId, r = e.item.id, u = I.current;
+    if (c.current)
+      n && n === r && ((f = a.current) == null || f.focus({ preventScroll: !0 })), c.current = !1;
+    else if (n) {
+      const T = F(document);
+      u !== n && n === r && // 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 });
+      !((s = a.current) != null && s.contains(T)) && ((m = a.current) == null || m.focus({ preventScroll: !0 }));
     }
-  }
-  render() {
-    const e = this.props.item, t = e.id, i = 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;
-        }
-      }
-    ) : /* @__PURE__ */ 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,
-        onBlur: (o) => this.props.onBlur(t, o),
-        onFocus: () => this.props.onFocus(t),
-        onClick: (o) => this.props.onClick(o, 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
-      },
-      this.contentRender ? this.renderContent() : this.renderMenuItemLink()
-    ), this.renderPopupIfOpened());
-  }
-  renderContent() {
-    const e = this.props.item.contentParentItemId;
-    return /* @__PURE__ */ s.createElement("div", { className: "k-content", role: "presentation" }, /* @__PURE__ */ s.createElement(this.contentRender, { item: this.props.onOriginalItemNeeded(e), itemId: e }));
-  }
-  renderMenuItemLink() {
-    const e = this.props.item;
-    if (this.linkRender)
-      return /* @__PURE__ */ s.createElement(
-        this.linkRender,
+    I.current = n;
+  });
+  const E = (n) => {
+    e.onMouseOver(o), n.stopPropagation();
+  }, L = (n) => {
+    e.onMouseLeave(o), n.stopPropagation();
+  }, h = (n) => {
+    e.onPopupClose(o, n);
+  }, C = () => {
+    const n = t.contentParentItemId, r = g;
+    return /* @__PURE__ */ i.createElement("div", { className: "k-content", role: "presentation" }, /* @__PURE__ */ i.createElement(r, { item: e.onOriginalItemNeeded(n), itemId: n }));
+  }, D = () => {
+    if (k) {
+      const u = k;
+      return /* @__PURE__ */ i.createElement(
+        u,
         {
-          item: this.props.onOriginalItemNeeded(e.id),
-          itemId: e.id,
-          opened: this.Opened,
-          dir: m(this.props.isDirectionRightToLeft)
+          item: e.onOriginalItemNeeded(t.id),
+          itemId: t.id,
+          opened: d,
+          dir: R(e.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(v, { 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: n, collision: o, animationDirection: r } = f(
-      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,
+    }
+    const n = O, r = n ? /* @__PURE__ */ i.createElement(n, { item: e.onOriginalItemNeeded(t.id), itemId: t.id, key: "1" }) : /* @__PURE__ */ i.createElement("span", { className: "k-menu-link-text" }, t.text);
+    return /* @__PURE__ */ i.createElement(V, { url: t.url, opened: d }, t.icon || t.svgIcon ? /* @__PURE__ */ i.createElement(B, { name: t.icon, icon: t.svgIcon, key: "0" }) : null, r, t.items.length > 0 ? /* @__PURE__ */ i.createElement("span", { className: "k-menu-expand-arrow", "aria-hidden": !0 }, /* @__PURE__ */ i.createElement(
+      w,
       {
-        anchor: this.itemElement,
-        show: this.Opened,
-        popupClass: this.getPopupClassName(),
-        anchorAlign: i,
-        popupAlign: n,
-        collision: o,
-        animate: l,
-        onClose: this.onPopupClose,
+        itemId: t.id,
+        verticalMenu: e.isMenuVertical,
+        dir: R(e.isDirectionRightToLeft),
+        key: "2"
+      }
+    )) : null);
+  }, N = () => {
+    const n = e.animate, { anchorAlign: r, popupAlign: u, collision: f, animationDirection: s } = G(
+      o,
+      e.isMenuVertical,
+      e.isDirectionRightToLeft
+    );
+    let m;
+    return n === !0 ? m = { openDuration: 300, closeDuration: 300, direction: s } : n === !1 ? m = !1 : m = {
+      openDuration: (n == null ? void 0 : n.openDuration) || 300,
+      closeDuration: (n == null ? void 0 : n.closeDuration) || 300,
+      direction: (n == null ? void 0 : n.direction) || s
+    }, /* @__PURE__ */ i.createElement(
+      y,
+      {
+        anchor: a.current,
+        show: d,
+        popupClass: v("k-menu-popup", { "k-rtl": e.isDirectionRightToLeft }),
+        anchorAlign: r,
+        popupAlign: u,
+        collision: f,
+        animate: m,
+        onClose: h,
         key: "1"
       },
-      /* @__PURE__ */ s.createElement(
-        k,
+      /* @__PURE__ */ i.createElement(
+        A,
         {
-          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,
+          parentItemId: o,
+          animate: e.animate,
+          items: t.items,
+          menuGuid: e.menuGuid,
+          focusedItemId: e.focusedItemId,
+          lastItemIdToBeOpened: e.lastItemIdToBeOpened,
+          tabbableItemId: e.tabbableItemId,
+          itemRender: e.itemRender,
+          linkRender: e.linkRender,
+          isMenuVertical: e.isMenuVertical,
+          isDirectionRightToLeft: e.isDirectionRightToLeft,
           className: "k-group k-menu-group k-reset k-menu-group-md",
-          onMouseOver: this.props.onMouseOver,
-          onMouseLeave: this.props.onMouseLeave,
-          onBlur: this.props.onBlur,
-          onFocus: this.props.onFocus,
-          onClick: this.props.onClick,
-          onOriginalItemNeeded: this.props.onOriginalItemNeeded,
-          onPopupClose: this.props.onPopupClose
+          onMouseOver: e.onMouseOver,
+          onMouseLeave: e.onMouseLeave,
+          onBlur: e.onBlur,
+          onFocus: e.onFocus,
+          onClick: e.onClick,
+          onOriginalItemNeeded: e.onOriginalItemNeeded,
+          onPopupClose: e.onPopupClose
         }
       )
     );
-  }
-  renderMenuIconIfApplicable() {
-    const { icon: e, svgIcon: t } = this.props.item;
-    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(
-      M,
-      {
-        itemId: this.props.item.id,
-        verticalMenu: this.props.isMenuVertical,
-        dir: m(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 && 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 p("k-menu-popup", { "k-rtl": this.props.isDirectionRightToLeft });
-  }
-  getMenuItemClassName(e) {
-    return p(
-      "k-item",
-      "k-menu-item",
-      {
-        "k-first": g(e.id),
-        "k-last": e.isLastFromSiblings,
-        "k-disabled": e.disabled
-      },
-      e.cssClass
-    );
-  }
-}
+  }, P = v(
+    "k-item",
+    "k-menu-item",
+    {
+      "k-first": S(o),
+      "k-last": t.isLastFromSiblings,
+      "k-disabled": t.disabled
+    },
+    t.cssClass
+  );
+  return /* @__PURE__ */ i.createElement(i.Fragment, null, b ? /* @__PURE__ */ i.createElement(
+    "li",
+    {
+      className: "k-separator k-item",
+      "aria-hidden": !0,
+      key: l,
+      id: l,
+      ref: a
+    }
+  ) : /* @__PURE__ */ i.createElement(
+    "li",
+    {
+      id: l,
+      className: P,
+      style: t.cssStyle,
+      tabIndex: o === e.tabbableItemId ? 0 : -1,
+      onMouseOver: E,
+      onMouseLeave: L,
+      onBlur: (n) => e.onBlur(o, n),
+      onFocus: () => e.onFocus(o),
+      onClick: (n) => e.onClick(n, o),
+      role: "menuitem",
+      "aria-disabled": t.disabled ? !0 : void 0,
+      "aria-haspopup": t.items.length > 0 ? !0 : void 0,
+      "aria-expanded": t.items.length > 0 ? d : void 0,
+      "aria-label": t.text,
+      "aria-owns": d ? l : void 0,
+      ref: a,
+      key: l
+    },
+    g ? C() : D()
+  ), N());
+};
 export {
-  O as MenuItemInternal,
-  k as MenuItemInternalsList
+  W as MenuItemInternal,
+  A as MenuItemInternalsList
 };

package/menu/components/MenuItemLink.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 { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
@@ -21,17 +20,4 @@ export interface MenuItemLinkProps extends KendoReactComponentBaseProps {
      */
     url?: string;
 }
-export declare class MenuItemLink extends React.Component<MenuItemLinkProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        opened: PropTypes.Requireable<boolean>;
-        url: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    private getMenuItemClassName;
-}
+export declare const MenuItemLink: (props: MenuItemLinkProps) => React.JSX.Element;

package/menu/components/MenuItemLink.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"),i=require("prop-types"),l=require("@progress/kendo-react-common");function c(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(s,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return s.default=e,Object.freeze(s)}const r=c(p),o=class o extends r.Component{render(){return this.props.url?r.createElement("a",{className:this.getMenuItemClassName(),role:"presentation",href:this.props.url,tabIndex:-1},this.props.children):r.createElement("span",{id:this.props.id,className:l.classNames(this.getMenuItemClassName(),this.props.className),style:this.props.style,role:"presentation"},this.props.children)}getMenuItemClassName(){return l.classNames("k-link","k-menu-link",{"k-active":this.props.opened})}};o.propTypes={opened:i.bool,url:i.string};let n=o;exports.MenuItemLink=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),r=require("prop-types"),s=require("@progress/kendo-react-common");function u(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const c=u(o),l=e=>s.classNames("k-link","k-menu-link",{"k-active":e}),i=e=>e.url?c.createElement("a",{className:l(e.opened),href:e.url,tabIndex:-1},e.children):c.createElement("span",{id:e.id,className:s.classNames(l(e.opened),e.className),style:e.style,role:"presentation"},e.children);i.propTypes={opened:r.bool,url:r.string};exports.MenuItemLink=i;