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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/actionsheet/ActionSheet.d.ts +12 -0
  2. package/actionsheet/ActionSheet.js +1 -1
  3. package/actionsheet/ActionSheet.mjs +60 -58
  4. package/appbar/interfaces/AppBarProps.d.ts +2 -14
  5. package/bottomnavigation/BottomNavigation.js +1 -1
  6. package/bottomnavigation/BottomNavigation.mjs +24 -35
  7. package/bottomnavigation/BottomNavigationProps.d.ts +3 -13
  8. package/card/Avatar.js +1 -1
  9. package/card/Avatar.mjs +14 -26
  10. package/card/interfaces/AvatarProps.d.ts +1 -8
  11. package/dist/cdn/js/kendo-react-layout.js +1 -1
  12. package/drawer/Drawer.d.ts +1 -1
  13. package/drawer/DrawerContent.d.ts +1 -1
  14. package/drawer/DrawerItem.d.ts +1 -1
  15. package/menu/components/Menu.d.ts +14 -93
  16. package/menu/components/Menu.js +1 -1
  17. package/menu/components/Menu.mjs +223 -212
  18. package/menu/components/MenuItem.d.ts +4 -24
  19. package/menu/components/MenuItem.js +1 -1
  20. package/menu/components/MenuItem.mjs +16 -24
  21. package/menu/components/MenuItemArrow.d.ts +4 -19
  22. package/menu/components/MenuItemArrow.js +1 -1
  23. package/menu/components/MenuItemArrow.mjs +17 -36
  24. package/menu/components/MenuItemInternal.d.ts +2 -35
  25. package/menu/components/MenuItemInternal.js +1 -1
  26. package/menu/components/MenuItemInternal.mjs +174 -219
  27. package/menu/components/MenuItemLink.d.ts +1 -15
  28. package/menu/components/MenuItemLink.js +1 -1
  29. package/menu/components/MenuItemLink.mjs +17 -30
  30. package/menu/events.d.ts +4 -4
  31. package/menu/utils/DirectionHolder.js +1 -1
  32. package/menu/utils/DirectionHolder.mjs +1 -1
  33. package/package-metadata.js +1 -1
  34. package/package-metadata.mjs +2 -2
  35. package/package.json +14 -9
  36. package/splitter/SplitterBar.js +1 -1
  37. package/splitter/SplitterBar.mjs +65 -64
  38. package/stepper/Step.js +1 -1
  39. package/stepper/Step.mjs +1 -1
  40. package/tabstrip/TabStripNavigation.js +1 -1
  41. package/tabstrip/TabStripNavigation.mjs +31 -31
  42. package/timeline/TimelineCard.js +1 -1
  43. package/timeline/TimelineCard.mjs +13 -5
  44. package/timeline/TimelineHorizontal.js +1 -1
  45. package/timeline/TimelineHorizontal.mjs +39 -39
@@ -33,7 +33,7 @@ export interface DrawerHandle {
33
33
  * { text: 'Calendar', icon: 'k-i-calendar' },
34
34
  * { separator: true },
35
35
  * { text: 'Attachments', icon: 'k-i-hyperlink-email' },
36
- * { text: 'Favourites', icon: 'k-i-star-outline' }
36
+ * { text: 'Favourites', icon: 'k-i-star' }
37
37
  * ];
38
38
  *
39
39
  * const [expanded, setExpanded] = React.useState(true);
@@ -29,7 +29,7 @@ export interface DrawerContentHandle {
29
29
  * { text: 'Calendar', icon: 'k-i-calendar' },
30
30
  * { separator: true },
31
31
  * { text: 'Attachments', icon: 'k-i-hyperlink-email' },
32
- * { text: 'Favourites', icon: 'k-i-star-outline' }
32
+ * { text: 'Favourites', icon: 'k-i-star' }
33
33
  * ];
34
34
  *
35
35
  * const [expanded, setExpanded] = React.useState(true);
@@ -26,7 +26,7 @@ import * as React from 'react';
26
26
  * <DrawerItem text="Calendar" icon="k-i-calendar"/>
27
27
  * <DrawerItem separator={true} />
28
28
  * <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
29
- * <DrawerItem text="Favourites" icon="k-i-star-outline"/>
29
+ * <DrawerItem text="Favourites" icon="k-i-star"/>
30
30
  * </DrawerNavigation>
31
31
  * <DrawerContent><Button onClick={handleClick}>Toggle the drawer state</Button></DrawerContent>
32
32
  * </Drawer>
@@ -5,7 +5,6 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- import { default as PropTypes } from 'prop-types';
9
8
  import { MenuProps } from '../MenuProps';
10
9
  import * as React from 'react';
11
10
  /**
@@ -15,7 +14,19 @@ export interface MenuState {
15
14
  focusedItemId: string;
16
15
  hoveredItemId: string;
17
16
  tabbableItemId: string;
18
- isFirstRender: boolean;
17
+ }
18
+ /**
19
+ * Represent the `ref` of the Menu component.
20
+ */
21
+ export interface MenuHandle {
22
+ /**
23
+ * The current element or `null` if there is no one.
24
+ */
25
+ element: HTMLDivElement | null;
26
+ /**
27
+ * Resets the selection and opening of Menu items.
28
+ */
29
+ reset: () => void;
19
30
  }
20
31
  /**
21
32
  * Represents the [KendoReact Menu component](https://www.telerik.com/kendo-react-ui/components/layout/menu).
@@ -39,94 +50,4 @@ export interface MenuState {
39
50
  * }
40
51
  * ```
41
52
  */
42
- export declare class Menu extends React.Component<MenuProps, MenuState> {
43
- /**
44
- * @hidden
45
- */
46
- static propTypes: {
47
- vertical: PropTypes.Requireable<boolean>;
48
- items: PropTypes.Requireable<(object | null | undefined)[]>;
49
- style: PropTypes.Requireable<object>;
50
- animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
51
- openDuration: PropTypes.Requireable<number>;
52
- closeDuration: PropTypes.Requireable<number>;
53
- }> | null | undefined>>;
54
- dir: PropTypes.Requireable<string>;
55
- hoverOpenDelay: PropTypes.Requireable<number>;
56
- hoverCloseDelay: PropTypes.Requireable<number>;
57
- openOnClick: PropTypes.Requireable<boolean>;
58
- itemRender: PropTypes.Requireable<any>;
59
- linkRender: PropTypes.Requireable<any>;
60
- customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
61
- onSelect: PropTypes.Requireable<(...args: any[]) => any>;
62
- onClose: PropTypes.Requireable<(...args: any[]) => any>;
63
- role: PropTypes.Requireable<string>;
64
- };
65
- /**
66
- * @hidden
67
- */
68
- static defaultProps: {
69
- vertical: boolean;
70
- animate: boolean;
71
- };
72
- /**
73
- * @hidden
74
- */
75
- readonly state: MenuState;
76
- private itemHoverRequest;
77
- private itemLeaveRequest;
78
- private menuWrapperEl;
79
- private get menuItemId();
80
- private directionHolder;
81
- private inputItems;
82
- private items;
83
- private mouseOverHandler;
84
- /**
85
- * The current element or `null` if there is no one.
86
- */
87
- get element(): HTMLDivElement | null;
88
- constructor(props: MenuProps);
89
- protected get animate(): boolean;
90
- /**
91
- * @hidden
92
- */
93
- render(): React.JSX.Element;
94
- /**
95
- * @hidden
96
- */
97
- componentDidMount(): void;
98
- /**
99
- * @hidden
100
- */
101
- componentDidUpdate(prevProps: MenuProps): void;
102
- /**
103
- * @hidden
104
- */
105
- componentWillUnmount(): void;
106
- /**
107
- * Resets the selection and opening of Menu items.
108
- */
109
- reset: () => void;
110
- private handleClickOutside;
111
- private onKeyDown;
112
- private onItemMouseOver;
113
- private onItemMouseLeave;
114
- private onItemFocus;
115
- private onItemClick;
116
- private onPopupClose;
117
- private onItemBlur;
118
- private getInputItem;
119
- private setFocusedItemId;
120
- private setHoveredItemId;
121
- private getMenuClassName;
122
- private clearItemHoverAndLeaveRequestsIfApplicable;
123
- private isItemWithDefaultClose;
124
- private checkIsDirectionRightToLeft;
125
- private prepareItems;
126
- private dispatchSelectEventIfWired;
127
- }
128
- /**
129
- * Represent the `ref` of the Menu component.
130
- */
131
- export interface MenuHandle extends Pick<Menu, keyof Menu> {
132
- }
53
+ export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuHandle>>;
@@ -5,4 +5,4 @@
5
5
  * Licensed under commercial license. See LICENSE.md in the package root for more information
6
6
  *-------------------------------------------------------------------------------------------
7
7
  */
8
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react"),r=require("prop-types"),a=require("@progress/kendo-react-common"),s=require("../utils/itemsIdsUtils.js"),f=require("../utils/prepareInputItemsForInternalWork.js"),c=require("../utils/getNewItemIdUponKeyboardNavigation.js"),u=require("../utils/hoverDelay.js"),g=require("./MenuItemInternal.js"),b=require("../utils/DirectionHolder.js"),D=require("../utils/MouseOverHandler.js");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(i,e,t.get?t:{enumerable:!0,get:()=>n[e]})}}return i.default=n,Object.freeze(i)}const h=E(v),p={focusedItemId:s.EMPTY_ID,hoveredItemId:s.EMPTY_ID,tabbableItemId:s.ZERO_LEVEL_ZERO_ITEM_ID},l=class l extends h.Component{constructor(i){super(i),this.menuWrapperEl=null,this.directionHolder=new b.DirectionHolder,this.inputItems=[],this.items=[],this.reset=()=>{this.clearItemHoverAndLeaveRequestsIfApplicable(),this.setState(p)},this.handleClickOutside=e=>{var t;if(this.props.openOnClick&&this.state.hoveredItemId!==s.EMPTY_ID){const o=e.target;this.menuWrapperEl&&!this.menuWrapperEl.contains(o)&&(this.menuItemId&&((t=o.closest)!=null&&t.call(o,`[id^="${this.menuItemId}_"]`))||this.setHoveredItemId(s.EMPTY_ID))}},this.onKeyDown=e=>{if(this.state.focusedItemId!==s.EMPTY_ID){const t=s.getItemById(this.state.focusedItemId,this.items);let o=c.getNewItemIdUponKeyboardNavigation(this.items,t.id,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft());const d=s.getItemById(o,this.items);if(d&&d.separator&&(o=c.getNewItemIdUponKeyboardNavigation(this.items,o,e.keyCode,e.key,this.props.vertical,this.directionHolder.getIsDirectionRightToLeft())),t.id!==o&&(e.preventDefault(),this.setFocusedItemId(o)),(e.keyCode===a.Keys.enter||e.keyCode===a.Keys.space)&&!t.disabled&&(this.mouseOverHandler.handleItemSelectedViaKeyboard(),this.dispatchSelectEventIfWired(e,t.id),!e.isDefaultPrevented()&&t.items.length===0&&t.url&&window.location.assign(t.url)),e.keyCode===a.Keys.esc&&s.isIdZeroLevel(t.id)&&this.props.onClose){const I=this.getInputItem(t.id);this.props.onClose({target:this,item:I,itemId:t.id})}}},this.onItemMouseOver=e=>{const t=this.props.openOnClick&&!s.isIdZeroLevel(e)&&this.state.hoveredItemId!==s.EMPTY_ID;(this.mouseOverHandler.IsMouseOverEnabled||t)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemHoverRequest=window.setTimeout(()=>{this.setHoveredItemId(e),this.itemHoverRequest=null},u.getHoverOpenDelay(this.props)))},this.onItemMouseLeave=e=>{const t=this.props.openOnClick&&!s.isIdZeroLevel(e)&&this.state.hoveredItemId!==s.EMPTY_ID;(this.mouseOverHandler.IsMouseOverEnabled||t)&&this.isItemWithDefaultClose(e)&&(this.clearItemHoverAndLeaveRequestsIfApplicable(),this.itemLeaveRequest=window.setTimeout(()=>{t?this.setHoveredItemId(s.getDirectParentId(e)):this.setHoveredItemId(s.EMPTY_ID),this.itemLeaveRequest=null},u.getHoverCloseDelay(this.props)))},this.onItemFocus=e=>{this.state.hoveredItemId===s.EMPTY_ID?this.setFocusedItemId(e):this.setState(t=>({focusedItemId:e,hoveredItemId:t.hoveredItemId,tabbableItemId:s.getRootParentId(e)}))},this.onItemClick=(e,t)=>{const o=s.getItemById(t,this.items);if(!o.disabled){const d=s.isIdZeroLevel(t),I=!o.items||o.items.length===0;d?(this.setFocusedItemId(t),I?this.setHoveredItemId(s.EMPTY_ID):this.props.openOnClick&&this.state.hoveredItemId!==s.EMPTY_ID&&s.getRootParentId(this.state.hoveredItemId)===t?this.setHoveredItemId(s.EMPTY_ID):this.setHoveredItemId(t)):I&&(this.setFocusedItemId(t),this.setHoveredItemId(s.EMPTY_ID)),this.dispatchSelectEventIfWired(e,t),!e.isDefaultPrevented()&&o.url&&window.location.assign(o.url)}},this.onPopupClose=(e,t)=>{this.props.onClose&&this.props.onClose({target:this,item:this.getInputItem(e),itemId:e,popupCloseEvent:t})},this.onItemBlur=(e,t)=>{if(this.isItemWithDefaultClose(e)&&this.setFocusedItemId(s.EMPTY_ID),t.relatedTarget&&t.relatedTarget.nodeName==="LI"){const o=t.relatedTarget.getAttribute("id");if(o&&o.includes(this.menuItemId))return}if(s.isIdZeroLevel(e)&&this.props.onClose){const o=this.getInputItem(e);this.props.onClose({target:this,item:o,itemId:e})}},this.getInputItem=e=>s.getItemById(e,this.inputItems),this.mouseOverHandler=new D.MouseOverHandler(this.props.openOnClick,this.reset),this.state=Object.assign({},p,{isFirstRender:!0})}get menuItemId(){return this.props.id}get element(){return this.menuWrapperEl}get animate(){return this.props.animate!==void 0?this.props.animate:l.defaultProps.animate}render(){this.prepareItems(),this.state.isFirstRender||this.directionHolder.setIsDirectionRightToLeft(this.checkIsDirectionRightToLeft());const i=this.state.hoveredItemId?this.state.hoveredItemId:this.state.focusedItemId?s.getDirectParentId(this.state.focusedItemId):s.EMPTY_ID;return h.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}},h.createElement(g.MenuItemInternalsList,{className:this.getMenuClassName(),"aria-orientation":this.props.vertical?"vertical":void 0,items:this.items,animate:this.animate,isMenuVertical:this.props.vertical,isDirectionRightToLeft:this.directionHolder.getIsDirectionRightToLeft(),focusedItemId:this.state.focusedItemId,lastItemIdToBeOpened:i,tabbableItemId:this.state.tabbableItemId,itemRender:this.props.itemRender,linkRender:this.props.linkRender,menuGuid:this.menuItemId,onMouseLeave:this.onItemMouseLeave,onMouseOver:this.onItemMouseOver,onFocus:this.onItemFocus,onClick:this.onItemClick,onBlur:this.onItemBlur,onOriginalItemNeeded:this.getInputItem,onPopupClose:this.onPopupClose,role:this.props.role}))}componentDidMount(){this.setState({isFirstRender:!1}),this.props.openOnClick&&document.addEventListener("mousedown",this.handleClickOutside)}componentDidUpdate(i){(!!i.vertical!=!!this.props.vertical||this.directionHolder.hasDirectionChanged())&&this.reset(),this.mouseOverHandler.OpenOnClick=this.props.openOnClick,i.openOnClick!==this.props.openOnClick&&(this.props.openOnClick?document.addEventListener("mousedown",this.handleClickOutside):document.removeEventListener("mousedown",this.handleClickOutside))}componentWillUnmount(){this.clearItemHoverAndLeaveRequestsIfApplicable(),document.removeEventListener("mousedown",this.handleClickOutside)}setFocusedItemId(i){this.setState(e=>{const t=i===s.EMPTY_ID?e.tabbableItemId:s.getRootParentId(i);return{hoveredItemId:i===s.EMPTY_ID||s.isIdEmptyOrZeroLevel(e.hoveredItemId)&&s.isIdEmptyOrZeroLevel(i)?e.hoveredItemId:s.EMPTY_ID,focusedItemId:i,tabbableItemId:t}})}setHoveredItemId(i){this.setState(e=>s.isIdEmptyOrZeroLevel(i)&&s.isIdEmptyOrZeroLevel(e.focusedItemId)?{hoveredItemId:i,focusedItemId:e.focusedItemId,tabbableItemId:e.tabbableItemId}:{hoveredItemId:i,focusedItemId:s.EMPTY_ID,tabbableItemId:s.ZERO_LEVEL_ZERO_ITEM_ID})}getMenuClassName(){return a.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(i){return!this.props.customCloseItemIds||this.props.customCloseItemIds.indexOf(i)===-1}checkIsDirectionRightToLeft(){return!!(this.props.dir!==void 0?this.props.dir==="rtl":this.menuWrapperEl&&getComputedStyle(this.menuWrapperEl).direction==="rtl")}prepareItems(){const{items:i,inputItems:e}=f.prepareInputItemsForInternalWork(this.props.items,this.props.children);this.items=i,this.inputItems=e}dispatchSelectEventIfWired(i,e){a.dispatchEvent(this.props.onSelect,i,this,{item:this.getInputItem(e),itemId:e})}};l.propTypes={vertical:r.bool,items:r.arrayOf(r.object),style:r.object,animate:r.oneOfType([r.bool,r.shape({openDuration:r.number,closeDuration:r.number})]),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,onClose:r.func,role:r.string},l.defaultProps={vertical:!1,animate:!0};let m=l;exports.Menu=m;
8
+ "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;