@progress/kendo-react-layout 8.6.0-develop.1 → 9.0.0-develop.10

package/drawer/Drawer.mjs

@@ -30,16 +30,16 @@ const u = t.forwardRef((l, p) => {
     tabIndex: g,
     onOverlayClick: E,
     onSelect: s
-  } = l, a = t.useRef(null), N = t.useCallback(
-    () => {
-      a.current && a.current.focus();
-    },
-    []
+  } = l, a = t.useRef(null), N = t.useCallback(() => {
+    a.current && a.current.focus();
+  }, []);
+  t.useImperativeHandle(
+    p,
+    () => ({
+      element: a.current,
+      focus: N
+    })
   );
-  t.useImperativeHandle(p, () => ({
-    element: a.current,
-    focus: N
-  }));
   const C = t.useCallback(
     (P, R, d) => {
       if (i && s) {
@@ -82,18 +82,7 @@ const u = t.forwardRef((l, p) => {
         onSelect: C
       }
     },
-    /* @__PURE__ */ t.createElement(
-      "div",
-      {
-        className: D,
-        ref: a,
-        dir: c,
-        style: h,
-        tabIndex: g
-      },
-      i && /* @__PURE__ */ t.createElement(I, null),
-      w
-    )
+    /* @__PURE__ */ t.createElement("div", { className: D, ref: a, dir: c, style: h, tabIndex: g }, i && /* @__PURE__ */ t.createElement(I, null), w)
   );
 });
 u.propTypes = {

package/drawer/DrawerContent.mjs

@@ -11,9 +11,12 @@ import t from "prop-types";
 import { classNames as p } from "@progress/kendo-react-common";
 const s = e.forwardRef((n, a) => {
   const { children: o, className: c, style: l } = n, r = e.useRef(null);
-  e.useImperativeHandle(a, () => ({
-    element: r.current
-  }));
+  e.useImperativeHandle(
+    a,
+    () => ({
+      element: r.current
+    })
+  );
   const m = p(
     {
       "k-drawer-content": !0

package/drawer/DrawerItem.mjs

@@ -25,17 +25,17 @@ const d = e.forwardRef((s, u) => {
     tabIndex: x,
     children: k,
     ...g
-  } = s, { expanded: F, mini: H, item: N } = e.useContext(j), r = e.useRef(null), i = e.useCallback(
-    () => {
-      r.current && r.current.focus();
-    },
-    []
+  } = s, { expanded: F, mini: H, item: N } = e.useContext(j), r = e.useRef(null), i = e.useCallback(() => {
+    r.current && r.current.focus();
+  }, []);
+  e.useImperativeHandle(
+    u,
+    () => ({
+      element: r.current,
+      focus: i,
+      props: s
+    })
   );
-  e.useImperativeHandle(u, () => ({
-    element: r.current,
-    focus: i,
-    props: s
-  }));
   const w = v(
     "k-drawer-item",
     {

package/drawer/DrawerNavigation.mjs

@@ -12,141 +12,120 @@ import { DrawerContext as G } from "./context/DrawerContext.mjs";
 import { DrawerItem as J } from "./DrawerItem.mjs";
 import { validatePackage as Q, shouldShowValidationUI as Y, classNames as h, Navigation as Z, WatermarkOverlay as ee } from "@progress/kendo-react-common";
 import { packageMetadata as E } from "../package-metadata.mjs";
-const te = 240, ae = 50, re = { type: "slide", duration: 200 }, ne = { type: "slide", duration: 0 }, T = t.forwardRef((g, W) => {
-  const { children: x, className: A, style: p } = g;
-  Q(E);
-  const C = Y(E), {
-    animation: m,
-    expanded: d,
-    mode: c,
-    position: o,
-    onOverlayClick: O,
-    mini: s,
-    dir: v,
-    width: y,
-    miniWidth: w,
-    items: f,
-    item: M,
-    onSelect: P
-  } = t.useContext(G), i = t.useRef(null), _ = t.useCallback(
-    () => {
+const te = 240, ae = 50, re = { type: "slide", duration: 200 }, ne = { type: "slide", duration: 0 }, T = t.forwardRef(
+  (g, W) => {
+    const { children: x, className: A, style: p } = g;
+    Q(E);
+    const C = Y(E), {
+      animation: m,
+      expanded: d,
+      mode: c,
+      position: o,
+      onOverlayClick: O,
+      mini: s,
+      dir: v,
+      width: y,
+      miniWidth: w,
+      items: f,
+      item: M,
+      onSelect: P
+    } = t.useContext(G), i = t.useRef(null), _ = t.useCallback(() => {
       i.current && i.current.focus();
-    },
-    []
-  ), e = typeof m != "boolean" ? m : m === !1 ? ne : re, k = y || te, N = w || ae;
-  t.useImperativeHandle(W, () => ({
-    element: i.current,
-    focus: _
-  }));
-  const L = t.useMemo(
-    () => "k-drawer " + h(
-      {
-        "k-drawer-start": o === "start",
-        "k-drawer-end": o === "end"
-      },
-      A
-    ),
-    [o]
-  ), R = {
-    opacity: 1,
-    flexBasis: k,
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, U = {
-    opacity: 1,
-    transform: "translateX(0px)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, X = {
-    opacity: s ? 1 : 0,
-    flexBasis: s ? N : 0,
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, F = {
-    opacity: 0,
-    transform: "translateX(-100%)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, H = {
-    opacity: 0,
-    transform: "translateX(100%)",
-    WebkitTransition: "all " + (e && e.duration) + "ms",
-    /* Safari */
-    transition: "all " + (e && e.duration) + "ms"
-  }, b = {
-    transform: "translateX(0%)",
-    WebkitTransitionDuration: (e && e.duration) + "ms",
-    /* Safari */
-    transitionDuration: (e && e.duration) + "ms"
-  }, K = d ? c === "push" ? R : U : c === "push" ? X : v === "ltr" && o === "start" || v === "rtl" && o === "end" ? s ? b : F : s ? b : H, D = t.useMemo(
-    () => new Z({
-      root: i,
-      selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
-      keyboardEvents: {
-        keydown: {
-          ArrowDown: (a, r, n) => {
-            n.preventDefault(), r.focusNext(a);
-          },
-          ArrowUp: (a, r, n) => {
-            n.preventDefault(), r.focusPrevious(a);
-          },
-          Enter: (a, r, n) => {
-            n.preventDefault(), a.click();
+    }, []), e = typeof m != "boolean" ? m : m === !1 ? ne : re, k = y || te, N = w || ae;
+    t.useImperativeHandle(
+      W,
+      () => ({
+        element: i.current,
+        focus: _
+      })
+    );
+    const L = t.useMemo(
+      () => "k-drawer " + h(
+        {
+          "k-drawer-start": o === "start",
+          "k-drawer-end": o === "end"
+        },
+        A
+      ),
+      [o]
+    ), R = {
+      opacity: 1,
+      flexBasis: k,
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, U = {
+      opacity: 1,
+      transform: "translateX(0px)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, X = {
+      opacity: s ? 1 : 0,
+      flexBasis: s ? N : 0,
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, F = {
+      opacity: 0,
+      transform: "translateX(-100%)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, H = {
+      opacity: 0,
+      transform: "translateX(100%)",
+      WebkitTransition: "all " + (e && e.duration) + "ms",
+      transition: "all " + (e && e.duration) + "ms"
+    }, b = {
+      transform: "translateX(0%)",
+      WebkitTransitionDuration: (e && e.duration) + "ms",
+      transitionDuration: (e && e.duration) + "ms"
+    }, K = d ? c === "push" ? R : U : c === "push" ? X : v === "ltr" && o === "start" || v === "rtl" && o === "end" ? s ? b : F : s ? b : H, D = t.useMemo(
+      () => new Z({
+        root: i,
+        selectors: ["ul.k-drawer-items li.k-drawer-item:not(.k-drawer-separator)"],
+        keyboardEvents: {
+          keydown: {
+            ArrowDown: (a, r, n) => {
+              n.preventDefault(), r.focusNext(a);
+            },
+            ArrowUp: (a, r, n) => {
+              n.preventDefault(), r.focusPrevious(a);
+            },
+            Enter: (a, r, n) => {
+              n.preventDefault(), a.click();
+            }
           }
-        }
-      },
-      tabIndex: 0,
-      rovingTabIndex: !0
-    }),
-    []
-  ), S = t.useCallback(
-    D.triggerKeyboardEvent.bind(D),
-    []
-  ), B = f && /* @__PURE__ */ t.createElement(
-    "ul",
-    {
-      className: "k-drawer-items",
-      role: "menubar",
-      "aria-orientation": "vertical",
-      onKeyDown: S
-    },
-    f.map(
-      (a, r) => {
-        const { className: n, level: u, ...j } = a, V = u != null ? u : 0, $ = h(
-          n,
-          s ? "" : `k-level-${V}`
-        ), q = {
-          index: r,
-          className: $,
-          ...j,
-          onSelect: P
-        }, z = M || J;
-        return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
-      }
-    )
-  ), I = /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      style: e ? { ...K, ...p } : p,
-      className: L,
-      ref: i
-    },
-    /* @__PURE__ */ t.createElement(
+        },
+        tabIndex: 0,
+        rovingTabIndex: !0
+      }),
+      []
+    ), S = t.useCallback(D.triggerKeyboardEvent.bind(D), []), B = f && /* @__PURE__ */ t.createElement("ul", { className: "k-drawer-items", role: "menubar", "aria-orientation": "vertical", onKeyDown: S }, f.map((a, r) => {
+      const { className: n, level: u, ...j } = a, V = u != null ? u : 0, $ = h(n, s ? "" : `k-level-${V}`), q = {
+        index: r,
+        className: $,
+        ...j,
+        onSelect: P
+      }, z = M || J;
+      return /* @__PURE__ */ t.createElement(z, { key: r, ...q });
+    })), I = /* @__PURE__ */ t.createElement(
       "div",
       {
-        className: "k-drawer-wrapper",
-        style: !d && s && c === "overlay" ? { width: N } : { width: k }
+        style: e ? { ...K, ...p } : p,
+        className: L,
+        ref: i
       },
-      B || x
-    ),
-    C && /* @__PURE__ */ t.createElement(ee, null)
-  );
-  return c === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, d && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: O }), I) : I;
-});
+      /* @__PURE__ */ t.createElement(
+        "div",
+        {
+          className: "k-drawer-wrapper",
+          style: !d && s && c === "overlay" ? { width: N } : { width: k }
+        },
+        B || x
+      ),
+      C && /* @__PURE__ */ t.createElement(ee, null)
+    );
+    return c === "overlay" ? /* @__PURE__ */ t.createElement(t.Fragment, null, d && /* @__PURE__ */ t.createElement("div", { className: "k-overlay", onClick: O }), I) : I;
+  }
+);
 T.propTypes = {
   children: l.any,
   className: l.string,

package/expansionpanel/ExpansionPanel.mjs

@@ -13,10 +13,7 @@ import { packageMetadata as P } from "../package-metadata.mjs";
 import { chevronDownIcon as A, chevronUpIcon as T } from "@progress/kendo-svg-icons";
 const I = e.forwardRef((n, y) => {
   w(P);
-  const i = e.useRef(null), [g, u] = e.useState(!1), r = e.useCallback(
-    () => ({ element: i.current }),
-    []
-  );
+  const i = e.useRef(null), [g, u] = e.useState(!1), r = e.useCallback(() => ({ element: i.current }), []);
   e.useImperativeHandle(y, r);
   const {
     expanded: t = !1,
@@ -30,12 +27,16 @@ const I = e.forwardRef((n, y) => {
     collapseSVGIcon: k
   } = n, N = e.useCallback(
     (l) => {
-      p(s, l, r(), { expanded: t });
+      p(s, l, r(), {
+        expanded: t
+      });
     },
     [s, t]
   ), h = e.useCallback(
     (l) => {
-      (l.keyCode === x.enter || l.keyCode === x.space) && (l.preventDefault(), p(s, l, r(), { expanded: t }));
+      (l.keyCode === x.enter || l.keyCode === x.space) && (l.preventDefault(), p(s, l, r(), {
+        expanded: t
+      }));
     },
     [s, t]
   ), C = e.useCallback(() => {
@@ -47,15 +48,11 @@ const I = e.forwardRef((n, y) => {
     "div",
     {
       ref: i,
-      className: v(
-        "k-expander",
-        n.className,
-        {
-          "k-expanded": t,
-          "k-focus": g && !o,
-          "k-disabled": o
-        }
-      ),
+      className: v("k-expander", n.className, {
+        "k-expanded": t,
+        "k-focus": g && !o,
+        "k-disabled": o
+      }),
       onFocus: B,
       onBlur: R,
       style: n.style,

package/expansionpanel/ExpansionPanelContent.mjs

@@ -8,15 +8,9 @@
 "use client";
 import { classNames as t } from "@progress/kendo-react-common";
 import * as a from "react";
-const r = a.forwardRef((e, n) => /* @__PURE__ */ a.createElement(
-  "div",
-  {
-    ref: n,
-    ...e,
-    className: t("k-expander-content-wrapper", e.className)
-  },
-  /* @__PURE__ */ a.createElement("div", { className: "k-expander-content" }, e.children)
-));
+const r = a.forwardRef(
+  (e, n) => /* @__PURE__ */ a.createElement("div", { ref: n, ...e, className: t("k-expander-content-wrapper", e.className) }, /* @__PURE__ */ a.createElement("div", { className: "k-expander-content" }, e.children))
+);
 r.displayName = "KendoReactExpansionPanelContent";
 export {
   r as ExpansionPanelContent

package/gridlayout/GridLayout.mjs

@@ -47,16 +47,7 @@ const c = i.forwardRef((t, g) => {
     gridTemplateRows: v,
     ...u
   };
-  return /* @__PURE__ */ i.createElement(
-    "div",
-    {
-      ref: r,
-      className: p,
-      style: w,
-      id: h || f
-    },
-    y
-  );
+  return /* @__PURE__ */ i.createElement("div", { ref: r, className: p, style: w, id: h || f }, y);
 }), o = {
   hAlign: "stretch",
   vAlign: "stretch",

package/gridlayout/GridLayoutItem.mjs

@@ -23,16 +23,7 @@ const s = e.forwardRef((n, i) => {
     gridArea: `${u || "auto"} / ${y || "auto"} / ${r ? "span " + r : "auto"} / ${o ? "span " + o : "auto"}`,
     ...m
   };
-  return /* @__PURE__ */ e.createElement(
-    "div",
-    {
-      ref: a,
-      className: c,
-      style: g,
-      id: d || f
-    },
-    p
-  );
+  return /* @__PURE__ */ e.createElement("div", { ref: a, className: c, style: g, id: d || f }, p);
 });
 s.propTypes = {
   className: t.string,

package/index.d.mts

@@ -694,6 +694,10 @@ declare interface BaseMenuItem {
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
+     */
+    separator?: boolean;
 }
 
 /**
@@ -2610,6 +2614,7 @@ export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
         linkRender: PropTypes.Requireable<any>;
         contentRender: PropTypes.Requireable<any>;
         data: PropTypes.Requireable<any>;
+        separator: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -3692,6 +3697,11 @@ export declare interface StepperProps {
      * * `vertical`
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Applicable for scenarios when keyboard is used for navigation. Indicates whether
+     * the selection will change upon focus change or it will require additional action
+     * (Enter or Space key press) in order to select the focused step. Defaults to `false`.
+     */
     selectOnFocus?: boolean;
     /**
      * Sets additional CSS styles to the Stepper.

package/index.d.ts

@@ -694,6 +694,10 @@ declare interface BaseMenuItem {
      * @hidden
      */
     children?: React.ReactNode;
+    /**
+     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
+     */
+    separator?: boolean;
 }
 
 /**
@@ -2610,6 +2614,7 @@ export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
         linkRender: PropTypes.Requireable<any>;
         contentRender: PropTypes.Requireable<any>;
         data: PropTypes.Requireable<any>;
+        separator: PropTypes.Requireable<boolean>;
     };
     /**
      * @hidden
@@ -3692,6 +3697,11 @@ export declare interface StepperProps {
      * * `vertical`
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Applicable for scenarios when keyboard is used for navigation. Indicates whether
+     * the selection will change upon focus change or it will require additional action
+     * (Enter or Space key press) in order to select the focused step. Defaults to `false`.
+     */
     selectOnFocus?: boolean;
     /**
      * Sets additional CSS styles to the Stepper.

package/menu/components/MenuItem.js

@@ -5,4 +5,4 @@
  * 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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=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 a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const l=i(c),s=class s extends l.Component{render(){return null}};s.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,separator:e.bool};let o=s;exports.MenuItem=o;

package/menu/components/MenuItem.mjs

@@ -6,9 +6,9 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import n from "prop-types";
-const r = class r extends t.Component {
+import * as e from "react";
+import r from "prop-types";
+const s = class s extends e.Component {
   /**
    * @hidden
    */
@@ -16,19 +16,20 @@ const r = class r extends t.Component {
     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
+s.propTypes = {
+  text: r.string,
+  url: r.string,
+  icon: r.string,
+  disabled: r.bool,
+  cssClass: r.string,
+  cssStyle: r.object,
+  render: r.any,
+  linkRender: r.any,
+  contentRender: r.any,
+  data: r.any,
+  separator: r.bool
 };
-let s = r;
+let t = s;
 export {
-  s as MenuItem
+  t as MenuItem
 };

package/menu/components/MenuItemInternal.js

@@ -5,4 +5,4 @@
  * 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({preventScroll:!0}),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({preventScroll:!0})}}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}))}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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),d=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-popup"),a=require("../utils/itemsIdsUtils.js"),r=require("../utils/misc.js"),h=require("./MenuItemLink.js"),I=require("./MenuItemArrow.js");function g(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,n.get?n:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const s=g(l);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(u,{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 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.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,n=this.props.item.id;if(t){const p=d.getActiveElement(document);e.focusedItemId!==t&&t===n&&!this.itemElement.contains(p)&&this.itemElement.focus({preventScroll:!0})}}render(){const e=this.props.item,t=e.id,n=r.getDOMElementId(this.props.menuGuid,t),p=e.separator;return s.createElement(s.Fragment,null,p?s.createElement("li",{className:"k-separator k-item","aria-hidden":!0,key:n}):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: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?n:void 0,ref:i=>this.itemElement=i,key:n},this.contentRender?this.renderContent():this.renderMenuItemLink()),this.renderPopupIfOpened(this.itemElement))}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(h.MenuItemLink,{url:e.url,opened:this.Opened},this.renderMenuIconIfApplicable(),t,this.renderArrowIfApplicable())}renderPopupIfOpened(e){if(this.Opened){const t=this.props.item.id,{anchorAlign:n,popupAlign:p,collision:i}=r.getPopupSettings(t,this.props.isMenuVertical,this.props.isDirectionRightToLeft);return s.createElement(c.Popup,{anchor:this.itemElement,appendTo:e,show:!0,popupClass:this.getPopupClassName(),anchorAlign:n,popupAlign:p,collision:i,animate:!1,key:"1"},s.createElement(m,{parentItemId:t,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}))}return null}renderMenuIconIfApplicable(){const{icon:e,svgIcon:t}=this.props.item;return e||t?s.createElement(d.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(I.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&&a.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender}getPopupClassName(){return d.classNames("k-menu-popup k-overflow-visible",{"k-rtl":this.props.isDirectionRightToLeft})}getMenuItemClassName(e){return d.classNames("k-item","k-menu-item",{"k-first":a.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled},e.cssClass)}}exports.MenuItemInternal=u;exports.MenuItemInternalsList=m;