@progress/kendo-react-layout 7.2.4-develop.3 → 7.2.4-develop.4

package/menu/components/Menu.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),r=require("prop-types"),n=require("@progress/kendo-react-common"),i=require("../utils/itemsIdsUtils.js"),c=require("../utils/prepareInputItemsForInternalWork.js"),p=require("../utils/getNewItemIdUponKeyboardNavigation.js"),m=require("../utils/hoverDelay.js"),v=require("./MenuItemInternal.js"),f=require("../utils/DirectionHolder.js"),b=require("../utils/MouseOverHandler.js"),g=require("../../package-metadata.js");function D(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const d=D(u),h={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 f.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(h)},this.onKeyDown=e=>{if(this.state.focusedItemId!==i.EMPTY_ID){const s=i.getItemById(this.state.focusedItemId,this.items),o=p.getNewItemIdUponKeyboardNavigation(this.items,s.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());s.id!==o&&(e.preventDefault(),this.setFocusedItemId(o)),(e.keyCode===n.Keys.enter||e.keyCode===n.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===n.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},m.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},m.getHoverCloseDelay(this.props)))},this.onItemMouseDown=()=>{this.mouseOverHandler.handleItemMouseDown()},this.onItemFocus=e=>{this.setFocusedItemId(e),this.mouseOverHandler.handleItemFocus()},this.onItemClick=(e,s)=>{const o=i.getItemById(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(i.EMPTY_ID),s.relatedTarget&&s.relatedTarget.nodeName==="LI"){const o=s.relatedTarget.getAttribute("id");if(o&&o.includes(this.menuItemId))return}this.props.onClose&&this.props.onClose.call(void 0,s)},this.getInputItem=e=>i.getItemById(e,this.inputItems),n.validatePackage(g.packageMetadata),this.mouseOverHandler=new b.MouseOverHandler(this.props.openOnClick,this.reset,this.onItemMouseOver),this.state=Object.assign({},h,{isFirstRender:!0})}get menuItemId(){return this.props.id}get element(){return this.menuWrapperEl}render(){this.prepareItems(),this.state.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());let 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(v.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 n.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}=c.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=t,this.inputItems=e}dispatchSelectEventIfWired(t,e){n.dispatchEvent(this.props.onSelect,t,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:r.bool,items:r.arrayOf(r.object),style:r.object,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,role:r.string},l.defaultProps={vertical:!1};let I=l;exports.Menu=I;

package/menu/components/Menu.mjs

@@ -0,0 +1,193 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as l from "react";
+import i from "prop-types";
+import { Keys as m, validatePackage as u, classNames as c, dispatchEvent as f } from "@progress/kendo-react-common";
+import { EMPTY_ID as r, getItemById as d, getDirectParentId as v, getRootParentId as b, isIdEmptyOrZeroLevel as n, ZERO_LEVEL_ZERO_ITEM_ID as p } from "../utils/itemsIdsUtils.mjs";
+import { prepareInputItemsForInternalWork as g } from "../utils/prepareInputItemsForInternalWork.mjs";
+import { getNewItemIdUponKeyboardNavigation as R } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
+import { getHoverOpenDelay as D, getHoverCloseDelay as H } from "../utils/hoverDelay.mjs";
+import { MenuItemInternalsList as O } from "./MenuItemInternal.mjs";
+import { DirectionHolder as C } from "../utils/DirectionHolder.mjs";
+import { MouseOverHandler as k } from "../utils/MouseOverHandler.mjs";
+import { packageMetadata as y } from "../../package-metadata.mjs";
+const h = {
+  focusedItemId: r,
+  hoveredItemId: r,
+  tabbableItemId: p
+}, a = class a extends l.Component {
+  constructor(t) {
+    super(t), this.menuWrapperEl = null, this.directionHolder = new C(), this.inputItems = [], this.items = [], this.reset = () => {
+      this.clearItemHoverAndLeaveRequestsIfApplicable(), this.setState(h);
+    }, this.onKeyDown = (e) => {
+      if (this.state.focusedItemId !== r) {
+        const s = d(this.state.focusedItemId, this.items), o = R(
+          this.items,
+          s.id,
+          e.keyCode,
+          e.key,
+          this.props.vertical,
+          this.directionHolder.getIsDirectionRightToLeft()
+        );
+        s.id !== o && (e.preventDefault(), this.setFocusedItemId(o)), (e.keyCode === m.enter || e.keyCode === m.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 === m.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;
+        },
+        D(this.props)
+      ));
+    }, this.onItemMouseLeave = (e) => {
+      this.mouseOverHandler.IsMouseOverEnabled && this.isItemWithDefaultClose(e) && (this.clearItemHoverAndLeaveRequestsIfApplicable(), this.itemLeaveRequest = window.setTimeout(
+        () => {
+          this.setHoveredItemId(r), this.itemLeaveRequest = null;
+        },
+        H(this.props)
+      ));
+    }, this.onItemMouseDown = () => {
+      this.mouseOverHandler.handleItemMouseDown();
+    }, this.onItemFocus = (e) => {
+      this.setFocusedItemId(e), this.mouseOverHandler.handleItemFocus();
+    }, this.onItemClick = (e, s) => {
+      const o = d(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") {
+        const o = s.relatedTarget.getAttribute("id");
+        if (o && o.includes(this.menuItemId))
+          return;
+      }
+      this.props.onClose && this.props.onClose.call(void 0, s);
+    }, this.getInputItem = (e) => d(e, this.inputItems), u(y), this.mouseOverHandler = new k(this.props.openOnClick, this.reset, this.onItemMouseOver), this.state = Object.assign({}, h, { isFirstRender: !0 });
+  }
+  get menuItemId() {
+    return this.props.id;
+  }
+  get element() {
+    return this.menuWrapperEl;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    this.prepareItems(), this.state.isFirstRender || this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());
+    let t = this.state.hoveredItemId ? this.state.hoveredItemId : this.state.focusedItemId ? v(this.state.focusedItemId) : r;
+    return /* @__PURE__ */ l.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
+      },
+      /* @__PURE__ */ l.createElement(
+        O,
+        {
+          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
+        }
+      )
+    );
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.setState({ isFirstRender: !1 });
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(t) {
+    (!!t.vertical != !!this.props.vertical || this.directionHolder.hasDirectionChanged()) && this.reset(), this.mouseOverHandler.OpenOnClick = this.props.openOnClick;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    this.clearItemHoverAndLeaveRequestsIfApplicable();
+  }
+  setFocusedItemId(t) {
+    this.setState((e) => {
+      const s = t === r ? e.tabbableItemId : b(t);
+      return { hoveredItemId: t === r || n(e.hoveredItemId) && n(t) ? e.hoveredItemId : r, focusedItemId: t, tabbableItemId: s };
+    });
+  }
+  setHoveredItemId(t) {
+    this.setState((e) => n(t) && n(e.focusedItemId) ? {
+      hoveredItemId: t,
+      focusedItemId: e.focusedItemId,
+      tabbableItemId: e.tabbableItemId
+    } : { hoveredItemId: t, focusedItemId: r, tabbableItemId: p });
+  }
+  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(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 } = g(this.props.items, this.props.children);
+    this.items = t, this.inputItems = e;
+  }
+  dispatchSelectEventIfWired(t, e) {
+    f(this.props.onSelect, t, this, { item: this.getInputItem(e), itemId: e });
+  }
+};
+a.propTypes = {
+  vertical: i.bool,
+  items: i.arrayOf(i.object),
+  style: i.object,
+  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,
+  role: i.string
+}, a.defaultProps = { vertical: !1 };
+let I = a;
+export {
+  I as Menu
+};

package/menu/components/MenuItem.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),e=require("prop-types");function i(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const c=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,c.get?c:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const l=i(a),o=class o extends l.Component{render(){return null}};o.propTypes={text:e.string,url:e.string,icon:e.string,disabled:e.bool,cssClass:e.string,cssStyle:e.object,render:e.any,linkRender:e.any,contentRender:e.any,data:e.any};let s=o;exports.MenuItem=s;

package/menu/components/MenuItem.mjs

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import n from "prop-types";
+const r = class r extends t.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return null;
+  }
+};
+r.propTypes = {
+  text: n.string,
+  url: n.string,
+  icon: n.string,
+  disabled: n.bool,
+  cssClass: n.string,
+  cssStyle: n.object,
+  render: n.any,
+  linkRender: n.any,
+  contentRender: n.any,
+  data: n.any
+};
+let s = r;
+export {
+  s as MenuItem
+};

package/menu/components/MenuItemArrow.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),n=require("prop-types"),p=require("@progress/kendo-react-common"),o=require("@progress/kendo-svg-icons"),g=require("../utils/misc.js");function f(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const s=f(m),l="caret-alt-down",d="caret-alt-right",u="caret-alt-left",i=class i extends s.Component{render(){return s.createElement(p.IconWrap,{"aria-hidden":!0,...this.getIcon()})}getIcon(){switch(g.getChildrenPosition(this.props.itemId,this.props.verticalMenu===!0,this.props.dir==="rtl")){case"downward":return{name:l,icon:o.caretAltDownIcon};case"rightward":return{name:d,icon:o.caretAltRightIcon};case"leftward":return{name:u,icon:o.caretAltLeftIcon};default:return{}}}};i.propTypes={itemId:n.string,dir:n.string,verticalMenu:n.bool};let c=i;exports.MenuItemArrow=c;exports.downArrowName=l;exports.leftArrowName=u;exports.rightArrowName=d;

package/menu/components/MenuItemArrow.mjs

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+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() });
+  }
+  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
+};
+let o = r;
+export {
+  o as MenuItemArrow,
+  l as downArrowName,
+  d as leftArrowName,
+  p as rightArrowName
+};

package/menu/components/MenuItemInternal.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),p=require("@progress/kendo-react-common"),l=require("@progress/kendo-react-popup"),d=require("../utils/itemsIdsUtils.js"),r=require("../utils/misc.js"),c=require("./MenuItemLink.js"),h=require("./MenuItemArrow.js");function I(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=I(u);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?r.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(a,{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 a 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(),this.isFirstRender=!1}componentDidUpdate(e){const t=this.props.focusedItemId,i=this.props.item.id;if(t){const n=p.getActiveElement(document);e.focusedItemId!==t&&t===i&&!this.itemElement.contains(n)&&this.itemElement.focus()}}render(){const e=this.props.item,t=e.id,i=r.getDOMElementId(this.props.menuGuid,t);return s.createElement(s.Fragment,null,s.createElement("li",{id:r.getDOMElementId(this.props.menuGuid,t),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:"0"},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:r.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(c.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:i,collision:n}=r.getPopupSettings(e,this.props.isMenuVertical,this.props.isDirectionRightToLeft);return s.createElement(l.Popup,{anchor:this.itemElement,show:!0,popupClass:this.getPopupClassName(),anchorAlign:t,popupAlign:i,collision:n,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}))}else return null}renderMenuIconIfApplicable(){const{icon:e,svgIcon:t}=this.props.item;return e||t?s.createElement(p.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(h.MenuItemArrow,{itemId:this.props.item.id,verticalMenu:this.props.isMenuVertical,dir:r.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&&d.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender}getPopupClassName(){return p.classNames("k-menu-popup",{"k-rtl":this.props.isDirectionRightToLeft})}getMenuItemClassName(e){return p.classNames("k-item","k-menu-item",{"k-first":d.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled},e.cssClass)}}exports.MenuItemInternal=a;exports.MenuItemInternalsList=m;

package/menu/components/MenuItemInternal.mjs

@@ -0,0 +1,222 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as s from "react";
+import { getActiveElement as d, IconWrap as a, classNames as r } from "@progress/kendo-react-common";
+import { Popup as u } from "@progress/kendo-react-popup";
+import { shouldOpenItem as l, isFirstItemFromSiblings as h } from "../utils/itemsIdsUtils.mjs";
+import { getDOMElementId as n, convertBoolDirectionToString as p, getPopupSettings as c } from "../utils/misc.mjs";
+import { MenuItemLink as I } from "./MenuItemLink.mjs";
+import { MenuItemArrow as M } from "./MenuItemArrow.mjs";
+class g 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",
+      {
+        className: this.props.className,
+        role: this.props.role ? this.props.role : e !== void 0 ? "menu" : "menubar",
+        id: e !== void 0 ? n(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(
+      f,
+      {
+        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 f 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(), this.isFirstRender = !1;
+  }
+  componentDidUpdate(e) {
+    const t = this.props.focusedItemId, o = this.props.item.id;
+    if (t) {
+      const i = d(document);
+      e.focusedItemId !== t && t === o && !this.itemElement.contains(i) && this.itemElement.focus();
+    }
+  }
+  render() {
+    const e = this.props.item, t = e.id, o = n(this.props.menuGuid, t);
+    return /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
+      "li",
+      {
+        id: n(this.props.menuGuid, t),
+        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 ? o : void 0,
+        ref: (i) => this.itemElement = i,
+        key: "0"
+      },
+      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,
+        {
+          item: this.props.onOriginalItemNeeded(e.id),
+          itemId: e.id,
+          opened: this.Opened,
+          dir: p(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(I, { url: e.url, opened: this.Opened }, this.renderMenuIconIfApplicable(), t, this.renderArrowIfApplicable());
+    }
+  }
+  renderPopupIfOpened() {
+    if (this.Opened) {
+      const e = this.props.item.id, { anchorAlign: t, popupAlign: o, collision: i } = c(e, this.props.isMenuVertical, this.props.isDirectionRightToLeft);
+      return /* @__PURE__ */ s.createElement(
+        u,
+        {
+          anchor: this.itemElement,
+          show: !0,
+          popupClass: this.getPopupClassName(),
+          anchorAlign: t,
+          popupAlign: o,
+          collision: i,
+          animate: !1,
+          key: "1"
+        },
+        /* @__PURE__ */ s.createElement(
+          g,
+          {
+            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
+          }
+        )
+      );
+    } else
+      return null;
+  }
+  renderMenuIconIfApplicable() {
+    const { icon: e, svgIcon: t } = this.props.item;
+    return e || t ? /* @__PURE__ */ s.createElement(a, { 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: p(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 && l(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 });
+  }
+  getMenuItemClassName(e) {
+    return r(
+      "k-item",
+      "k-menu-item",
+      {
+        "k-first": h(e.id),
+        "k-last": e.isLastFromSiblings,
+        "k-disabled": e.disabled
+      },
+      e.cssClass
+    );
+  }
+}
+export {
+  f as MenuItemInternal,
+  g as MenuItemInternalsList
+};

package/menu/components/MenuItemLink.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),i=require("prop-types"),l=require("@progress/kendo-react-common");function p(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=p(c),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;

package/menu/components/MenuItemLink.mjs

@@ -0,0 +1,54 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as e from "react";
+import t from "prop-types";
+import { classNames as r } from "@progress/kendo-react-common";
+const s = class s extends e.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    return this.props.url ? /* @__PURE__ */ e.createElement(
+      "a",
+      {
+        className: this.getMenuItemClassName(),
+        role: "presentation",
+        href: this.props.url,
+        tabIndex: -1
+      },
+      this.props.children
+    ) : /* @__PURE__ */ e.createElement(
+      "span",
+      {
+        id: this.props.id,
+        className: r(this.getMenuItemClassName(), this.props.className),
+        style: this.props.style,
+        role: "presentation"
+      },
+      this.props.children
+    );
+  }
+  getMenuItemClassName() {
+    return r(
+      "k-link",
+      "k-menu-link",
+      {
+        "k-active": this.props.opened
+      }
+    );
+  }
+};
+s.propTypes = {
+  opened: t.bool,
+  url: t.string
+};
+let p = s;
+export {
+  p as MenuItemLink
+};

package/menu/consts.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"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;