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

package/dist/es/actionsheet/ActionSheet.d.ts

@@ -66,6 +66,14 @@ export interface ActionSheetProps {
      * Controls the popup animation. By default, the open and close animations are disabled.
      */
     animation?: boolean;
+    /**
+     * @hidden
+     */
+    animationStyles?: React.CSSProperties;
+    /**
+     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
+     */
+    animationDuration?: number;
     /**
      * The CSS classes that will be rendered on the inner ActionSheet element.
      */

package/dist/es/actionsheet/ActionSheet.js

@@ -187,7 +187,7 @@ var ActionSheet = /** @class */ (function (_super) {
                     ], [
                         '.k-actionsheet-footer',
                         '.k-actionsheet-content',
-                        '.k-actionsheet-header'
+                        '.k-actionsheet-titlebar'
                     ].map(function (selector) {
                         return FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
                     }).flat(), true),
@@ -207,33 +207,34 @@ var ActionSheet = /** @class */ (function (_super) {
     /** @hidden */
     ActionSheet.prototype.render = function () {
         var _this = this;
-        var _a, _b;
-        var topGroupItems = (_a = this.props.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !item.group || item.group === 'top'; });
-        var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
+        var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
+        var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
+        var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
         var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
         var children = this.children(this.props.children);
+        var animationDuration = this.props.animationDuration || this.animationDuration;
         var actionSheetPanel = this.state.slide && React.createElement("div", { className: classNames('k-actionsheet', this.props.className, {
                 'k-actionsheet-bottom': !this.props.className
             }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
-            (children[headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
+            (children[headerDisplayName] && !title && !subTitle) && children[headerDisplayName],
+            (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
                 React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[headerDisplayName] ||
-                        React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "k-text-center" }, this.props.title),
-                            this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
+                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
+                        title && React.createElement("div", null, title),
+                        subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
             children[contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
                 React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
                 })),
                 shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
                 React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                    return (React.createElement(ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
                 }))),
             children[footerDisplayName]);
-        return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
+        return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "k-actionsheet-container" },
                 React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
-                this.props.animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
+                animation ? React.createElement(Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
                     : actionSheetPanel)))
             : null));
     };

package/dist/es/actionsheet/ActionSheetHeader.js

@@ -9,7 +9,7 @@ export var headerDisplayName = 'ActionSheetHeader';
  * The KendoReact ActionSheetHeader component.
  */
 export var ActionSheetHeader = function (props) {
-    return (React.createElement("div", { className: classNames('k-actionsheet-header', props.className) }, props.children));
+    return (React.createElement("div", { className: classNames('k-actionsheet-titlebar', props.className) }, props.children));
 };
 ActionSheetHeader.propTypes = {
     className: PropTypes.string

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

package/dist/npm/actionsheet/ActionSheet.d.ts

@@ -66,6 +66,14 @@ export interface ActionSheetProps {
      * Controls the popup animation. By default, the open and close animations are disabled.
      */
     animation?: boolean;
+    /**
+     * @hidden
+     */
+    animationStyles?: React.CSSProperties;
+    /**
+     * Specifies the duration of the transition for the entering and closing Animation. Defaults to `300ms`.
+     */
+    animationDuration?: number;
     /**
      * The CSS classes that will be rendered on the inner ActionSheet element.
      */

package/dist/npm/actionsheet/ActionSheet.js

@@ -190,7 +190,7 @@ var ActionSheet = /** @class */ (function (_super) {
                     ], [
                         '.k-actionsheet-footer',
                         '.k-actionsheet-content',
-                        '.k-actionsheet-header'
+                        '.k-actionsheet-titlebar'
                     ].map(function (selector) {
                         return kendo_react_common_1.FOCUSABLE_ELEMENTS.concat(_this.props.navigatableElements).map(function (focusableSelector) { return "".concat(selector, " ").concat(focusableSelector); });
                     }).flat(), true),
@@ -210,33 +210,34 @@ var ActionSheet = /** @class */ (function (_super) {
     /** @hidden */
     ActionSheet.prototype.render = function () {
         var _this = this;
-        var _a, _b;
-        var topGroupItems = (_a = this.props.items) === null || _a === void 0 ? void 0 : _a.filter(function (item) { return !item.group || item.group === 'top'; });
-        var bottomGroupItems = (_b = this.props.items) === null || _b === void 0 ? void 0 : _b.filter(function (item) { return item.group === 'bottom'; });
+        var _a = this.props, title = _a.title, subTitle = _a.subTitle, animationStyles = _a.animationStyles, animation = _a.animation, expand = _a.expand, tabIndex = _a.tabIndex, items = _a.items;
+        var topGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return !item.group || item.group === 'top'; });
+        var bottomGroupItems = items === null || items === void 0 ? void 0 : items.filter(function (item) { return item.group === 'bottom'; });
         var shouldRenderSeparator = (topGroupItems && topGroupItems.length > 0) && (bottomGroupItems && bottomGroupItems.length > 0);
         var children = this.children(this.props.children);
+        var animationDuration = this.props.animationDuration || this.animationDuration;
         var actionSheetPanel = this.state.slide && React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet', this.props.className, {
                 'k-actionsheet-bottom': !this.props.className
             }), role: "dialog", "aria-modal": "true", "aria-hidden": false, "aria-labelledby": this.ariaLabeledBy, ref: this.actionSheetRef, onKeyDown: this.handleKeyDown },
-            (children[ActionSheetHeader_1.headerDisplayName] || this.props.title || this.props.subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar" },
+            (children[ActionSheetHeader_1.headerDisplayName] && !title && !subTitle) && children[ActionSheetHeader_1.headerDisplayName],
+            (title || subTitle) && (React.createElement("div", { className: "k-actionsheet-titlebar k-text-center" },
                 React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
-                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy }, children[ActionSheetHeader_1.headerDisplayName] ||
-                        React.createElement(React.Fragment, null,
-                            React.createElement("div", { className: "k-text-center" }, this.props.title),
-                            this.props.subTitle && React.createElement("div", { className: "k-actionsheet-subtitle k-text-center" }, this.props.subTitle)))))),
+                    React.createElement("div", { className: this.actionSheetTitleClass, id: this.ariaLabeledBy },
+                        title && React.createElement("div", null, title),
+                        subTitle && React.createElement("div", { className: "k-actionsheet-subtitle" }, subTitle))))),
             children[ActionSheetContent_1.contentDisplayName] || React.createElement("div", { className: "k-actionsheet-content" },
                 React.createElement("div", { className: "k-list-ul", role: "group" }, topGroupItems && topGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx, key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
                 })),
                 shouldRenderSeparator && React.createElement("hr", { className: "k-hr" }),
                 React.createElement("div", { className: "k-list-ul", role: "group" }, bottomGroupItems && bottomGroupItems.map(function (item, idx) {
-                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: _this.props.tabIndex || 0, onClick: _this.handleItemClick })));
+                    return (React.createElement(ActionSheetItem_1.ActionSheetItem, __assign({}, item, { id: idx + ((topGroupItems === null || topGroupItems === void 0 ? void 0 : topGroupItems.length) || 0), key: idx, item: item, tabIndex: tabIndex || 0, onClick: _this.handleItemClick })));
                 }))),
             children[ActionSheetFooter_1.footerDisplayName]);
-        return (React.createElement(React.Fragment, null, this.props.expand || this.state.show ? (React.createElement(React.Fragment, null,
+        return (React.createElement(React.Fragment, null, expand || this.state.show ? (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "k-actionsheet-container" },
                 React.createElement("div", { className: "k-overlay", onClick: this.handleOverlayClick }),
-                this.props.animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: this.animationDuration, transitionExitDuration: this.animationDuration, animationEnteringStyle: this.bottomPosition, animationEnteredStyle: this.bottomPosition, animationExitingStyle: this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
+                animation ? React.createElement(kendo_react_animation_1.Animation, { transitionName: this.state.slide ? 'slide-up' : 'slide-down', onExited: this.hideActionSheet, transitionEnterDuration: animationDuration, transitionExitDuration: animationDuration, animationEnteringStyle: animationStyles || this.bottomPosition, animationEnteredStyle: animationStyles || this.bottomPosition, animationExitingStyle: animationStyles || this.bottomPosition, exit: true, enter: true, appear: false }, actionSheetPanel)
                     : actionSheetPanel)))
             : null));
     };

package/dist/npm/actionsheet/ActionSheetHeader.js

@@ -12,7 +12,7 @@ exports.headerDisplayName = 'ActionSheetHeader';
  * The KendoReact ActionSheetHeader component.
  */
 var ActionSheetHeader = function (props) {
-    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-header', props.className) }, props.children));
+    return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-actionsheet-titlebar', props.className) }, props.children));
 };
 exports.ActionSheetHeader = ActionSheetHeader;
 exports.ActionSheetHeader.propTypes = {

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;