@progress/kendo-react-layout 16.2.0-develop.2 → 16.2.0-develop.20

package/expansionpanel/ExpansionPanel.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 w=require("react"),a=require("prop-types"),t=require("@progress/kendo-react-common"),g=require("@progress/kendo-svg-icons");function P(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(d,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return d.default=e,Object.freeze(d)}const n=P(w),f=n.forwardRef((e,d)=>{const s=n.useRef(null),[i,p]=n.useState(!1),k=t.useId(),b=n.useCallback(()=>({element:s.current}),[]);n.useImperativeHandle(d,b);const{expanded:o=!1,disabled:c,title:v,subtitle:x,onAction:r,expandIcon:u,collapseIcon:m,expandSVGIcon:y,collapseSVGIcon:I}=e,N=n.useCallback(l=>{t.dispatchEvent(r,l,b(),{expanded:o})},[r,o]),E=n.useCallback(l=>{(l.keyCode===t.Keys.enter||l.keyCode===t.Keys.space)&&(l.preventDefault(),t.dispatchEvent(r,l,b(),{expanded:o}))},[r,o]),h=n.useCallback(()=>{e.disabled||p(!0)},[e.disabled]),C=n.useCallback(()=>{e.disabled||p(!1)},[e.disabled]),{onFocus:S,onBlur:R}=t.useAsyncFocusBlur({onFocus:h,onBlur:C});return n.createElement("div",{ref:s,className:t.classNames("k-expander",e.className,{"k-expanded":o,"k-focus":i&&!c,"k-disabled":c}),onFocus:S,onBlur:R,style:e.style,id:e.id,dir:t.useRtl(s,e.dir),onKeyDown:c?void 0:E},n.createElement("div",{role:"button","aria-controls":e.ariaControls||k,"aria-expanded":o,"aria-disabled":c||void 0,tabIndex:t.getTabIndex(e.tabIndex,c),className:"k-expander-header",onClick:c?void 0:N},v!==void 0?n.createElement("div",{className:"k-expander-title"},v):void 0,n.createElement("span",{className:"k-spacer"}),x!==void 0?n.createElement("div",{className:"k-expander-sub-title"},x):void 0,n.createElement("span",{className:"k-expander-indicator"},n.createElement(t.IconWrap,{name:o?m?void 0:"chevron-up":u?void 0:"chevron-down",icon:o?!I&&!m?g.chevronUpIcon:I:!y&&!u?g.chevronDownIcon:y,className:t.classNames(o?{[String(m)]:!!m}:{[String(u)]:!!u})}))),n.createElement("div",{id:k,className:t.classNames("k-expander-content-wrapper",{"k-hidden":!o})},e.children))});f.propTypes={children:a.node,className:a.string,style:a.object,dir:a.string,id:a.string,tabIndex:a.number,title:a.node,subtitle:a.node,expandIcon:a.string,collapseIcon:a.string,expanded:a.bool,disabled:a.bool,onAction:a.func};f.displayName="KendoReactExpansionPanel";exports.ExpansionPanel=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),t=require("prop-types"),o=require("@progress/kendo-react-common"),B=require("@progress/kendo-react-animation"),C=require("@progress/kendo-svg-icons");function F(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(l,s,d.get?d:{enumerable:!0,get:()=>n[s]})}}return l.default=n,Object.freeze(l)}const e=F(j),q=300,p=e.forwardRef((n,l)=>{const s=e.useRef(null),[d,v]=e.useState(!1),x=o.useId(),b=e.useCallback(()=>({element:s.current}),[]);e.useImperativeHandle(l,b);const{expanded:a=!1,animation:f=!0,disabled:c,title:E,subtitle:I,onAction:r,expandIcon:u,collapseIcon:m,expandSVGIcon:y,collapseSVGIcon:N}=n,D=e.useCallback(i=>{o.dispatchEvent(r,i,b(),{expanded:a})},[r,a]),R=e.useCallback(i=>{(i.keyCode===o.Keys.enter||i.keyCode===o.Keys.space)&&(i.preventDefault(),o.dispatchEvent(r,i,b(),{expanded:a}))},[r,a]),S=e.useCallback(()=>{n.disabled||v(!0)},[n.disabled]),A=e.useCallback(()=>{n.disabled||v(!1)},[n.disabled]),{onFocus:O,onBlur:T}=o.useAsyncFocusBlur({onFocus:S,onBlur:A}),k=typeof f=="number"?f:q,g=f!==!1&&k>0,[w,h]=e.useState(!a);e.useEffect(()=>{a&&h(!1)},[a]);const P=e.useCallback(()=>{h(!0)},[]);return e.createElement("div",{ref:s,className:o.classNames("k-expander",n.className,{"k-expanded":a,"k-focus":d&&!c,"k-disabled":c}),onFocus:O,onBlur:T,style:n.style,id:n.id,dir:o.useRtl(s,n.dir),onKeyDown:c?void 0:R},e.createElement("div",{role:"button","aria-controls":n.ariaControls||x,"aria-expanded":a,"aria-disabled":c||void 0,tabIndex:o.getTabIndex(n.tabIndex,c),className:"k-expander-header",onClick:c?void 0:D},E!==void 0?e.createElement("div",{className:"k-expander-title"},E):void 0,e.createElement("span",{className:"k-spacer"}),I!==void 0?e.createElement("div",{className:"k-expander-sub-title"},I):void 0,e.createElement("span",{className:"k-expander-indicator"},e.createElement(o.IconWrap,{name:a?m?void 0:"chevron-up":u?void 0:"chevron-down",icon:a?!N&&!m?C.chevronUpIcon:N:!y&&!u?C.chevronDownIcon:y,className:o.classNames(a?{[String(m)]:!!m}:{[String(u)]:!!u})}))),e.createElement("div",{id:x,className:o.classNames("k-expander-content-wrapper",{"k-hidden":!a&&(!g||w)})},g?e.createElement(B.Reveal,{transitionEnterDuration:k,transitionExitDuration:k,unmountOnExit:!0,onAfterExited:P},a&&n.children):n.children))});p.propTypes={children:t.node,className:t.string,style:t.object,dir:t.string,id:t.string,tabIndex:t.number,title:t.node,subtitle:t.node,expandIcon:t.string,collapseIcon:t.string,expanded:t.bool,animation:t.oneOfType([t.bool,t.number]),disabled:t.bool,onAction:t.func};p.displayName="KendoReactExpansionPanel";exports.ExpansionPanel=p;

package/expansionpanel/ExpansionPanel.mjs

@@ -7,89 +7,115 @@
  */
 import * as e from "react";
 import n from "prop-types";
-import { useId as F, dispatchEvent as v, Keys as I, useAsyncFocusBlur as S, useRtl as D, classNames as u, getTabIndex as K, IconWrap as A } from "@progress/kendo-react-common";
-import { chevronDownIcon as P, chevronUpIcon as T } from "@progress/kendo-svg-icons";
-const y = e.forwardRef((a, N) => {
-  const i = e.useRef(null), [h, m] = e.useState(!1), b = F(), r = e.useCallback(() => ({ element: i.current }), []);
-  e.useImperativeHandle(N, r);
+import { useId as K, dispatchEvent as y, Keys as h, useAsyncFocusBlur as O, useRtl as P, classNames as b, getTabIndex as U, IconWrap as G } from "@progress/kendo-react-common";
+import { Reveal as V } from "@progress/kendo-react-animation";
+import { chevronDownIcon as _, chevronUpIcon as j } from "@progress/kendo-svg-icons";
+const L = 300, C = e.forwardRef((t, g) => {
+  const c = e.useRef(null), [A, f] = e.useState(!1), x = K(), r = e.useCallback(() => ({ element: c.current }), []);
+  e.useImperativeHandle(g, r);
   const {
-    expanded: t = !1,
+    expanded: a = !1,
+    animation: u = !0,
     disabled: o,
     title: k,
     subtitle: p,
-    onAction: d,
-    expandIcon: s,
-    collapseIcon: c,
-    expandSVGIcon: x,
-    collapseSVGIcon: f
-  } = a, E = e.useCallback(
-    (l) => {
-      v(d, l, r(), {
-        expanded: t
+    onAction: i,
+    expandIcon: l,
+    collapseIcon: d,
+    expandSVGIcon: v,
+    collapseSVGIcon: E
+  } = t, D = e.useCallback(
+    (s) => {
+      y(i, s, r(), {
+        expanded: a
       });
     },
-    [d, t]
-  ), C = e.useCallback(
-    (l) => {
-      (l.keyCode === I.enter || l.keyCode === I.space) && (l.preventDefault(), v(d, l, r(), {
-        expanded: t
+    [i, a]
+  ), R = e.useCallback(
+    (s) => {
+      (s.keyCode === h.enter || s.keyCode === h.space) && (s.preventDefault(), y(i, s, r(), {
+        expanded: a
       }));
     },
-    [d, t]
-  ), g = e.useCallback(() => {
-    a.disabled || m(!0);
-  }, [a.disabled]), w = e.useCallback(() => {
-    a.disabled || m(!1);
-  }, [a.disabled]), { onFocus: B, onBlur: R } = S({ onFocus: g, onBlur: w });
+    [i, a]
+  ), T = e.useCallback(() => {
+    t.disabled || f(!0);
+  }, [t.disabled]), w = e.useCallback(() => {
+    t.disabled || f(!1);
+  }, [t.disabled]), { onFocus: B, onBlur: F } = O({ onFocus: T, onBlur: w }), m = typeof u == "number" ? u : L, I = u !== !1 && m > 0, [S, N] = e.useState(!a);
+  e.useEffect(() => {
+    a && N(!1);
+  }, [a]);
+  const H = e.useCallback(() => {
+    N(!0);
+  }, []);
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      ref: i,
-      className: u("k-expander", a.className, {
-        "k-expanded": t,
-        "k-focus": h && !o,
+      ref: c,
+      className: b("k-expander", t.className, {
+        "k-expanded": a,
+        "k-focus": A && !o,
         "k-disabled": o
       }),
       onFocus: B,
-      onBlur: R,
-      style: a.style,
-      id: a.id,
-      dir: D(i, a.dir),
-      onKeyDown: o ? void 0 : C
+      onBlur: F,
+      style: t.style,
+      id: t.id,
+      dir: P(c, t.dir),
+      onKeyDown: o ? void 0 : R
     },
     /* @__PURE__ */ e.createElement(
       "div",
       {
         role: "button",
-        "aria-controls": a.ariaControls || b,
-        "aria-expanded": t,
+        "aria-controls": t.ariaControls || x,
+        "aria-expanded": a,
         "aria-disabled": o || void 0,
-        tabIndex: K(a.tabIndex, o),
+        tabIndex: U(t.tabIndex, o),
         className: "k-expander-header",
-        onClick: o ? void 0 : E
+        onClick: o ? void 0 : D
       },
       k !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-title" }, k) : void 0,
       /* @__PURE__ */ e.createElement("span", { className: "k-spacer" }),
       p !== void 0 ? /* @__PURE__ */ e.createElement("div", { className: "k-expander-sub-title" }, p) : void 0,
       /* @__PURE__ */ e.createElement("span", { className: "k-expander-indicator" }, /* @__PURE__ */ e.createElement(
-        A,
+        G,
         {
-          name: t ? c ? void 0 : "chevron-up" : s ? void 0 : "chevron-down",
-          icon: t ? !f && !c ? T : f : !x && !s ? P : x,
-          className: u(
-            t ? {
-              [String(c)]: !!c
+          name: a ? d ? void 0 : "chevron-up" : l ? void 0 : "chevron-down",
+          icon: a ? !E && !d ? j : E : !v && !l ? _ : v,
+          className: b(
+            a ? {
+              [String(d)]: !!d
             } : {
-              [String(s)]: !!s
+              [String(l)]: !!l
             }
           )
         }
       ))
     ),
-    /* @__PURE__ */ e.createElement("div", { id: b, className: u("k-expander-content-wrapper", { "k-hidden": !t }) }, a.children)
+    /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        id: x,
+        className: b("k-expander-content-wrapper", {
+          "k-hidden": !a && (!I || S)
+        })
+      },
+      I ? /* @__PURE__ */ e.createElement(
+        V,
+        {
+          transitionEnterDuration: m,
+          transitionExitDuration: m,
+          unmountOnExit: !0,
+          onAfterExited: H
+        },
+        a && t.children
+      ) : t.children
+    )
   );
 });
-y.propTypes = {
+C.propTypes = {
   children: n.node,
   className: n.string,
   style: n.object,
@@ -101,10 +127,11 @@ y.propTypes = {
   expandIcon: n.string,
   collapseIcon: n.string,
   expanded: n.bool,
+  animation: n.oneOfType([n.bool, n.number]),
   disabled: n.bool,
   onAction: n.func
 };
-y.displayName = "KendoReactExpansionPanel";
+C.displayName = "KendoReactExpansionPanel";
 export {
-  y as ExpansionPanel
+  C as ExpansionPanel
 };

package/expansionpanel/interfaces.d.ts

@@ -82,6 +82,18 @@ export interface ExpansionPanelProps {
      * @default false
      */
     expanded?: boolean;
+    /**
+     * Enables the expand and collapse animation of the ExpansionPanel.
+     * Set a number to specify the animation duration in milliseconds.
+     *
+     * @default true
+     *
+     * @example
+     * ```jsx
+     * <ExpansionPanel animation={200} />
+     * ```
+     */
+    animation?: boolean | number;
     /**
      * Sets the `disabled` state of the ExpansionPanel.
      *

package/menu/components/Menu.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 X=require("react"),i=require("prop-types"),M=require("@progress/kendo-react-common"),t=require("../utils/itemsIdsUtils.js"),ee=require("../utils/prepareInputItemsForInternalWork.js"),Z=require("../utils/getNewItemIdUponKeyboardNavigation.js"),B=require("../utils/hoverDelay.js"),te=require("./MenuItemInternal.js"),re=require("../utils/DirectionHolder.js"),ne=require("../utils/MouseOverHandler.js");function oe(o){const D=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const I in o)if(I!=="default"){const b=Object.getOwnPropertyDescriptor(o,I);Object.defineProperty(D,I,b.get?b:{enumerable:!0,get:()=>o[I]})}}return D.default=o,Object.freeze(D)}const n=oe(X),K={focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID},S=n.forwardRef((o,D)=>{const I=n.useRef(null),b=n.useRef(null),y=n.useRef(null),R=n.useRef(new re.DirectionHolder),O=n.useRef([]),N=n.useRef([]),l=n.useRef(o);l.current=o;const[v,h]=n.useState({...K}),C=n.useRef(v);C.current=v;const w=n.useRef(()=>{}),P=n.useRef(new ne.MouseOverHandler(o.openOnClick,()=>w.current())),{items:j,inputItems:F}=ee.prepareInputItemsForInternalWork(o.items,o.children);O.current=j,N.current=F,R.current.setIsDirectionRightToLeft(V());function V(){return!!(l.current.dir!==void 0?l.current.dir==="rtl":I.current&&getComputedStyle(I.current).direction==="rtl")}const g=n.useCallback(()=>{b.current&&(clearTimeout(b.current),b.current=null),y.current&&(clearTimeout(y.current),y.current=null)},[]),H=n.useCallback(()=>{g(),h({...K})},[g]);w.current=H;const E=n.useRef({get element(){return I.current},reset:()=>w.current()});n.useImperativeHandle(D,()=>E.current,[]);const m=n.useCallback(e=>{h(r=>{const c=e===t.EMPTY_ID?r.tabbableItemId:t.getRootParentId(e);return{hoveredItemId:e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(r.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?r.hoveredItemId:t.EMPTY_ID,focusedItemId:e,tabbableItemId:c}})},[]),a=n.useCallback(e=>{h(r=>t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(r.focusedItemId)?{hoveredItemId:e,focusedItemId:r.focusedItemId,tabbableItemId:r.tabbableItemId}:{hoveredItemId:e,focusedItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID})},[]),f=n.useCallback(e=>t.getItemById(e,N.current),[]),T=n.useCallback((e,r)=>{M.dispatchEvent(l.current.onSelect,e,E.current,{item:f(r),itemId:r})},[f]),_=n.useCallback(e=>!l.current.customCloseItemIds||l.current.customCloseItemIds.indexOf(e)===-1,[]),Y=n.useCallback(e=>{var s,u;const r=l.current,c=C.current;if(r.openOnClick&&c.hoveredItemId!==t.EMPTY_ID){const d=e.target;((s=I.current)==null?void 0:s.contains(d))===!1&&(r.id&&((u=d.closest)!=null&&u.call(d,`[id^="${r.id}_"]`))||a(t.EMPTY_ID))}},[a]),W=n.useCallback(e=>{const r=C.current,c=l.current,s=O.current;if(r.focusedItemId!==t.EMPTY_ID){const u=t.getItemById(r.focusedItemId,s);let d=Z.getNewItemIdUponKeyboardNavigation(s,u.id,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft());const k=t.getItemById(d,s);if(k!=null&&k.separator&&(d=Z.getNewItemIdUponKeyboardNavigation(s,d,e.keyCode,e.key,c.vertical,R.current.getIsDirectionRightToLeft())),u.id!==d&&(e.preventDefault(),m(d)),(e.keyCode===M.Keys.enter||e.keyCode===M.Keys.space)&&!u.disabled&&(P.current.handleItemSelectedViaKeyboard(),T(e,u.id),!e.isDefaultPrevented()&&u.items.length===0&&u.url&&window.location.assign(u.url)),e.keyCode===M.Keys.esc&&t.isIdZeroLevel(u.id)&&c.onClose){const p=f(u.id);c.onClose({target:E.current,item:p,itemId:u.id})}}},[m,T,f]),U=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&(g(),b.current=window.setTimeout(()=>{a(e),b.current=null},B.getHoverOpenDelay(c)))},[g,a]),A=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(P.current.IsMouseOverEnabled||s)&&_(e)&&(g(),y.current=window.setTimeout(()=>{a(s?t.getDirectParentId(e):t.EMPTY_ID),y.current=null},B.getHoverCloseDelay(c)))},[g,_,a]),z=n.useCallback(e=>{C.current.hoveredItemId===t.EMPTY_ID?m(e):h(c=>({focusedItemId:e,hoveredItemId:c.hoveredItemId,tabbableItemId:t.getRootParentId(e)}))},[m]),G=n.useCallback((e,r)=>{const c=O.current,s=t.getItemById(r,c),u=C.current,d=l.current;if(!s.disabled){const k=t.isIdZeroLevel(r),p=!s.items||s.items.length===0;k?(m(r),p||d.openOnClick&&u.hoveredItemId!==t.EMPTY_ID&&t.getRootParentId(u.hoveredItemId)===r?a(t.EMPTY_ID):a(r)):p&&(m(r),a(t.EMPTY_ID)),T(e,r),!e.isDefaultPrevented()&&s.url&&window.location.assign(s.url)}},[m,a,T]),$=n.useCallback((e,r)=>{const c=l.current;c.onClose&&c.onClose({target:E.current,item:f(e),itemId:e,popupCloseEvent:r})},[f]),x=n.useCallback((e,r)=>{var s;const c=l.current;if(_(e)&&m(t.EMPTY_ID),((s=r.relatedTarget)==null?void 0:s.nodeName)==="LI"){const u=r.relatedTarget.getAttribute("id");if(u!=null&&u.includes(c.id))return}if(t.isIdZeroLevel(e)&&c.onClose){const u=f(e);c.onClose({target:E.current,item:u,itemId:e})}},[_,m,f]),q=n.useRef(o.vertical);n.useEffect(()=>()=>{g()},[g]),n.useEffect(()=>(o.openOnClick&&document.addEventListener("mousedown",Y),()=>{document.removeEventListener("mousedown",Y)}),[o.openOnClick,Y]),n.useEffect(()=>{const e=!!q.current!=!!o.vertical,r=R.current.hasDirectionChanged();(e||r)&&H(),P.current.OpenOnClick=o.openOnClick,q.current=o.vertical});const J=()=>M.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!o.vertical},{"k-menu-vertical":o.vertical},o.className);let L;v.hoveredItemId?L=v.hoveredItemId:v.focusedItemId?L=t.getDirectParentId(v.focusedItemId):L=t.EMPTY_ID;const Q=o.animate!==void 0?o.animate:!0;return n.createElement("div",{id:o.id,onKeyDown:W,style:o.style,className:R.current.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:I},n.createElement(te.MenuItemInternalsList,{className:J(),"aria-orientation":o.vertical?"vertical":void 0,items:O.current,animate:Q,isMenuVertical:o.vertical,isDirectionRightToLeft:R.current.getIsDirectionRightToLeft(),focusedItemId:v.focusedItemId,lastItemIdToBeOpened:L,tabbableItemId:v.tabbableItemId,itemRender:o.itemRender,linkRender:o.linkRender,menuGuid:o.id,onMouseLeave:A,onMouseOver:U,onFocus:z,onClick:G,onBlur:x,onOriginalItemNeeded:f,onPopupClose:$,role:o.role}))});S.propTypes={vertical:i.bool,items:i.arrayOf(i.object),style:i.object,animate:i.oneOfType([i.bool,i.shape({openDuration:i.number,closeDuration:i.number})]),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,onClose:i.func,role:i.string};S.displayName="Menu";exports.Menu=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),i=require("prop-types"),k=require("@progress/kendo-react-common"),t=require("../utils/itemsIdsUtils.js"),te=require("../utils/prepareInputItemsForInternalWork.js"),B=require("../utils/getNewItemIdUponKeyboardNavigation.js"),K=require("../utils/hoverDelay.js"),re=require("./MenuItemInternal.js"),ne=require("../utils/DirectionHolder.js"),oe=require("../utils/MouseOverHandler.js");function ce(o){const E=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const I in o)if(I!=="default"){const b=Object.getOwnPropertyDescriptor(o,I);Object.defineProperty(E,I,b.get?b:{enumerable:!0,get:()=>o[I]})}}return E.default=o,Object.freeze(E)}const n=ce(ee),U={focusedItemId:t.EMPTY_ID,hoveredItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID},S=n.forwardRef((o,E)=>{const I=n.useRef(null),b=n.useRef(null),M=n.useRef(null),D=n.useRef(new ne.DirectionHolder),h=n.useRef([]),N=n.useRef([]),l=n.useRef(o);l.current=o;const[v,P]=n.useState({...U}),C=n.useRef(v);C.current=v;const w=n.useRef(()=>{}),T=n.useRef(new oe.MouseOverHandler(o.openOnClick,()=>w.current())),{items:j,inputItems:F}=te.prepareInputItemsForInternalWork(o.items,o.children);h.current=j,N.current=F,D.current.setIsDirectionRightToLeft(V());function V(){return!!(l.current.dir!==void 0?l.current.dir==="rtl":I.current&&getComputedStyle(I.current).direction==="rtl")}const g=n.useCallback(()=>{b.current&&(clearTimeout(b.current),b.current=null),M.current&&(clearTimeout(M.current),M.current=null)},[]),H=n.useCallback(()=>{g(),P({...U})},[g]);w.current=H;const O=n.useRef({get element(){return I.current},reset:()=>w.current()});n.useImperativeHandle(E,()=>O.current,[]);const m=n.useCallback(e=>{P(r=>{const c=e===t.EMPTY_ID?r.tabbableItemId:t.getRootParentId(e);return{hoveredItemId:e===t.EMPTY_ID||t.isIdEmptyOrZeroLevel(r.hoveredItemId)&&t.isIdEmptyOrZeroLevel(e)?r.hoveredItemId:t.EMPTY_ID,focusedItemId:e,tabbableItemId:c}})},[]),a=n.useCallback(e=>{P(r=>t.isIdEmptyOrZeroLevel(e)&&t.isIdEmptyOrZeroLevel(r.focusedItemId)?{hoveredItemId:e,focusedItemId:r.focusedItemId,tabbableItemId:r.tabbableItemId}:{hoveredItemId:e,focusedItemId:t.EMPTY_ID,tabbableItemId:t.ZERO_LEVEL_ZERO_ITEM_ID})},[]),f=n.useCallback(e=>t.getItemById(e,N.current),[]),_=n.useCallback((e,r)=>{k.dispatchEvent(l.current.onSelect,e,O.current,{item:f(r),itemId:r})},[f]),L=n.useCallback(e=>!l.current.customCloseItemIds||l.current.customCloseItemIds.indexOf(e)===-1,[]),Y=n.useCallback(e=>{var s,u;const r=l.current,c=C.current;if(r.openOnClick&&c.hoveredItemId!==t.EMPTY_ID){const d=e.target;((s=I.current)==null?void 0:s.contains(d))===!1&&(r.id&&((u=d.closest)!=null&&u.call(d,`[id^="${r.id}_"]`))||a(t.EMPTY_ID))}},[a]),W=n.useCallback(e=>{const r=C.current,c=l.current,s=h.current;if(r.focusedItemId!==t.EMPTY_ID){const u=t.getItemById(r.focusedItemId,s);let d=B.getNewItemIdUponKeyboardNavigation(s,u.id,e.keyCode,e.key,c.vertical,D.current.getIsDirectionRightToLeft());const y=t.getItemById(d,s);if(y!=null&&y.separator&&(d=B.getNewItemIdUponKeyboardNavigation(s,d,e.keyCode,e.key,c.vertical,D.current.getIsDirectionRightToLeft())),u.id!==d&&(e.preventDefault(),m(d)),(e.keyCode===k.Keys.enter||e.keyCode===k.Keys.space)&&!u.disabled&&(T.current.handleItemSelectedViaKeyboard(),_(e,u.id),!e.isDefaultPrevented()&&u.items.length===0&&u.url)){const R=k.sanitizeUrl(u.url);R&&window.location.assign(R)}if(e.keyCode===k.Keys.esc&&t.isIdZeroLevel(u.id)&&c.onClose){const R=f(u.id);c.onClose({target:O.current,item:R,itemId:u.id})}}},[m,_,f]),z=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(T.current.IsMouseOverEnabled||s)&&(g(),b.current=window.setTimeout(()=>{a(e),b.current=null},K.getHoverOpenDelay(c)))},[g,a]),A=n.useCallback(e=>{const r=C.current,c=l.current,s=c.openOnClick&&!t.isIdZeroLevel(e)&&r.hoveredItemId!==t.EMPTY_ID;(T.current.IsMouseOverEnabled||s)&&L(e)&&(g(),M.current=window.setTimeout(()=>{a(s?t.getDirectParentId(e):t.EMPTY_ID),M.current=null},K.getHoverCloseDelay(c)))},[g,L,a]),G=n.useCallback(e=>{C.current.hoveredItemId===t.EMPTY_ID?m(e):P(c=>({focusedItemId:e,hoveredItemId:c.hoveredItemId,tabbableItemId:t.getRootParentId(e)}))},[m]),$=n.useCallback((e,r)=>{const c=h.current,s=t.getItemById(r,c),u=C.current,d=l.current;if(!s.disabled){const y=t.isIdZeroLevel(r),R=!s.items||s.items.length===0;if(y?(m(r),R||d.openOnClick&&u.hoveredItemId!==t.EMPTY_ID&&t.getRootParentId(u.hoveredItemId)===r?a(t.EMPTY_ID):a(r)):R&&(m(r),a(t.EMPTY_ID)),_(e,r),!e.isDefaultPrevented()&&s.url){const Z=k.sanitizeUrl(s.url);Z&&window.location.assign(Z)}}},[m,a,_]),x=n.useCallback((e,r)=>{const c=l.current;c.onClose&&c.onClose({target:O.current,item:f(e),itemId:e,popupCloseEvent:r})},[f]),J=n.useCallback((e,r)=>{var s;const c=l.current;if(L(e)&&m(t.EMPTY_ID),((s=r.relatedTarget)==null?void 0:s.nodeName)==="LI"){const u=r.relatedTarget.getAttribute("id");if(u!=null&&u.includes(c.id))return}if(t.isIdZeroLevel(e)&&c.onClose){const u=f(e);c.onClose({target:O.current,item:u,itemId:e})}},[L,m,f]),q=n.useRef(o.vertical);n.useEffect(()=>()=>{g()},[g]),n.useEffect(()=>(o.openOnClick&&document.addEventListener("mousedown",Y),()=>{document.removeEventListener("mousedown",Y)}),[o.openOnClick,Y]),n.useEffect(()=>{const e=!!q.current!=!!o.vertical,r=D.current.hasDirectionChanged();(e||r)&&H(),T.current.OpenOnClick=o.openOnClick,q.current=o.vertical});const Q=()=>k.classNames("k-reset","k-header","k-menu",{"k-menu-horizontal":!o.vertical},{"k-menu-vertical":o.vertical},o.className);let p;v.hoveredItemId?p=v.hoveredItemId:v.focusedItemId?p=t.getDirectParentId(v.focusedItemId):p=t.EMPTY_ID;const X=o.animate!==void 0?o.animate:!0;return n.createElement("div",{id:o.id,onKeyDown:W,style:o.style,className:D.current.getIsDirectionRightToLeft()?"k-rtl":void 0,ref:I},n.createElement(re.MenuItemInternalsList,{className:Q(),"aria-orientation":o.vertical?"vertical":void 0,items:h.current,animate:X,isMenuVertical:o.vertical,isDirectionRightToLeft:D.current.getIsDirectionRightToLeft(),focusedItemId:v.focusedItemId,lastItemIdToBeOpened:p,tabbableItemId:v.tabbableItemId,itemRender:o.itemRender,linkRender:o.linkRender,menuGuid:o.id,onMouseLeave:A,onMouseOver:z,onFocus:G,onClick:$,onBlur:J,onOriginalItemNeeded:f,onPopupClose:x,role:o.role}))});S.propTypes={vertical:i.bool,items:i.arrayOf(i.object),style:i.object,animate:i.oneOfType([i.bool,i.shape({openDuration:i.number,closeDuration:i.number})]),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,onClose:i.func,role:i.string};S.displayName="Menu";exports.Menu=S;

package/menu/components/Menu.mjs

@@ -7,180 +7,187 @@
  */
 import * as r from "react";
 import u from "prop-types";
-import { dispatchEvent as oe, Keys as B, classNames as ce } from "@progress/kendo-react-common";
-import { ZERO_LEVEL_ZERO_ITEM_ID as A, EMPTY_ID as i, getRootParentId as _, isIdEmptyOrZeroLevel as P, getItemById as S, isIdZeroLevel as O, getDirectParentId as W } from "../utils/itemsIdsUtils.mjs";
-import { prepareInputItemsForInternalWork as se } from "../utils/prepareInputItemsForInternalWork.mjs";
-import { getNewItemIdUponKeyboardNavigation as Z } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
-import { getHoverOpenDelay as ue, getHoverCloseDelay as ie } from "../utils/hoverDelay.mjs";
-import { MenuItemInternalsList as le } from "./MenuItemInternal.mjs";
-import { DirectionHolder as ae } from "../utils/DirectionHolder.mjs";
-import { MouseOverHandler as de } from "../utils/MouseOverHandler.mjs";
-const q = {
+import { dispatchEvent as se, Keys as B, sanitizeUrl as W, classNames as ue } from "@progress/kendo-react-common";
+import { ZERO_LEVEL_ZERO_ITEM_ID as j, EMPTY_ID as i, getRootParentId as _, isIdEmptyOrZeroLevel as P, getItemById as S, isIdZeroLevel as D, getDirectParentId as Z } from "../utils/itemsIdsUtils.mjs";
+import { prepareInputItemsForInternalWork as ie } from "../utils/prepareInputItemsForInternalWork.mjs";
+import { getNewItemIdUponKeyboardNavigation as q } from "../utils/getNewItemIdUponKeyboardNavigation.mjs";
+import { getHoverOpenDelay as le, getHoverCloseDelay as ae } from "../utils/hoverDelay.mjs";
+import { MenuItemInternalsList as de } from "./MenuItemInternal.mjs";
+import { DirectionHolder as me } from "../utils/DirectionHolder.mjs";
+import { MouseOverHandler as fe } from "../utils/MouseOverHandler.mjs";
+const A = {
   focusedItemId: i,
   hoveredItemId: i,
-  tabbableItemId: A
-}, j = r.forwardRef((o, x) => {
-  const R = r.useRef(null), g = r.useRef(null), h = r.useRef(null), k = r.useRef(new ae()), D = r.useRef([]), F = r.useRef([]), l = r.useRef(o);
+  tabbableItemId: j
+}, z = r.forwardRef((o, x) => {
+  const g = r.useRef(null), h = r.useRef(null), y = r.useRef(null), v = r.useRef(new me()), L = r.useRef([]), F = r.useRef([]), l = r.useRef(o);
   l.current = o;
-  const [f, L] = r.useState({ ...q }), C = r.useRef(f);
-  C.current = f;
+  const [I, p] = r.useState({ ...A }), C = r.useRef(I);
+  C.current = I;
   const H = r.useRef(() => {
-  }), p = r.useRef(new de(o.openOnClick, () => H.current())), { items: z, inputItems: G } = se(
+  }), T = r.useRef(new fe(o.openOnClick, () => H.current())), { items: G, inputItems: Y } = ie(
     o.items,
     o.children
   );
-  D.current = z, F.current = G, k.current.setIsDirectionRightToLeft(U());
-  function U() {
-    return !!(l.current.dir !== void 0 ? l.current.dir === "rtl" : R.current && getComputedStyle(R.current).direction === "rtl");
+  L.current = G, F.current = Y, v.current.setIsDirectionRightToLeft($());
+  function $() {
+    return !!(l.current.dir !== void 0 ? l.current.dir === "rtl" : g.current && getComputedStyle(g.current).direction === "rtl");
   }
   const b = r.useCallback(() => {
-    g.current && (clearTimeout(g.current), g.current = null), h.current && (clearTimeout(h.current), h.current = null);
+    h.current && (clearTimeout(h.current), h.current = null), y.current && (clearTimeout(y.current), y.current = null);
   }, []), K = r.useCallback(() => {
-    b(), L({ ...q });
+    b(), p({ ...A });
   }, [b]);
   H.current = K;
-  const y = r.useRef({
+  const O = r.useRef({
     get element() {
-      return R.current;
+      return g.current;
     },
     reset: () => H.current()
   });
-  r.useImperativeHandle(x, () => y.current, []);
+  r.useImperativeHandle(x, () => O.current, []);
   const m = r.useCallback((e) => {
-    L((t) => {
+    p((t) => {
       const n = e === i ? t.tabbableItemId : _(e);
       return { hoveredItemId: e === i || P(t.hoveredItemId) && P(e) ? t.hoveredItemId : i, focusedItemId: e, tabbableItemId: n };
     });
   }, []), a = r.useCallback((e) => {
-    L((t) => P(e) && P(t.focusedItemId) ? {
+    p((t) => P(e) && P(t.focusedItemId) ? {
       hoveredItemId: e,
       focusedItemId: t.focusedItemId,
       tabbableItemId: t.tabbableItemId
-    } : { hoveredItemId: e, focusedItemId: i, tabbableItemId: A });
-  }, []), I = r.useCallback((e) => S(e, F.current), []), T = r.useCallback(
+    } : { hoveredItemId: e, focusedItemId: i, tabbableItemId: j });
+  }, []), f = r.useCallback((e) => S(e, F.current), []), E = r.useCallback(
     (e, t) => {
-      oe(l.current.onSelect, e, y.current, {
-        item: I(t),
+      se(l.current.onSelect, e, O.current, {
+        item: f(t),
         itemId: t
       });
     },
-    [I]
-  ), E = r.useCallback((e) => !l.current.customCloseItemIds || l.current.customCloseItemIds.indexOf(e) === -1, []), N = r.useCallback(
+    [f]
+  ), M = r.useCallback((e) => !l.current.customCloseItemIds || l.current.customCloseItemIds.indexOf(e) === -1, []), N = r.useCallback(
     (e) => {
       var c, s;
       const t = l.current, n = C.current;
       if (t.openOnClick && n.hoveredItemId !== i) {
         const d = e.target;
-        ((c = R.current) == null ? void 0 : c.contains(d)) === !1 && (t.id && ((s = d.closest) != null && s.call(d, `[id^="${t.id}_"]`)) || a(i));
+        ((c = g.current) == null ? void 0 : c.contains(d)) === !1 && (t.id && ((s = d.closest) != null && s.call(d, `[id^="${t.id}_"]`)) || a(i));
       }
     },
     [a]
-  ), Y = r.useCallback(
+  ), J = r.useCallback(
     (e) => {
-      const t = C.current, n = l.current, c = D.current;
+      const t = C.current, n = l.current, c = L.current;
       if (t.focusedItemId !== i) {
         const s = S(t.focusedItemId, c);
-        let d = Z(
+        let d = q(
           c,
           s.id,
           e.keyCode,
           e.key,
           n.vertical,
-          k.current.getIsDirectionRightToLeft()
+          v.current.getIsDirectionRightToLeft()
         );
-        const v = S(d, c);
-        if (v != null && v.separator && (d = Z(
+        const R = S(d, c);
+        if (R != null && R.separator && (d = q(
           c,
           d,
           e.keyCode,
           e.key,
           n.vertical,
-          k.current.getIsDirectionRightToLeft()
-        )), s.id !== d && (e.preventDefault(), m(d)), (e.keyCode === B.enter || e.keyCode === B.space) && !s.disabled && (p.current.handleItemSelectedViaKeyboard(), T(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url && window.location.assign(s.url)), e.keyCode === B.esc && O(s.id) && n.onClose) {
-          const w = I(s.id);
+          v.current.getIsDirectionRightToLeft()
+        )), s.id !== d && (e.preventDefault(), m(d)), (e.keyCode === B.enter || e.keyCode === B.space) && !s.disabled && (T.current.handleItemSelectedViaKeyboard(), E(e, s.id), !e.isDefaultPrevented() && s.items.length === 0 && s.url)) {
+          const k = W(s.url);
+          k && window.location.assign(k);
+        }
+        if (e.keyCode === B.esc && D(s.id) && n.onClose) {
+          const k = f(s.id);
           n.onClose({
-            target: y.current,
-            item: w,
+            target: O.current,
+            item: k,
             itemId: s.id
           });
         }
       }
     },
-    [m, T, I]
-  ), $ = r.useCallback(
+    [m, E, f]
+  ), Q = r.useCallback(
     (e) => {
-      const t = C.current, n = l.current, c = n.openOnClick && !O(e) && t.hoveredItemId !== i;
-      (p.current.IsMouseOverEnabled || c) && (b(), g.current = window.setTimeout(() => {
-        a(e), g.current = null;
-      }, ue(n)));
+      const t = C.current, n = l.current, c = n.openOnClick && !D(e) && t.hoveredItemId !== i;
+      (T.current.IsMouseOverEnabled || c) && (b(), h.current = window.setTimeout(() => {
+        a(e), h.current = null;
+      }, le(n)));
     },
     [b, a]
-  ), J = r.useCallback(
+  ), X = r.useCallback(
     (e) => {
-      const t = C.current, n = l.current, c = n.openOnClick && !O(e) && t.hoveredItemId !== i;
-      (p.current.IsMouseOverEnabled || c) && E(e) && (b(), h.current = window.setTimeout(() => {
-        a(c ? W(e) : i), h.current = null;
-      }, ie(n)));
+      const t = C.current, n = l.current, c = n.openOnClick && !D(e) && t.hoveredItemId !== i;
+      (T.current.IsMouseOverEnabled || c) && M(e) && (b(), y.current = window.setTimeout(() => {
+        a(c ? Z(e) : i), y.current = null;
+      }, ae(n)));
     },
-    [b, E, a]
-  ), Q = r.useCallback(
+    [b, M, a]
+  ), ee = r.useCallback(
     (e) => {
-      C.current.hoveredItemId === i ? m(e) : L((n) => ({
+      C.current.hoveredItemId === i ? m(e) : p((n) => ({
         focusedItemId: e,
         hoveredItemId: n.hoveredItemId,
         tabbableItemId: _(e)
       }));
     },
     [m]
-  ), X = r.useCallback(
+  ), te = r.useCallback(
     (e, t) => {
-      const n = D.current, c = S(t, n), s = C.current, d = l.current;
+      const n = L.current, c = S(t, n), s = C.current, d = l.current;
       if (!c.disabled) {
-        const v = O(t), w = !c.items || c.items.length === 0;
-        v ? (m(t), w ? a(i) : d.openOnClick && s.hoveredItemId !== i && _(s.hoveredItemId) === t ? a(i) : a(t)) : w && (m(t), a(i)), T(e, t), !e.isDefaultPrevented() && c.url && window.location.assign(c.url);
+        const R = D(t), k = !c.items || c.items.length === 0;
+        if (R ? (m(t), k ? a(i) : d.openOnClick && s.hoveredItemId !== i && _(s.hoveredItemId) === t ? a(i) : a(t)) : k && (m(t), a(i)), E(e, t), !e.isDefaultPrevented() && c.url) {
+          const V = W(c.url);
+          V && window.location.assign(V);
+        }
       }
     },
-    [m, a, T]
-  ), ee = r.useCallback(
+    [m, a, E]
+  ), re = r.useCallback(
     (e, t) => {
       const n = l.current;
       n.onClose && n.onClose({
-        target: y.current,
-        item: I(e),
+        target: O.current,
+        item: f(e),
         itemId: e,
         popupCloseEvent: t
       });
     },
-    [I]
-  ), te = r.useCallback(
+    [f]
+  ), ne = r.useCallback(
     (e, t) => {
       var c;
       const n = l.current;
-      if (E(e) && m(i), ((c = t.relatedTarget) == null ? void 0 : c.nodeName) === "LI") {
+      if (M(e) && m(i), ((c = t.relatedTarget) == null ? void 0 : c.nodeName) === "LI") {
         const s = t.relatedTarget.getAttribute("id");
         if (s != null && s.includes(n.id))
           return;
       }
-      if (O(e) && n.onClose) {
-        const s = I(e);
+      if (D(e) && n.onClose) {
+        const s = f(e);
         n.onClose({
-          target: y.current,
+          target: O.current,
           item: s,
           itemId: e
         });
       }
     },
-    [E, m, I]
-  ), V = r.useRef(o.vertical);
+    [M, m, f]
+  ), U = r.useRef(o.vertical);
   r.useEffect(() => () => {
     b();
   }, [b]), r.useEffect(() => (o.openOnClick && document.addEventListener("mousedown", N), () => {
     document.removeEventListener("mousedown", N);
   }), [o.openOnClick, N]), r.useEffect(() => {
-    const e = !!V.current != !!o.vertical, t = k.current.hasDirectionChanged();
-    (e || t) && K(), p.current.OpenOnClick = o.openOnClick, V.current = o.vertical;
+    const e = !!U.current != !!o.vertical, t = v.current.hasDirectionChanged();
+    (e || t) && K(), T.current.OpenOnClick = o.openOnClick, U.current = o.vertical;
   });
-  const re = () => ce(
+  const oe = () => ue(
     "k-reset",
     "k-header",
     "k-menu",
@@ -188,46 +195,46 @@ const q = {
     { "k-menu-vertical": o.vertical },
     o.className
   );
-  let M;
-  f.hoveredItemId ? M = f.hoveredItemId : f.focusedItemId ? M = W(f.focusedItemId) : M = i;
-  const ne = o.animate !== void 0 ? o.animate : !0;
+  let w;
+  I.hoveredItemId ? w = I.hoveredItemId : I.focusedItemId ? w = Z(I.focusedItemId) : w = i;
+  const ce = o.animate !== void 0 ? o.animate : !0;
   return /* @__PURE__ */ r.createElement(
     "div",
     {
       id: o.id,
-      onKeyDown: Y,
+      onKeyDown: J,
       style: o.style,
-      className: k.current.getIsDirectionRightToLeft() ? "k-rtl" : void 0,
-      ref: R
+      className: v.current.getIsDirectionRightToLeft() ? "k-rtl" : void 0,
+      ref: g
     },
     /* @__PURE__ */ r.createElement(
-      le,
+      de,
       {
-        className: re(),
+        className: oe(),
         "aria-orientation": o.vertical ? "vertical" : void 0,
-        items: D.current,
-        animate: ne,
+        items: L.current,
+        animate: ce,
         isMenuVertical: o.vertical,
-        isDirectionRightToLeft: k.current.getIsDirectionRightToLeft(),
-        focusedItemId: f.focusedItemId,
-        lastItemIdToBeOpened: M,
-        tabbableItemId: f.tabbableItemId,
+        isDirectionRightToLeft: v.current.getIsDirectionRightToLeft(),
+        focusedItemId: I.focusedItemId,
+        lastItemIdToBeOpened: w,
+        tabbableItemId: I.tabbableItemId,
         itemRender: o.itemRender,
         linkRender: o.linkRender,
         menuGuid: o.id,
-        onMouseLeave: J,
-        onMouseOver: $,
-        onFocus: Q,
-        onClick: X,
-        onBlur: te,
-        onOriginalItemNeeded: I,
-        onPopupClose: ee,
+        onMouseLeave: X,
+        onMouseOver: Q,
+        onFocus: ee,
+        onClick: te,
+        onBlur: ne,
+        onOriginalItemNeeded: f,
+        onPopupClose: re,
         role: o.role
       }
     )
   );
 });
-j.propTypes = {
+z.propTypes = {
   vertical: u.bool,
   items: u.arrayOf(u.object),
   style: u.object,
@@ -249,7 +256,7 @@ j.propTypes = {
   onClose: u.func,
   role: u.string
 };
-j.displayName = "Menu";
+z.displayName = "Menu";
 export {
-  j as Menu
+  z as Menu
 };