@progress/kendo-react-layout 5.12.0-dev.202303130940 → 5.12.0-dev.202303131742

package/dist/es/contextmenu/ContextMenu.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Offset } from '@progress/kendo-react-popup';
+import { MenuProps } from '../menu/MenuProps';
+/**
+ * The props of the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export interface ContextMenuProps extends Omit<MenuProps, 'onClose' | 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
+    /**
+     * Controls the Popup visibility of the ContextMenu.
+     */
+    show: boolean;
+    /**
+     * Specifies the absolute position of the ContextMenu. The Popover opens next to that point.
+     */
+    offset: Offset;
+    /**
+     * Triggers when the ContextMenu needs to hide.
+     */
+    onClose: (event: React.SyntheticEvent<HTMLElement>) => void;
+}
+/**
+ * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export declare const ContextMenu: {
+    (props: ContextMenuProps): JSX.Element;
+    displayName: string;
+};

package/dist/es/contextmenu/ContextMenu.js

@@ -0,0 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { classNames } from '@progress/kendo-react-common';
+import { Popup } from '@progress/kendo-react-popup';
+import { Menu } from '../menu/components/Menu';
+/**
+ * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export var ContextMenu = function (props) {
+    var menuRef = React.useRef(null);
+    React.useEffect(function () {
+        if (props.show) {
+            setTimeout(function () {
+                var element = menuRef.current && menuRef.current.element;
+                var menuItem = element && element.querySelector('.k-menu-item');
+                if (menuItem && menuItem !== menuItem.ownerDocument.activeElement) {
+                    menuItem.focus();
+                }
+            });
+        }
+    }, [props.show]);
+    return (React.createElement(Popup, { show: props.show, offset: props.offset, popupClass: 'k-menu-popup', animate: false },
+        React.createElement(Menu, __assign({ vertical: true }, props, { ref: menuRef, className: classNames('k-context-menu', props.className), onClose: props.onClose, role: 'menu' }), props.children)));
+};
+ContextMenu.displayName = 'KendoReactContextMenu';

package/dist/es/main.d.ts

@@ -84,4 +84,5 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/es/main.js

@@ -84,4 +84,5 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/es/menu/MenuProps.d.ts

@@ -53,8 +53,16 @@ export interface MenuProps {
      * Adds a custom className to the Menu top element.
      */
     className?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
     /**
      * Fires when a Menu item is selected.
      */
     onSelect?: (event: MenuSelectEvent) => void;
+    /**
+     * @hidden
+     */
+    onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;
 }

package/dist/es/menu/components/Menu.d.ts

@@ -48,6 +48,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
         linkRender: PropTypes.Requireable<any>;
         customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        role: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
@@ -67,6 +68,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private inputItems;
     private items;
     private mouseOverHandler;
+    get element(): HTMLDivElement | null;
     constructor(props: MenuProps);
     /**
      * @hidden
@@ -98,7 +100,6 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private getInputItem;
     private setFocusedItemId;
     private setHoveredItemId;
-    private getMenuWrapperClassName;
     private getMenuClassName;
     private clearItemHoverAndLeaveRequestsIfApplicable;
     private isItemWithDefaultClose;

package/dist/es/menu/components/Menu.js

@@ -56,6 +56,7 @@ var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
     function Menu(props) {
         var _this = _super.call(this, props) || this;
+        _this.menuWrapperEl = null;
         _this.guid = guid();
         _this.directionHolder = new DirectionHolder();
         _this.inputItems = [];
@@ -85,6 +86,9 @@ var Menu = /** @class */ (function (_super) {
                     }
                 }
             }
+            if (event.keyCode === Keys.esc && _this.props.onClose) {
+                _this.props.onClose.call(undefined, event);
+            }
         };
         _this.onItemMouseOver = function (itemId) {
             if (_this.mouseOverHandler.IsMouseOverEnabled) {
@@ -126,10 +130,19 @@ var Menu = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.onItemBlur = function (itemId) {
+        _this.onItemBlur = function (itemId, event) {
             if (_this.isItemWithDefaultClose(itemId)) {
                 _this.setFocusedItemId(EMPTY_ID);
             }
+            if (event.relatedTarget && event.relatedTarget.nodeName === 'LI') {
+                var activeElementId = event.relatedTarget.getAttribute('id');
+                if (activeElementId && activeElementId.includes(_this.guid)) {
+                    return;
+                }
+            }
+            if (_this.props.onClose) {
+                _this.props.onClose.call(undefined, event);
+            }
         };
         _this.getInputItem = function (itemId) {
             return getItemById(itemId, _this.inputItems);
@@ -139,6 +152,13 @@ var Menu = /** @class */ (function (_super) {
         _this.state = Object.assign({}, initialItemsIds, { isFirstRender: true });
         return _this;
     }
+    Object.defineProperty(Menu.prototype, "element", {
+        get: function () {
+            return this.menuWrapperEl;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -151,8 +171,8 @@ var Menu = /** @class */ (function (_super) {
         var lastItemIdToBeOpened = this.state.hoveredItemId ?
             this.state.hoveredItemId :
             this.state.focusedItemId ? getDirectParentId(this.state.focusedItemId) : EMPTY_ID;
-        return (React.createElement("div", { onKeyDown: this.onKeyDown, style: this.props.style, className: this.getMenuWrapperClassName(), ref: function (el) { return _this.menuWrapperEl = el; } },
-            React.createElement(MenuItemInternalsList, { className: this.getMenuClassName(), "aria-orientation": this.props.vertical ? 'vertical' : undefined, items: this.items, isMenuVertical: this.props.vertical, isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(), focusedItemId: this.state.focusedItemId, lastItemIdToBeOpened: lastItemIdToBeOpened, tabbableItemId: this.state.tabbableItemId, itemRender: this.props.itemRender, linkRender: this.props.linkRender, menuGuid: this.guid, onMouseLeave: this.onItemMouseLeave, onMouseOver: this.onItemMouseOver, onMouseDown: this.onItemMouseDown, onFocus: this.onItemFocus, onClick: this.onItemClick, onBlur: this.onItemBlur, onOriginalItemNeeded: this.getInputItem })));
+        return (React.createElement("div", { onKeyDown: this.onKeyDown, style: this.props.style, className: this.directionHolder.getIsDirectionRightToLeft() ? 'k-rtl' : undefined, ref: function (el) { return _this.menuWrapperEl = el; } },
+            React.createElement(MenuItemInternalsList, { className: this.getMenuClassName(), "aria-orientation": this.props.vertical ? 'vertical' : undefined, items: this.items, isMenuVertical: this.props.vertical, isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(), focusedItemId: this.state.focusedItemId, lastItemIdToBeOpened: lastItemIdToBeOpened, tabbableItemId: this.state.tabbableItemId, itemRender: this.props.itemRender, linkRender: this.props.linkRender, menuGuid: this.guid, onMouseLeave: this.onItemMouseLeave, onMouseOver: this.onItemMouseOver, onMouseDown: this.onItemMouseDown, onFocus: this.onItemFocus, onClick: this.onItemClick, onBlur: this.onItemBlur, onOriginalItemNeeded: this.getInputItem, role: this.props.role })));
     };
     /**
      * @hidden
@@ -203,13 +223,8 @@ var Menu = /** @class */ (function (_super) {
             }
         });
     };
-    Menu.prototype.getMenuWrapperClassName = function () {
-        return classNames({
-            'k-rtl': this.directionHolder.getIsDirectionRightToLeft()
-        }, this.props.className);
-    };
     Menu.prototype.getMenuClassName = function () {
-        return classNames('k-widget', 'k-reset', 'k-header', 'k-menu', { 'k-menu-horizontal': !this.props.vertical }, { 'k-menu-vertical': this.props.vertical });
+        return classNames('k-reset', 'k-header', 'k-menu', { 'k-menu-horizontal': !this.props.vertical }, { 'k-menu-vertical': this.props.vertical }, this.props.className);
     };
     Menu.prototype.clearItemHoverAndLeaveRequestsIfApplicable = function () {
         if (this.itemHoverRequest) {
@@ -225,8 +240,8 @@ var Menu = /** @class */ (function (_super) {
         return !this.props.customCloseItemIds || this.props.customCloseItemIds.indexOf(itemId) === -1;
     };
     Menu.prototype.checkIsDirectionRightToLeft = function () {
-        return this.props.dir !== undefined ? this.props.dir === 'rtl' :
-            this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl';
+        return Boolean(this.props.dir !== undefined ? this.props.dir === 'rtl' :
+            this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl');
     };
     Menu.prototype.prepareItems = function () {
         var _a = prepareInputItemsForInternalWork(this.props.items, this.props.children), items = _a.items, inputItems = _a.inputItems;
@@ -250,7 +265,8 @@ var Menu = /** @class */ (function (_super) {
         itemRender: PropTypes.any,
         linkRender: PropTypes.any,
         customCloseItemIds: PropTypes.arrayOf(PropTypes.string),
-        onSelect: PropTypes.func
+        onSelect: PropTypes.func,
+        role: PropTypes.string
     };
     /**
      * @hidden

package/dist/es/menu/components/MenuItemInternal.js

@@ -65,16 +65,14 @@ var MenuItemInternal = /** @class */ (function (_super) {
                 this.itemElement.focus();
             }
         }
-        else if (document.activeElement === this.itemElement) {
-            this.itemElement.blur();
-        }
     };
     MenuItemInternal.prototype.render = function () {
         var _this = this;
         var item = this.props.item;
         var itemId = item.id;
+        var menuItemId = getDOMElementId(this.props.menuGuid, itemId);
         return (React.createElement(React.Fragment, null,
-            React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? getDOMElementId(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
+            React.createElement("li", { id: getDOMElementId(this.props.menuGuid, itemId), className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function (e) { return _this.props.onBlur(itemId, e); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? menuItemId : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
             this.renderPopupIfOpened()));
     };
     MenuItemInternal.prototype.renderContent = function () {

package/dist/es/menu/components/MenuItemInternalsList.d.ts

@@ -8,6 +8,7 @@ export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
     items: MenuItemInternalModel[];
     parentItemId?: string;
     className: string;
+    role?: string;
     'aria-orientation'?: 'vertical';
 }
 /**

package/dist/es/menu/components/MenuItemInternalsList.js

@@ -35,7 +35,7 @@ var MenuItemInternalsList = /** @class */ (function (_super) {
     }
     MenuItemInternalsList.prototype.render = function () {
         var parentItemId = this.props.parentItemId;
-        return (React.createElement("ul", { className: this.props.className, role: parentItemId !== undefined ? 'menu' : 'menubar', id: parentItemId !== undefined ? getDOMElementId(this.props.menuGuid, parentItemId) : undefined, onMouseOver: parentItemId !== undefined ? this.onMouseOver : undefined, onMouseLeave: parentItemId !== undefined ? this.onMouseLeave : undefined, "aria-orientation": this.props['aria-orientation'] }, this.renderChildItems()));
+        return (React.createElement("ul", { className: this.props.className, role: this.props.role ? this.props.role : (parentItemId !== undefined ? 'menu' : 'menubar'), id: parentItemId !== undefined ? getDOMElementId(this.props.menuGuid, parentItemId) : undefined, onMouseOver: parentItemId !== undefined ? this.onMouseOver : undefined, onMouseLeave: parentItemId !== undefined ? this.onMouseLeave : undefined, "aria-orientation": this.props['aria-orientation'] }, this.renderChildItems()));
     };
     MenuItemInternalsList.prototype.renderChildItems = function () {
         var _this = this;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1678699363,
+    publishDate: 1678728158,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/contextmenu/ContextMenu.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Offset } from '@progress/kendo-react-popup';
+import { MenuProps } from '../menu/MenuProps';
+/**
+ * The props of the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export interface ContextMenuProps extends Omit<MenuProps, 'onClose' | 'openOnClick' | 'hoverOpenDelay' | 'hoverCloseDelay'> {
+    /**
+     * Controls the Popup visibility of the ContextMenu.
+     */
+    show: boolean;
+    /**
+     * Specifies the absolute position of the ContextMenu. The Popover opens next to that point.
+     */
+    offset: Offset;
+    /**
+     * Triggers when the ContextMenu needs to hide.
+     */
+    onClose: (event: React.SyntheticEvent<HTMLElement>) => void;
+}
+/**
+ * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+export declare const ContextMenu: {
+    (props: ContextMenuProps): JSX.Element;
+    displayName: string;
+};

package/dist/npm/contextmenu/ContextMenu.js

@@ -0,0 +1,39 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_popup_1 = require("@progress/kendo-react-popup");
+var Menu_1 = require("../menu/components/Menu");
+/**
+ * Represents the [KendoReact ContextMenu component]({% slug overview_contextmenu %}).
+ */
+var ContextMenu = function (props) {
+    var menuRef = React.useRef(null);
+    React.useEffect(function () {
+        if (props.show) {
+            setTimeout(function () {
+                var element = menuRef.current && menuRef.current.element;
+                var menuItem = element && element.querySelector('.k-menu-item');
+                if (menuItem && menuItem !== menuItem.ownerDocument.activeElement) {
+                    menuItem.focus();
+                }
+            });
+        }
+    }, [props.show]);
+    return (React.createElement(kendo_react_popup_1.Popup, { show: props.show, offset: props.offset, popupClass: 'k-menu-popup', animate: false },
+        React.createElement(Menu_1.Menu, __assign({ vertical: true }, props, { ref: menuRef, className: (0, kendo_react_common_1.classNames)('k-context-menu', props.className), onClose: props.onClose, role: 'menu' }), props.children)));
+};
+exports.ContextMenu = ContextMenu;
+exports.ContextMenu.displayName = 'KendoReactContextMenu';

package/dist/npm/main.d.ts

@@ -84,4 +84,5 @@ export * from './actionsheet/interfaces/ActionSheetItemProps';
 export * from './actionsheet/ActionSheetHeader';
 export * from './actionsheet/ActionSheetContent';
 export * from './actionsheet/ActionSheetFooter';
+export * from './contextmenu/ContextMenu';
 export * from './expansionpanel';

package/dist/npm/main.js

@@ -100,4 +100,5 @@ __exportStar(require("./actionsheet/interfaces/ActionSheetItemProps"), exports);
 __exportStar(require("./actionsheet/ActionSheetHeader"), exports);
 __exportStar(require("./actionsheet/ActionSheetContent"), exports);
 __exportStar(require("./actionsheet/ActionSheetFooter"), exports);
+__exportStar(require("./contextmenu/ContextMenu"), exports);
 __exportStar(require("./expansionpanel"), exports);

package/dist/npm/menu/MenuProps.d.ts

@@ -53,8 +53,16 @@ export interface MenuProps {
      * Adds a custom className to the Menu top element.
      */
     className?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
     /**
      * Fires when a Menu item is selected.
      */
     onSelect?: (event: MenuSelectEvent) => void;
+    /**
+     * @hidden
+     */
+    onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;
 }

package/dist/npm/menu/components/Menu.d.ts

@@ -48,6 +48,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
         linkRender: PropTypes.Requireable<any>;
         customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        role: PropTypes.Requireable<string>;
     };
     /**
      * @hidden
@@ -67,6 +68,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private inputItems;
     private items;
     private mouseOverHandler;
+    get element(): HTMLDivElement | null;
     constructor(props: MenuProps);
     /**
      * @hidden
@@ -98,7 +100,6 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private getInputItem;
     private setFocusedItemId;
     private setHoveredItemId;
-    private getMenuWrapperClassName;
     private getMenuClassName;
     private clearItemHoverAndLeaveRequestsIfApplicable;
     private isItemWithDefaultClose;

package/dist/npm/menu/components/Menu.js

@@ -59,6 +59,7 @@ var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
     function Menu(props) {
         var _this = _super.call(this, props) || this;
+        _this.menuWrapperEl = null;
         _this.guid = (0, kendo_react_common_1.guid)();
         _this.directionHolder = new DirectionHolder_1.DirectionHolder();
         _this.inputItems = [];
@@ -88,6 +89,9 @@ var Menu = /** @class */ (function (_super) {
                     }
                 }
             }
+            if (event.keyCode === kendo_react_common_1.Keys.esc && _this.props.onClose) {
+                _this.props.onClose.call(undefined, event);
+            }
         };
         _this.onItemMouseOver = function (itemId) {
             if (_this.mouseOverHandler.IsMouseOverEnabled) {
@@ -129,10 +133,19 @@ var Menu = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.onItemBlur = function (itemId) {
+        _this.onItemBlur = function (itemId, event) {
             if (_this.isItemWithDefaultClose(itemId)) {
                 _this.setFocusedItemId(itemsIdsUtils_1.EMPTY_ID);
             }
+            if (event.relatedTarget && event.relatedTarget.nodeName === 'LI') {
+                var activeElementId = event.relatedTarget.getAttribute('id');
+                if (activeElementId && activeElementId.includes(_this.guid)) {
+                    return;
+                }
+            }
+            if (_this.props.onClose) {
+                _this.props.onClose.call(undefined, event);
+            }
         };
         _this.getInputItem = function (itemId) {
             return (0, itemsIdsUtils_1.getItemById)(itemId, _this.inputItems);
@@ -142,6 +155,13 @@ var Menu = /** @class */ (function (_super) {
         _this.state = Object.assign({}, initialItemsIds, { isFirstRender: true });
         return _this;
     }
+    Object.defineProperty(Menu.prototype, "element", {
+        get: function () {
+            return this.menuWrapperEl;
+        },
+        enumerable: false,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -154,8 +174,8 @@ var Menu = /** @class */ (function (_super) {
         var lastItemIdToBeOpened = this.state.hoveredItemId ?
             this.state.hoveredItemId :
             this.state.focusedItemId ? (0, itemsIdsUtils_1.getDirectParentId)(this.state.focusedItemId) : itemsIdsUtils_1.EMPTY_ID;
-        return (React.createElement("div", { onKeyDown: this.onKeyDown, style: this.props.style, className: this.getMenuWrapperClassName(), ref: function (el) { return _this.menuWrapperEl = el; } },
-            React.createElement(MenuItemInternalsList_1.MenuItemInternalsList, { className: this.getMenuClassName(), "aria-orientation": this.props.vertical ? 'vertical' : undefined, items: this.items, isMenuVertical: this.props.vertical, isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(), focusedItemId: this.state.focusedItemId, lastItemIdToBeOpened: lastItemIdToBeOpened, tabbableItemId: this.state.tabbableItemId, itemRender: this.props.itemRender, linkRender: this.props.linkRender, menuGuid: this.guid, onMouseLeave: this.onItemMouseLeave, onMouseOver: this.onItemMouseOver, onMouseDown: this.onItemMouseDown, onFocus: this.onItemFocus, onClick: this.onItemClick, onBlur: this.onItemBlur, onOriginalItemNeeded: this.getInputItem })));
+        return (React.createElement("div", { onKeyDown: this.onKeyDown, style: this.props.style, className: this.directionHolder.getIsDirectionRightToLeft() ? 'k-rtl' : undefined, ref: function (el) { return _this.menuWrapperEl = el; } },
+            React.createElement(MenuItemInternalsList_1.MenuItemInternalsList, { className: this.getMenuClassName(), "aria-orientation": this.props.vertical ? 'vertical' : undefined, items: this.items, isMenuVertical: this.props.vertical, isDirectionRightToLeft: this.directionHolder.getIsDirectionRightToLeft(), focusedItemId: this.state.focusedItemId, lastItemIdToBeOpened: lastItemIdToBeOpened, tabbableItemId: this.state.tabbableItemId, itemRender: this.props.itemRender, linkRender: this.props.linkRender, menuGuid: this.guid, onMouseLeave: this.onItemMouseLeave, onMouseOver: this.onItemMouseOver, onMouseDown: this.onItemMouseDown, onFocus: this.onItemFocus, onClick: this.onItemClick, onBlur: this.onItemBlur, onOriginalItemNeeded: this.getInputItem, role: this.props.role })));
     };
     /**
      * @hidden
@@ -206,13 +226,8 @@ var Menu = /** @class */ (function (_super) {
             }
         });
     };
-    Menu.prototype.getMenuWrapperClassName = function () {
-        return (0, kendo_react_common_1.classNames)({
-            'k-rtl': this.directionHolder.getIsDirectionRightToLeft()
-        }, this.props.className);
-    };
     Menu.prototype.getMenuClassName = function () {
-        return (0, kendo_react_common_1.classNames)('k-widget', 'k-reset', 'k-header', 'k-menu', { 'k-menu-horizontal': !this.props.vertical }, { 'k-menu-vertical': this.props.vertical });
+        return (0, kendo_react_common_1.classNames)('k-reset', 'k-header', 'k-menu', { 'k-menu-horizontal': !this.props.vertical }, { 'k-menu-vertical': this.props.vertical }, this.props.className);
     };
     Menu.prototype.clearItemHoverAndLeaveRequestsIfApplicable = function () {
         if (this.itemHoverRequest) {
@@ -228,8 +243,8 @@ var Menu = /** @class */ (function (_super) {
         return !this.props.customCloseItemIds || this.props.customCloseItemIds.indexOf(itemId) === -1;
     };
     Menu.prototype.checkIsDirectionRightToLeft = function () {
-        return this.props.dir !== undefined ? this.props.dir === 'rtl' :
-            this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl';
+        return Boolean(this.props.dir !== undefined ? this.props.dir === 'rtl' :
+            this.menuWrapperEl && getComputedStyle(this.menuWrapperEl).direction === 'rtl');
     };
     Menu.prototype.prepareItems = function () {
         var _a = (0, prepareInputItemsForInternalWork_1.prepareInputItemsForInternalWork)(this.props.items, this.props.children), items = _a.items, inputItems = _a.inputItems;
@@ -253,7 +268,8 @@ var Menu = /** @class */ (function (_super) {
         itemRender: PropTypes.any,
         linkRender: PropTypes.any,
         customCloseItemIds: PropTypes.arrayOf(PropTypes.string),
-        onSelect: PropTypes.func
+        onSelect: PropTypes.func,
+        role: PropTypes.string
     };
     /**
      * @hidden

package/dist/npm/menu/components/MenuItemInternal.js

@@ -68,16 +68,14 @@ var MenuItemInternal = /** @class */ (function (_super) {
                 this.itemElement.focus();
             }
         }
-        else if (document.activeElement === this.itemElement) {
-            this.itemElement.blur();
-        }
     };
     MenuItemInternal.prototype.render = function () {
         var _this = this;
         var item = this.props.item;
         var itemId = item.id;
+        var menuItemId = (0, misc_1.getDOMElementId)(this.props.menuGuid, itemId);
         return (React.createElement(React.Fragment, null,
-            React.createElement("li", { className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function () { return _this.props.onBlur(itemId); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? (0, misc_1.getDOMElementId)(this.props.menuGuid, itemId) : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
+            React.createElement("li", { id: (0, misc_1.getDOMElementId)(this.props.menuGuid, itemId), className: this.getMenuItemClassName(item), style: item.cssStyle, tabIndex: itemId === this.props.tabbableItemId ? 0 : -1, onMouseOver: this.onMouseOver, onMouseLeave: this.onMouseLeave, onMouseDown: function (event) { return _this.props.onMouseDown(event); }, onBlur: function (e) { return _this.props.onBlur(itemId, e); }, onFocus: function () { return _this.props.onFocus(itemId); }, onClick: function (event) { return _this.props.onClick(event, itemId); }, role: "menuitem", "aria-disabled": item.disabled ? true : undefined, "aria-haspopup": item.items.length > 0 ? true : undefined, "aria-expanded": item.items.length > 0 ? this.Opened : undefined, "aria-label": item.text, "aria-owns": this.Opened ? menuItemId : undefined, ref: function (el) { return _this.itemElement = el; }, key: "0" }, this.contentRender ? this.renderContent() : this.renderMenuItemLink()),
             this.renderPopupIfOpened()));
     };
     MenuItemInternal.prototype.renderContent = function () {

package/dist/npm/menu/components/MenuItemInternalsList.d.ts

@@ -8,6 +8,7 @@ export interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
     items: MenuItemInternalModel[];
     parentItemId?: string;
     className: string;
+    role?: string;
     'aria-orientation'?: 'vertical';
 }
 /**

package/dist/npm/menu/components/MenuItemInternalsList.js

@@ -38,7 +38,7 @@ var MenuItemInternalsList = /** @class */ (function (_super) {
     }
     MenuItemInternalsList.prototype.render = function () {
         var parentItemId = this.props.parentItemId;
-        return (React.createElement("ul", { className: this.props.className, role: parentItemId !== undefined ? 'menu' : 'menubar', id: parentItemId !== undefined ? (0, misc_1.getDOMElementId)(this.props.menuGuid, parentItemId) : undefined, onMouseOver: parentItemId !== undefined ? this.onMouseOver : undefined, onMouseLeave: parentItemId !== undefined ? this.onMouseLeave : undefined, "aria-orientation": this.props['aria-orientation'] }, this.renderChildItems()));
+        return (React.createElement("ul", { className: this.props.className, role: this.props.role ? this.props.role : (parentItemId !== undefined ? 'menu' : 'menubar'), id: parentItemId !== undefined ? (0, misc_1.getDOMElementId)(this.props.menuGuid, parentItemId) : undefined, onMouseOver: parentItemId !== undefined ? this.onMouseOver : undefined, onMouseLeave: parentItemId !== undefined ? this.onMouseLeave : undefined, "aria-orientation": this.props['aria-orientation'] }, this.renderChildItems()));
     };
     MenuItemInternalsList.prototype.renderChildItems = function () {
         var _this = this;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1678699363,
+    publishDate: 1678728158,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };