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

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: 1678801943,
     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'
 };