@progress/kendo-react-layout 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/es/appbar/AppBar.d.ts

@@ -47,4 +47,4 @@ export interface AppBarHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<AppBarHandle>>;
+export declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<AppBarHandle | null>>;

package/dist/es/appbar/AppBarSection.d.ts

@@ -46,4 +46,4 @@ export interface AppBarSectionHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const AppBarSection: React.ForwardRefExoticComponent<AppBarSectionProps & React.RefAttributes<AppBarSectionHandle>>;
+export declare const AppBarSection: React.ForwardRefExoticComponent<AppBarSectionProps & React.RefAttributes<AppBarSectionHandle | null>>;

package/dist/es/appbar/AppBarSpacer.d.ts

@@ -47,4 +47,4 @@ export interface AppBarSpacerHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const AppBarSpacer: React.ForwardRefExoticComponent<AppBarSpacerProps & React.RefAttributes<AppBarSpacerHandle>>;
+export declare const AppBarSpacer: React.ForwardRefExoticComponent<AppBarSpacerProps & React.RefAttributes<AppBarSpacerHandle | null>>;

package/dist/es/appbar/interfaces/AppBarSpacerProps.d.ts

@@ -12,4 +12,8 @@ export interface AppBarSpacerProps {
      * Sets additional CSS styles to the AppBarSpacer.
      */
     style?: React.CSSProperties;
+    /**
+     * Determines the children nodes.
+     */
+    children?: React.ReactNode;
 }

package/dist/es/bottomnavigation/BottomNavigation.d.ts

@@ -35,4 +35,4 @@ export interface BottomNavigationHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const BottomNavigation: React.ForwardRefExoticComponent<BottomNavigationProps & React.RefAttributes<BottomNavigationHandle>>;
+export declare const BottomNavigation: React.ForwardRefExoticComponent<BottomNavigationProps & React.RefAttributes<BottomNavigationHandle | null>>;

package/dist/es/bottomnavigation/BottomNavigation.js

@@ -84,7 +84,7 @@ export var BottomNavigation = React.forwardRef(function (props, ref) {
         dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
     }, [dispatchSelectEvent, onKeyDown]);
     return (React.createElement("nav", { ref: elementRef, className: navClasses, style: style, id: id || navId, dir: dir }, items && (items.map(function (element, index) {
-        return (React.createElement(BottomNavigationItem, __assign({}, element, { key: index, index: index, id: (id || navId) + "-" + index, disabled: disabled || element.disabled, selected: element.selected, dataItem: element, item: item, render: itemRender, onSelect: handleSelect, onKeyDown: handleKeyDown })));
+        return (React.createElement(BottomNavigationItem, __assign({}, element, { key: index, index: index, id: "".concat(id || navId, "-").concat(index), disabled: disabled || element.disabled, selected: element.selected, dataItem: element, item: item, render: itemRender, onSelect: handleSelect, onKeyDown: handleKeyDown })));
     }))));
 });
 var defaultProps = {

package/dist/es/bottomnavigation/BottomNavigationItem.d.ts

@@ -9,4 +9,4 @@ export interface BottomNavigationItemHandle {
 /**
  * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
  */
-export declare const BottomNavigationItem: React.ForwardRefExoticComponent<Pick<BottomNavigationItemProps, string | number> & React.RefAttributes<BottomNavigationItemHandle>>;
+export declare const BottomNavigationItem: React.ForwardRefExoticComponent<Pick<BottomNavigationItemProps, keyof BottomNavigationItemProps> & React.RefAttributes<BottomNavigationItemHandle | null>>;

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -31,7 +31,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
     var ItemComp = item;
     var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-selected": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
         (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: "k-bottom-nav-item-icon k-icon k-i-" + icon }),
+            icon && React.createElement("span", { className: "k-bottom-nav-item-icon k-icon k-i-".concat(icon) }),
             text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
     return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
 });

package/dist/es/breadcrumb/Breadcrumb.d.ts

@@ -101,6 +101,10 @@ export interface DataModel {
      * Represents the `iconClass` used inside the BreadcrumbLink component.
      */
     iconClass?: string;
+    /**
+     * @hidden
+     */
+    disabled?: boolean;
 }
 /**
  * Represents the target (element, props, and focus()) of the `BreadcrumbClickEvent`.
@@ -140,4 +144,4 @@ export interface BreadcrumbLinkKeyDownEvent extends BaseEvent<BreadcrumbLinkHand
 /**
  * Represents the Breadcrumb component.
  */
-export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<BreadcrumbHandle>>;
+export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<BreadcrumbHandle | null>>;

package/dist/es/breadcrumb/Breadcrumb.js

@@ -52,15 +52,20 @@ export var Breadcrumb = React.forwardRef(function (props, ref) {
             dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
         }
     };
+    var valueField = (props.valueField || defaultProps.valueField);
+    var iconField = (props.iconField || defaultProps.iconField);
+    var iconClassField = (props.iconClassField || defaultProps.iconClassField);
+    var textField = (props.textField || defaultProps.textField);
     return (React.createElement("nav", { "aria-label": props.ariaLabel, id: props.id, style: props.style, ref: breadcrumbRef, dir: dir, className: classNames('k-breadcrumb', {
             'k-rtl': dir === 'rtl',
             'k-disabled': disabled
         }, props.className) },
         React.createElement(OrderedListComponent, null,
-            React.createElement(React.Fragment, null, Object.keys(props.data).map(function (key) {
-                return (React.createElement(ListItemComponent, { key: props.data[key][props.valueField || defaultProps.valueField] },
-                    key !== '0' && React.createElement(DelimiterComponent, null),
-                    React.createElement(LinkComponent, __assign({ isLast: props.data.length - 1 === Number(key), id: props.data[key][props.valueField || defaultProps.valueField], icon: props.data[key][props.iconField || defaultProps.iconField], iconClass: props.data[key][props.iconClassField || defaultProps.iconClassField], text: props.data[key][props.textField || defaultProps.textField], disabled: props.data[key].disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
+            React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
+                var key = item[valueField];
+                return (React.createElement(ListItemComponent, { key: key },
+                    index !== 0 && React.createElement(DelimiterComponent, null),
+                    React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, id: String(key), icon: item[iconField], iconClass: String(item[iconClassField]), text: String(item[textField]), disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
             })))));
 });
 var propTypes = {

package/dist/es/breadcrumb/BreadcrumbDelimiter.d.ts

@@ -36,4 +36,4 @@ export interface BreadcrumbDelimiterHandle {
 /**
  * Represents the BreadcrumbDelimiter component.
  */
-export declare const BreadcrumbDelimiter: React.ForwardRefExoticComponent<BreadcrumbDelimiterProps & React.RefAttributes<BreadcrumbDelimiterHandle>>;
+export declare const BreadcrumbDelimiter: React.ForwardRefExoticComponent<BreadcrumbDelimiterProps & React.RefAttributes<BreadcrumbDelimiterHandle | null>>;

package/dist/es/breadcrumb/BreadcrumbDelimiter.js

@@ -24,5 +24,4 @@ var propTypes = {
     tabIndex: PropTypes.number
 };
 BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
-// TODO: delete casting when @types/react is updated!
 BreadcrumbDelimiter.propTypes = propTypes;

package/dist/es/breadcrumb/BreadcrumbLink.d.ts

@@ -74,4 +74,4 @@ export interface BreadcrumbLinkHandle {
      */
     focus: () => void;
 }
-export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle>>;
+export declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<BreadcrumbLinkHandle | null>>;

package/dist/es/breadcrumb/BreadcrumbListItem.d.ts

@@ -40,4 +40,4 @@ export interface BreadcrumbListItemHandle {
 /**
  * Represents the BreadcrumbListItem component.
  */
-export declare const BreadcrumbListItem: React.ForwardRefExoticComponent<BreadcrumbListItemProps & React.RefAttributes<BreadcrumbListItemHandle>>;
+export declare const BreadcrumbListItem: React.ForwardRefExoticComponent<BreadcrumbListItemProps & React.RefAttributes<BreadcrumbListItemHandle | null>>;

package/dist/es/breadcrumb/BreadcrumbListItem.js

@@ -30,5 +30,4 @@ var propTypes = {
     style: PropTypes.object
 };
 BreadcrumbListItem.displayName = 'KendoReactBreadcrumbListItem';
-// TODO: delete casting when @types/react is updated!
 BreadcrumbListItem.propTypes = propTypes;

package/dist/es/breadcrumb/BreadcrumbOrderedList.d.ts

@@ -48,4 +48,4 @@ export interface BreadcrumbOrderedListHandle {
 /**
  * Represents the BreadcrumbOrderedList component.
  */
-export declare const BreadcrumbOrderedList: React.ForwardRefExoticComponent<BreadcrumbOrderedListProps & React.RefAttributes<BreadcrumbOrderedListHandle>>;
+export declare const BreadcrumbOrderedList: React.ForwardRefExoticComponent<BreadcrumbOrderedListProps & React.RefAttributes<BreadcrumbOrderedListHandle | null>>;

package/dist/es/breadcrumb/BreadcrumbOrderedList.js

@@ -29,5 +29,4 @@ var propTypes = {
     disabled: PropTypes.bool
 };
 BreadcrumbOrderedList.displayName = 'KendoReactBreadcrumbOrderedList';
-// TODO: delete casting when @types/react is updated!
 BreadcrumbOrderedList.propTypes = propTypes;

package/dist/es/card/Avatar.js

@@ -9,12 +9,12 @@ export var Avatar = function (props) {
     validatePackage(packageMetadata);
     return (React.createElement("div", { style: props.style, className: classNames('k-avatar', (_a = {},
             _a['k-avatar-bordered'] = props.border,
-            _a["k-rounded-" + (kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
-            _a["k-avatar-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
-            _a["k-avatar-" + props.fillMode] = props.fillMode,
-            _a["k-avatar-" + props.fillMode + "-" + props.themeColor] = Boolean(props.fillMode && props.themeColor),
+            _a["k-rounded-".concat(kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
+            _a["k-avatar-".concat(kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
+            _a["k-avatar-".concat(props.fillMode)] = props.fillMode,
+            _a["k-avatar-".concat(props.fillMode, "-").concat(props.themeColor)] = Boolean(props.fillMode && props.themeColor),
             _a), props.className) },
-        React.createElement("span", { className: "k-avatar-" + props.type }, props.children)));
+        React.createElement("span", { className: "k-avatar-".concat(props.type) }, props.children)));
 };
 Avatar.propTypes = {
     className: PropTypes.string,

package/dist/es/card/Card.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { CardProps } from './interfaces/CardProps';
 import { CardHandle } from './interfaces/CardHandle';
-export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, string | number> & React.RefAttributes<CardHandle>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<CardProps, keyof CardProps> & React.RefAttributes<CardHandle | null>>;

package/dist/es/card/Card.js

@@ -38,7 +38,7 @@ export var Card = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("div", __assign({ dir: dir, style: style, ref: chipRef, className: classNames('k-card', className, (_a = {}, _a["k-card-" + type] = type !== cardType.DEFAULT, _a), orientation !== cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, customProps), children));
+    return (React.createElement("div", __assign({ dir: dir, style: style, ref: chipRef, className: classNames('k-card', className, (_a = {}, _a["k-card-".concat(type)] = type !== cardType.DEFAULT, _a), orientation !== cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, customProps), children));
 });
 Card.displayName = 'KendoReactCard';
 Card.propTypes = {

package/dist/es/card/CardActions.js

@@ -3,7 +3,7 @@ import * as PropTypes from 'prop-types';
 import { classNames } from '@progress/kendo-react-common';
 import { cardActionsLayout, cardOrientation } from './interfaces/Enums';
 export var CardActions = function (props) {
-    return (React.createElement("div", { style: props.style, className: classNames('k-card-actions', props.className, "k-card-actions-" + props.layout, props.orientation !== cardOrientation.VERTICAL ? 'k-card-actions-horizontal' : 'k-card-actions-vertical') }, props.children));
+    return (React.createElement("div", { style: props.style, className: classNames('k-card-actions', props.className, "k-card-actions-".concat(props.layout), props.orientation !== cardOrientation.VERTICAL ? 'k-card-actions-horizontal' : 'k-card-actions-vertical') }, props.children));
 };
 CardActions.propTypes = {
     layout: PropTypes.oneOf(['stretched', 'start', 'center', 'end']),

package/dist/es/drawer/Drawer.d.ts

@@ -37,4 +37,4 @@ export interface DrawerHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerHandle>>;
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerHandle | null>>;

package/dist/es/drawer/Drawer.js

@@ -1,3 +1,4 @@
+var _this = this;
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { DrawerContext } from './context/DrawerContext';
@@ -48,12 +49,16 @@ export var Drawer = React.forwardRef(function (props, target) {
         element: elementRef.current,
         focus: focusElement
     }); });
-    var handleSelect = React.useCallback(function (itemTarget, itemIndex) {
+    var handleSelect = React.useCallback(function (itemTarget, itemIndex, event) {
         if (items && onSelect) {
-            onSelect.call(undefined, {
+            var ev = {
                 itemTarget: itemTarget,
-                itemIndex: itemIndex
-            });
+                itemIndex: itemIndex,
+                syntheticEvent: event,
+                nativeEvent: event && event.nativeEvent,
+                target: _this
+            };
+            onSelect.call(undefined, ev);
         }
     }, [items, onSelect]);
     var dir = useDir(elementRef, props.dir);

package/dist/es/drawer/DrawerContent.d.ts

@@ -36,4 +36,4 @@ export interface DrawerContentHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<DrawerContentHandle>>;
+export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<DrawerContentHandle | null>>;

package/dist/es/drawer/DrawerItem.d.ts

@@ -29,4 +29,4 @@ import { DrawerItemProps } from './interfaces/DrawerItemProps';
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const DrawerItem: React.ForwardRefExoticComponent<Pick<DrawerItemProps, string | number> & React.RefAttributes<DrawerItemHandle>>;
+export declare const DrawerItem: React.ForwardRefExoticComponent<Pick<DrawerItemProps, keyof DrawerItemProps> & React.RefAttributes<DrawerItemHandle | null>>;

package/dist/es/drawer/DrawerItem.js

@@ -70,14 +70,14 @@ export var DrawerItem = React.forwardRef(function (props, target) {
         'k-selected': selected,
         'k-disabled': disabled
     }, className);
-    var handleClick = React.useCallback(function () {
+    var handleClick = React.useCallback(function (event) {
         if (onSelect && !disabled) {
             var handle = {
                 element: elementRef.current,
                 focus: focusElement,
                 props: props
             };
-            onSelect(handle, index);
+            onSelect(handle, index, event);
         }
     }, [onSelect, index, disabled]);
     var drawerItemContent = (React.createElement(React.Fragment, null,

package/dist/es/drawer/DrawerNavigation.d.ts

@@ -40,4 +40,4 @@ export interface DrawerNavigationHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const DrawerNavigation: React.ForwardRefExoticComponent<DrawerNavigationProps & React.RefAttributes<DrawerNavigationHandle>>;
+export declare const DrawerNavigation: React.ForwardRefExoticComponent<DrawerNavigationProps & React.RefAttributes<DrawerNavigationHandle | null>>;

package/dist/es/drawer/context/DrawerContext.d.ts

@@ -14,7 +14,7 @@ export declare type DrawerContextType = {
     width?: number;
     miniWidth?: number;
     onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onSelect?: (target: any, idx: number) => void;
+    onSelect?: (target: any, idx: number, event: React.SyntheticEvent<HTMLElement>) => void;
 };
 /** @hidden */
 export declare const DrawerContext: React.Context<DrawerContextType>;

package/dist/es/drawer/interfaces/DrawerItemProps.d.ts

@@ -52,5 +52,5 @@ export interface DrawerItemProps {
     /**
      * @hidden
      */
-    onSelect?(target?: any, idx?: number): void;
+    onSelect?(target?: any, idx?: number, event?: React.SyntheticEvent<Element>): void;
 }

package/dist/es/expansionpanel/ExpansionPanel.d.ts

@@ -3,4 +3,4 @@ import { ExpansionPanelHandle, ExpansionPanelProps } from './interfaces';
 /**
  * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
  */
-export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle>>;
+export declare const ExpansionPanel: React.ForwardRefExoticComponent<ExpansionPanelProps & React.RefAttributes<ExpansionPanelHandle | null>>;

package/dist/es/gridlayout/GridLayout.d.ts

@@ -36,4 +36,4 @@ export interface GridLayoutHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const GridLayout: React.ForwardRefExoticComponent<GridLayoutProps & React.RefAttributes<GridLayoutHandle>>;
+export declare const GridLayout: React.ForwardRefExoticComponent<GridLayoutProps & React.RefAttributes<GridLayoutHandle | null>>;

package/dist/es/gridlayout/GridLayout.js

@@ -62,10 +62,10 @@ export var GridLayout = React.forwardRef(function (props, ref) {
         'k-align-items-stretch': vAlign === 'stretch'
     }, className); }, [hAlign, vAlign, className]);
     var gapStyle = gap
-        ? "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + ("" + (typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols))
+        ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.cols === 'number' ? gap.cols + 'px' : gap.cols)
         : undefined;
-    var gridTemplateRowsStyle = props.rows && props.rows.map(function (row) { return "" + (typeof row.height === 'number' ? row.height + 'px' : row.height); }).join(' ');
-    var gridTemplateColumnsStyle = props.cols && props.cols.map(function (col) { return "" + (typeof col.width === 'number' ? col.width + 'px' : col.width); }).join(' ');
+    var gridTemplateRowsStyle = props.rows && props.rows.map(function (row) { return "".concat(typeof row.height === 'number' ? row.height + 'px' : row.height); }).join(' ');
+    var gridTemplateColumnsStyle = props.cols && props.cols.map(function (col) { return "".concat(typeof col.width === 'number' ? col.width + 'px' : col.width); }).join(' ');
     var gridLayoutStyles = __assign({ gap: gapStyle, gridTemplateColumns: gridTemplateColumnsStyle, gridTemplateRows: gridTemplateRowsStyle }, style);
     return (React.createElement("div", { ref: elementRef, className: gridLayoutClasses, style: gridLayoutStyles, id: id || layoutId }, children));
 });

package/dist/es/gridlayout/GridLayoutItem.d.ts

@@ -35,4 +35,4 @@ export interface GridLayoutItemHandle {
  *    ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-export declare const GridLayoutItem: React.ForwardRefExoticComponent<GridLayoutItemProps & React.RefAttributes<GridLayoutItemHandle>>;
+export declare const GridLayoutItem: React.ForwardRefExoticComponent<GridLayoutItemProps & React.RefAttributes<GridLayoutItemHandle | null>>;

package/dist/es/gridlayout/GridLayoutItem.js

@@ -48,7 +48,7 @@ export var GridLayoutItem = React.forwardRef(function (props, ref) {
     React.useImperativeHandle(ref, getImperativeHandle);
     var className = props.className, style = props.style, id = props.id, children = props.children, row = props.row, col = props.col, rowSpan = props.rowSpan, colSpan = props.colSpan;
     var itemId = React.useMemo(function () { return guid(); }, []);
-    var gridLayoutItemStyles = __assign({ gridArea: (row || 'auto') + " / " + (col || 'auto') + " / " + (rowSpan ? 'span ' + rowSpan : 'auto') + " / " + (colSpan ? 'span ' + colSpan : 'auto') }, style);
+    var gridLayoutItemStyles = __assign({ gridArea: "".concat(row || 'auto', " / ").concat(col || 'auto', " / ").concat(rowSpan ? 'span ' + rowSpan : 'auto', " / ").concat(colSpan ? 'span ' + colSpan : 'auto') }, style);
     return (React.createElement("div", { ref: elementRef, className: className, style: gridLayoutItemStyles, id: id || itemId }, children));
 });
 GridLayoutItem.propTypes = {

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

@@ -38,7 +38,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
      */
     static propTypes: {
         vertical: PropTypes.Requireable<boolean>;
-        items: PropTypes.Requireable<object[]>;
+        items: PropTypes.Requireable<(object | null | undefined)[]>;
         style: PropTypes.Requireable<object>;
         dir: PropTypes.Requireable<string>;
         hoverOpenDelay: PropTypes.Requireable<number>;
@@ -46,7 +46,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
         openOnClick: PropTypes.Requireable<boolean>;
         itemRender: PropTypes.Requireable<any>;
         linkRender: PropTypes.Requireable<any>;
-        customCloseItemIds: PropTypes.Requireable<string[]>;
+        customCloseItemIds: PropTypes.Requireable<(string | null | undefined)[]>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
     };
     /**

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

@@ -58,6 +58,8 @@ var Menu = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.guid = guid();
         _this.directionHolder = new DirectionHolder();
+        _this.inputItems = [];
+        _this.items = [];
         /**
          * Resets the selection and opening of Menu items.
          */

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

@@ -25,5 +25,5 @@ export declare class MenuItem extends React.Component<MenuItemProps, {}> {
     /**
      * @hidden
      */
-    render(): any;
+    render(): null;
 }

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

@@ -110,7 +110,7 @@ var MenuItemInternal = /** @class */ (function (_super) {
     };
     MenuItemInternal.prototype.renderMenuIconIfApplicable = function () {
         return this.props.item.icon ?
-            React.createElement("span", { className: "k-icon k-i-" + this.props.item.icon, role: "presentation", key: "0" }) : null;
+            React.createElement("span", { className: "k-icon k-i-".concat(this.props.item.icon), role: "presentation", key: "0" }) : null;
     };
     MenuItemInternal.prototype.renderArrowIfApplicable = function () {
         return this.props.item.items.length > 0 ?

package/dist/es/menu/models/BaseMenuItem.d.ts

@@ -43,4 +43,8 @@ export interface BaseMenuItem {
      * Represents any additional data that is associated with the Menu item.
      */
     data?: any;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
 }

package/dist/es/menu/utils/DirectionHolder.d.ts

@@ -5,7 +5,7 @@ export declare class DirectionHolder {
     private phase;
     private previousIsDirectionRightToLeft?;
     private isDirectionRightToLeft?;
-    getIsDirectionRightToLeft(): boolean;
+    getIsDirectionRightToLeft(): boolean | undefined;
     setIsDirectionRightToLeft(value: boolean): void;
     hasDirectionChanged(): boolean;
 }

package/dist/es/menu/utils/MouseOverHandler.js

@@ -6,6 +6,7 @@ var MouseOverHandler = /** @class */ (function () {
         this.openOnClick = openOnClick;
         this.resetMenu = resetMenu;
         this.openItem = openItem;
+        this.mouseDown = false;
         this.openOnClick = openOnClick;
         this.isMouseOverEnabled = openOnClick ? false : true;
     }

package/dist/es/menu/utils/misc.js

@@ -38,5 +38,5 @@ export function convertBoolDirectionToString(isDirectionRightToLeft) {
  * @hidden
  */
 export function getDOMElementId(menuGuid, itemId) {
-    return menuGuid + "_" + itemId;
+    return "".concat(menuGuid, "_").concat(itemId);
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1653648336,
+    publishDate: 1654762104,
     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/es/panelbar/PanelBar.d.ts

@@ -18,10 +18,10 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
      */
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: (props: PanelBarProps, propName: any) => Error;
+        children: (props: PanelBarProps, propName: any) => Error | null | undefined;
         dir: PropTypes.Requireable<string>;
         selected: PropTypes.Requireable<string>;
-        expanded: PropTypes.Requireable<string[]>;
+        expanded: PropTypes.Requireable<(string | null | undefined)[]>;
         focused: PropTypes.Requireable<string>;
         expandMode: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

package/dist/es/panelbar/PanelBar.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -63,10 +67,10 @@ var PanelBar = /** @class */ (function (_super) {
             });
             switch (_this.expandMode) {
                 case 'single':
-                    newExpanded = __spreadArray(__spreadArray([], selectedChild.props.parentUniquePrivateKey), [selectedChild.props.uniquePrivateKey]);
+                    newExpanded = __spreadArray(__spreadArray([], selectedChild.props.parentUniquePrivateKey, true), [selectedChild.props.uniquePrivateKey], false);
                     if (isArrayEqual(_this.expandedItems, newExpanded)) {
                         if (selectedChild.props.parentUniquePrivateKey) {
-                            newExpanded = __spreadArray([], selectedChild.props.parentUniquePrivateKey);
+                            newExpanded = __spreadArray([], selectedChild.props.parentUniquePrivateKey, true);
                         }
                         else {
                             newExpanded = [];

package/dist/es/panelbar/PanelBarItem.d.ts

@@ -29,7 +29,7 @@ export declare class PanelBarItem extends React.PureComponent<PanelBarItemProps,
     static defaultProps: {
         title: string;
     };
-    constructor(props: any);
+    constructor(props: PanelBarItemProps);
     /**
      * @hidden
      */

package/dist/es/panelbar/PanelBarItem.js

@@ -66,7 +66,7 @@ var PanelBarItem = /** @class */ (function (_super) {
             return child;
         };
         _this.state = {
-            show: props.expanded
+            show: props.expanded || false
         };
         return _this;
     }
@@ -88,7 +88,7 @@ var PanelBarItem = /** @class */ (function (_super) {
             'k-panelbar-header': level === 0,
             'k-panelbar-item': level !== 0,
             'k-state-expanded': expanded && !!children
-        }, "k-level-" + level, className);
+        }, "k-level-".concat(level), className);
         var panelBarLinkClassName = classNames('k-link', {
             'k-selected': !disabled && selected,
             'k-focus': !disabled && focused,

package/dist/es/panelbar/util.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 import * as React from 'react';
 import { PanelBarItem } from './PanelBarItem';
@@ -35,11 +39,11 @@ export var renderChildren = function (_a) {
                     children: child.props.children,
                     parentExpanded: (expanded || []).indexOf(privateKey) > -1,
                     level: level + 1,
-                    parentPrivateKey: __spreadArray(__spreadArray([], parentPrivateKey), [privateKey])
+                    parentPrivateKey: __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false)
                 };
                 nestedChildren = renderChildren(renderState);
             }
-            return React.cloneElement(child, __assign(__assign({}, child.props), { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-" + privateKey, uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
+            return React.cloneElement(child, __assign(__assign({}, child.props), { animation: child.props.animation !== undefined ? child.props.animation : animation, keepItemsMounted: keepItemsMounted, id: child.props.id || "k-panelbar-item-default-".concat(privateKey), uniquePrivateKey: privateKey, parentUniquePrivateKey: parentPrivateKey, parentExpanded: parentExpanded, level: level, expanded: (expanded || []).indexOf(privateKey) > -1, focused: state.focused === privateKey && state.wrapperFocused, selected: state.selected === privateKey, children: nestedChildren, onSelect: handleSelect }));
         }
         else {
             return React.createElement("div", { className: "k-panelbar-content k-content" }, child);
@@ -87,7 +91,7 @@ export var getInitialState = function (props, expandMode, result, parentExpanded
                     }
                 }
                 if (child.props.children) {
-                    result = getInitialState(child.props, expandMode, result, !!child.props.expanded, __spreadArray(__spreadArray([], parentPrivateKey), [privateKey]));
+                    result = getInitialState(child.props, expandMode, result, !!child.props.expanded, __spreadArray(__spreadArray([], parentPrivateKey, true), [privateKey], false));
                 }
             }
         }
@@ -101,8 +105,8 @@ var getId = function (child, parentPrivateKey, idx) {
     return child && child.props && child.props.id
         ? child.props.id
         : parentPrivateKey.length
-            ? parentPrivateKey[parentPrivateKey.length - 1] + ("." + idx)
-            : "." + idx;
+            ? parentPrivateKey[parentPrivateKey.length - 1] + ".".concat(idx)
+            : ".".concat(idx);
 };
 /**
  * @hidden