@progress/kendo-react-layout 5.3.0-dev.202205040828 → 5.3.0-dev.202205051350

package/dist/es/bottomnavigation/BottomNavigation.js

@@ -55,7 +55,7 @@ export var BottomNavigation = React.forwardRef(function (props, ref) {
     var dir = useDir(elementRef, props.dir);
     var navClasses = React.useMemo(function () { return classNames('k-bottom-nav', POSITION_MODE_CLASSES[positionMode], THEME_COLOR_CLASSES[themeColor], FILL_CLASSES[fill], ITEM_FLOW_CLASSES[itemFlow], {
         'k-bottom-nav-border': border,
-        'k-state-disabled': disabled
+        'k-disabled': disabled
     }, className); }, [positionMode, themeColor, fill, itemFlow, border, disabled, className]);
     var dispatchSelectEvent = React.useCallback(function (dispatchedEvent, index) {
         if (!items) {

package/dist/es/bottomnavigation/BottomNavigationItem.js

@@ -14,8 +14,8 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
     }); });
     var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
     var itemClasses = React.useMemo(function () { return classNames('k-bottom-nav-item', {
-        'k-state-selected': selected,
-        'k-state-disabled': disabled
+        'k-selected': selected,
+        'k-disabled': disabled
     }, className); }, [selected, disabled, className]);
     var handleClick = React.useCallback(function (event) {
         if (onSelect && index !== undefined && !disabled) {

package/dist/es/breadcrumb/Breadcrumb.js

@@ -54,7 +54,7 @@ export var Breadcrumb = React.forwardRef(function (props, ref) {
     };
     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-state-disabled': disabled
+            'k-disabled': disabled
         }, props.className) },
         React.createElement(OrderedListComponent, null,
             React.createElement(React.Fragment, null, Object.keys(props.data).map(function (key) {

package/dist/es/breadcrumb/BreadcrumbLink.js

@@ -19,17 +19,17 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleItemSelect = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
+        if (props.id) {
+            dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
         }
     }, [props.onItemSelect]);
     var handleKeyDown = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
+        if (props.id) {
+            dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
     return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: useDir(linkRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
-            'k-state-disabled': props.disabled
+            'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass
             ?

package/dist/es/breadcrumb/BreadcrumbOrderedList.js

@@ -16,7 +16,7 @@ export var BreadcrumbOrderedList = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: useDir(orderedListRef, props.dir), tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-breadcrumb-container k-flex-wrap', {
-            'k-state-disabled': props.disabled
+            'k-disabled': props.disabled
         }, props.className) }, props.children));
 });
 var propTypes = {

package/dist/es/card/Avatar.js

@@ -7,7 +7,7 @@ import { packageMetadata } from '../package-metadata';
 export var Avatar = function (props) {
     var _a;
     validatePackage(packageMetadata);
-    return (React.createElement("div", { style: props.style, className: classNames('k-avatar', "k-avatar-" + props.type, (_a = {},
+    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,

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

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

package/dist/es/card/Card.js

@@ -1,3 +1,23 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames } from '@progress/kendo-react-common';
@@ -5,15 +25,27 @@ import { cardType } from './interfaces/Enums';
 import { cardOrientation } from './interfaces/Enums';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
-export var Card = function (props) {
+export var Card = React.forwardRef(function (props, ref) {
     var _a;
     validatePackage(packageMetadata);
-    return (React.createElement("div", { dir: props.dir, style: props.style, className: classNames('k-card', props.className, (_a = {}, _a["k-card-" + props.type] = props.type !== cardType.DEFAULT, _a), props.orientation !== cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, props.children));
-};
+    var children = props.children, dir = props.dir, style = props.style, className = props.className, type = props.type, orientation = props.orientation, customProps = __rest(props, ["children", "dir", "style", "className", "type", "orientation"]);
+    var target = React.useRef(null);
+    var chipRef = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: chipRef.current,
+        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));
+});
+Card.displayName = 'KendoReactCard';
 Card.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    dir: PropTypes.string,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    style: PropTypes.object,
+    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error'])
 };
 Card.defaultProps = {
     type: cardType.DEFAULT,

package/dist/es/card/interfaces/CardHandle.d.ts

@@ -0,0 +1,14 @@
+import { CardProps } from './CardProps';
+/**
+ * Represents the target(element and props) of the Card component.
+ */
+export interface CardHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Card.
+     */
+    props: CardProps;
+}

package/dist/es/card/interfaces/CardProps.d.ts

@@ -38,4 +38,8 @@ export interface CardProps {
      * * `vertical`
      */
     orientation?: cardOrientation | string;
+    /**
+     * Sets a custom property to component DOM element.
+     */
+    [customProp: string]: any;
 }

package/dist/es/drawer/DrawerItem.js

@@ -65,8 +65,8 @@ export var DrawerItem = React.forwardRef(function (props, target) {
         props: props
     }); });
     var itemClassNames = classNames('k-drawer-item', {
-        'k-state-selected': selected,
-        'k-state-disabled': disabled
+        'k-selected': selected,
+        'k-disabled': disabled
     }, className);
     var handleClick = React.useCallback(function () {
         if (onSelect && !disabled) {

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

@@ -20,7 +20,7 @@ export interface DrawerNavigationHandle {
  *           <Drawer expanded={expanded} position='start' mode='push'>
  *               <DrawerNavigation>
  *                   <ul className="k-drawer-items">
- *                       <li className="k-drawer-item k-state-selected">
+ *                       <li className="k-drawer-item k-selected">
  *                           <span className="k-item-text">Home</span>
  *                       </li>
  *                       <li className="k-drawer-item">

package/dist/es/drawer/DrawerNavigation.js

@@ -43,7 +43,7 @@ var NO_ANIMATION = { type: 'slide', duration: 0 };
  *           <Drawer expanded={expanded} position='start' mode='push'>
  *               <DrawerNavigation>
  *                   <ul className="k-drawer-items">
- *                       <li className="k-drawer-item k-state-selected">
+ *                       <li className="k-drawer-item k-selected">
  *                           <span className="k-item-text">Home</span>
  *                       </li>
  *                       <li className="k-drawer-item">

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -37,7 +37,7 @@ export var ExpansionPanel = React.forwardRef(function (props, target) {
     return (React.createElement("div", { ref: elementRef, className: classNames('k-expander', props.className, {
             'k-expanded': expanded,
             'k-state-focus': focused && !disabled,
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: useRtl(elementRef, props.dir), tabIndex: getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
         React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
             title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,

package/dist/es/main.d.ts

@@ -27,6 +27,7 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/interfaces/CardProps';
+export * from './card/interfaces/CardHandle';
 export * from './card/interfaces/AvatarProps';
 export * from './card/interfaces/CardActionsProps';
 export * from './card/Avatar';

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

@@ -23,7 +23,7 @@ export declare class MenuItemInternal extends React.Component<MenuItemInternalPr
     constructor(props: MenuItemInternalProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: MenuItemInternalProps): void;
-    render(): JSX.Element[];
+    render(): JSX.Element;
     private renderContent;
     private renderMenuItemLink;
     private renderPopupIfOpened;

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

@@ -71,10 +71,9 @@ var MenuItemInternal = /** @class */ (function (_super) {
         var _this = this;
         var item = this.props.item;
         var itemId = item.id;
-        return [
-            (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())),
-            this.renderPopupIfOpened()
-        ];
+        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()),
+            this.renderPopupIfOpened()));
     };
     MenuItemInternal.prototype.renderContent = function () {
         var itemId = this.props.item.contentParentItemId;
@@ -90,11 +89,10 @@ var MenuItemInternal = /** @class */ (function (_super) {
             var textOrItemRender = this.itemRender ?
                 React.createElement(this.itemRender, { item: this.props.onOriginalItemNeeded(item.id), itemId: item.id, key: "1" }) :
                 React.createElement("span", { className: "k-menu-link-text" }, item.text);
-            return (React.createElement(MenuItemLink, { url: item.url, opened: this.Opened }, [
+            return (React.createElement(MenuItemLink, { url: item.url, opened: this.Opened },
                 this.renderMenuIconIfApplicable(),
                 textOrItemRender,
-                this.renderArrowIfApplicable()
-            ]));
+                this.renderArrowIfApplicable()));
         }
     };
     MenuItemInternal.prototype.renderPopupIfOpened = function () {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1651652180,
+    publishDate: 1651757786,
     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/PanelBarItem.js

@@ -88,9 +88,9 @@ var PanelBarItem = /** @class */ (function (_super) {
             'k-state-expanded': expanded && !!children
         }, "k-level-" + level, className);
         var panelBarLinkClassName = classNames('k-link', {
-            'k-state-selected': !disabled && selected,
+            'k-selected': !disabled && selected,
             'k-state-focus': !disabled && focused,
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }, headerClassName);
         var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {},
             _a['k-i-arrow-chevron-up'] = expanded && !!children,

package/dist/es/splitter/SplitterBar.js

@@ -157,7 +157,7 @@ var SplitterBar = /** @class */ (function (_super) {
         var isStatic = this.isStatic;
         var isHorizontal = this.isHorizontal;
         var barClasses = classNames('k-splitbar', (_a = {},
-            _a['k-state-focused'] = this.state.focused,
+            _a['k-focus'] = this.state.focused,
             _a['k-splitbar-horizontal'] = isHorizontal,
             _a['k-splitbar-vertical'] = !isHorizontal,
             _a['k-splitbar-draggable-horizontal'] = isHorizontal && isDraggable,

package/dist/es/tabstrip/TabStripContent.js

@@ -43,7 +43,7 @@ var TabStripContent = /** @class */ (function (_super) {
         var _a = this.props, children = _a.children, selected = _a.selected;
         var selectedTab = children && typeof selected === 'number' &&
             React.Children.toArray(children)[selected];
-        var contentClasses = classNames('k-content', 'k-state-active', selectedTab && selectedTab.props.contentClassName);
+        var contentClasses = classNames('k-content', 'k-active', selectedTab && selectedTab.props.contentClassName);
         return (React.createElement("div", { className: contentClasses, style: this.props.style }, this.renderContent(children)));
     };
     TabStripContent.prototype.renderContent = function (children) {
@@ -59,6 +59,7 @@ var TabStripContent = /** @class */ (function (_super) {
         var contentProps = {
             'role': 'tabpanel',
             'aria-expanded': true,
+            'aria-labelledby': idx.toString(),
             'style': {
                 'display': visible ? undefined : 'none'
             }

package/dist/es/tabstrip/TabStripNavigationItem.d.ts

@@ -4,6 +4,10 @@ import * as PropTypes from 'prop-types';
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
  */
 export interface TabStripNavigationItemProps {
+    /**
+     * Sets the `id` property of the top element of the TabStripNavigationItem.
+     */
+    id?: string;
     /**
      * Defines whether the current TabStripNavigationItem is selected.
      */

package/dist/es/tabstrip/TabStripNavigationItem.js

@@ -41,17 +41,21 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
      */
     TabStripNavigationItem.prototype.render = function () {
         var _a;
-        var _b = this.props, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
+        var _b = this.props, id = _b.id, active = _b.active, disabled = _b.disabled, _c = _b.title, title = _c === void 0 ? 'Untitled' : _c, first = _b.first, last = _b.last;
         var props = {
+            'id': id,
             'aria-selected': active,
+            'aria-controls': id,
+            'aria-disabled': disabled,
+            'aria-hidden': disabled,
             'role': 'tab',
             onClick: !disabled ? this.onClick : undefined
         };
         var itemClasses = classNames('k-item', (_a = {},
             _a['k-first'] = first,
             _a['k-last'] = last,
-            _a['k-state-disabled'] = disabled,
-            _a['k-state-active'] = active,
+            _a['k-disabled'] = disabled,
+            _a['k-active'] = active,
             _a));
         return (React.createElement("li", __assign({}, props, { className: itemClasses }),
             React.createElement("span", { className: "k-link" }, title)));

package/dist/npm/bottomnavigation/BottomNavigation.js

@@ -57,7 +57,7 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
     var dir = kendo_react_common_2.useDir(elementRef, props.dir);
     var navClasses = React.useMemo(function () { return kendo_react_common_2.classNames('k-bottom-nav', utils_1.POSITION_MODE_CLASSES[positionMode], utils_1.THEME_COLOR_CLASSES[themeColor], utils_1.FILL_CLASSES[fill], utils_1.ITEM_FLOW_CLASSES[itemFlow], {
         'k-bottom-nav-border': border,
-        'k-state-disabled': disabled
+        'k-disabled': disabled
     }, className); }, [positionMode, themeColor, fill, itemFlow, border, disabled, className]);
     var dispatchSelectEvent = React.useCallback(function (dispatchedEvent, index) {
         if (!items) {

package/dist/npm/bottomnavigation/BottomNavigationItem.js

@@ -16,8 +16,8 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
     }); });
     var className = props.className, style = props.style, selected = props.selected, disabled = props.disabled, item = props.item, render = props.render, dataItem = props.dataItem, icon = props.icon, text = props.text, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown, index = props.index, tabIndex = props.tabIndex;
     var itemClasses = React.useMemo(function () { return kendo_react_common_2.classNames('k-bottom-nav-item', {
-        'k-state-selected': selected,
-        'k-state-disabled': disabled
+        'k-selected': selected,
+        'k-disabled': disabled
     }, className); }, [selected, disabled, className]);
     var handleClick = React.useCallback(function (event) {
         if (onSelect && index !== undefined && !disabled) {

package/dist/npm/breadcrumb/Breadcrumb.js

@@ -56,7 +56,7 @@ exports.Breadcrumb = React.forwardRef(function (props, ref) {
     };
     return (React.createElement("nav", { "aria-label": props.ariaLabel, id: props.id, style: props.style, ref: breadcrumbRef, dir: dir, className: kendo_react_common_1.classNames('k-breadcrumb', {
             'k-rtl': dir === 'rtl',
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }, props.className) },
         React.createElement(OrderedListComponent, null,
             React.createElement(React.Fragment, null, Object.keys(props.data).map(function (key) {

package/dist/npm/breadcrumb/BreadcrumbLink.js

@@ -21,17 +21,17 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     var handleItemSelect = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
+        if (props.id) {
+            kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: props.id });
         }
     }, [props.onItemSelect]);
     var handleKeyDown = React.useCallback(function (event) {
-        if (target.current && event.target.id) {
-            kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
+        if (props.id) {
+            kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: props.id });
         }
     }, [props.onKeyDown]);
     return (React.createElement("span", { "aria-current": props.ariaCurrent ? props.ariaCurrent : props.isLast, id: props.id, ref: linkRef, style: props.style, dir: kendo_react_common_1.useDir(linkRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-cursor-pointer k-flex-none k-breadcrumb-link k-breadcrumb-icontext-link', {
-            'k-state-disabled': props.disabled
+            'k-disabled': props.disabled
         }), onClick: handleItemSelect, onKeyDown: handleKeyDown },
         props.iconClass
             ?

package/dist/npm/breadcrumb/BreadcrumbOrderedList.js

@@ -18,7 +18,7 @@ exports.BreadcrumbOrderedList = React.forwardRef(function (props, ref) {
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
     return (React.createElement("ol", { id: props.id, ref: orderedListRef, style: props.style, dir: kendo_react_common_1.useDir(orderedListRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-breadcrumb-container k-flex-wrap', {
-            'k-state-disabled': props.disabled
+            'k-disabled': props.disabled
         }, props.className) }, props.children));
 });
 var propTypes = {

package/dist/npm/card/Avatar.js

@@ -9,7 +9,7 @@ var package_metadata_1 = require("../package-metadata");
 exports.Avatar = function (props) {
     var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    return (React.createElement("div", { style: props.style, className: kendo_react_common_1.classNames('k-avatar', "k-avatar-" + props.type, (_a = {},
+    return (React.createElement("div", { style: props.style, className: kendo_react_common_1.classNames('k-avatar', (_a = {},
             _a['k-avatar-bordered'] = props.border,
             _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
             _a["k-avatar-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,

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

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

package/dist/npm/card/Card.js

@@ -1,4 +1,24 @@
 "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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
+            t[p[i]] = s[p[i]];
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var PropTypes = require("prop-types");
@@ -7,15 +27,27 @@ var Enums_1 = require("./interfaces/Enums");
 var Enums_2 = require("./interfaces/Enums");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
-exports.Card = function (props) {
+exports.Card = React.forwardRef(function (props, ref) {
     var _a;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    return (React.createElement("div", { dir: props.dir, style: props.style, className: kendo_react_common_1.classNames('k-card', props.className, (_a = {}, _a["k-card-" + props.type] = props.type !== Enums_1.cardType.DEFAULT, _a), props.orientation !== Enums_2.cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, props.children));
-};
+    var children = props.children, dir = props.dir, style = props.style, className = props.className, type = props.type, orientation = props.orientation, customProps = __rest(props, ["children", "dir", "style", "className", "type", "orientation"]);
+    var target = React.useRef(null);
+    var chipRef = React.useRef(null);
+    React.useImperativeHandle(target, function () { return ({
+        element: chipRef.current,
+        props: props
+    }); });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    return (React.createElement("div", __assign({ dir: dir, style: style, ref: chipRef, className: kendo_react_common_1.classNames('k-card', className, (_a = {}, _a["k-card-" + type] = type !== Enums_1.cardType.DEFAULT, _a), orientation !== Enums_2.cardOrientation.HORIZONTAL ? 'k-card-vertical' : 'k-card-horizontal') }, customProps), children));
+});
+exports.Card.displayName = 'KendoReactCard';
 exports.Card.propTypes = {
+    children: PropTypes.node,
     className: PropTypes.string,
-    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
-    orientation: PropTypes.oneOf(['horizontal', 'vertical'])
+    dir: PropTypes.string,
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+    style: PropTypes.object,
+    type: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error'])
 };
 exports.Card.defaultProps = {
     type: Enums_1.cardType.DEFAULT,

package/dist/npm/card/interfaces/CardHandle.d.ts

@@ -0,0 +1,14 @@
+import { CardProps } from './CardProps';
+/**
+ * Represents the target(element and props) of the Card component.
+ */
+export interface CardHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Card.
+     */
+    props: CardProps;
+}

package/dist/npm/card/interfaces/CardHandle.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/npm/card/interfaces/CardProps.d.ts

@@ -38,4 +38,8 @@ export interface CardProps {
      * * `vertical`
      */
     orientation?: cardOrientation | string;
+    /**
+     * Sets a custom property to component DOM element.
+     */
+    [customProp: string]: any;
 }

package/dist/npm/drawer/DrawerItem.js

@@ -67,8 +67,8 @@ exports.DrawerItem = React.forwardRef(function (props, target) {
         props: props
     }); });
     var itemClassNames = kendo_react_common_1.classNames('k-drawer-item', {
-        'k-state-selected': selected,
-        'k-state-disabled': disabled
+        'k-selected': selected,
+        'k-disabled': disabled
     }, className);
     var handleClick = React.useCallback(function () {
         if (onSelect && !disabled) {

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

@@ -20,7 +20,7 @@ export interface DrawerNavigationHandle {
  *           <Drawer expanded={expanded} position='start' mode='push'>
  *               <DrawerNavigation>
  *                   <ul className="k-drawer-items">
- *                       <li className="k-drawer-item k-state-selected">
+ *                       <li className="k-drawer-item k-selected">
  *                           <span className="k-item-text">Home</span>
  *                       </li>
  *                       <li className="k-drawer-item">

package/dist/npm/drawer/DrawerNavigation.js

@@ -45,7 +45,7 @@ var NO_ANIMATION = { type: 'slide', duration: 0 };
  *           <Drawer expanded={expanded} position='start' mode='push'>
  *               <DrawerNavigation>
  *                   <ul className="k-drawer-items">
- *                       <li className="k-drawer-item k-state-selected">
+ *                       <li className="k-drawer-item k-selected">
  *                           <span className="k-item-text">Home</span>
  *                       </li>
  *                       <li className="k-drawer-item">

package/dist/npm/expansionpanel/ExpansionPanel.js

@@ -39,7 +39,7 @@ exports.ExpansionPanel = React.forwardRef(function (props, target) {
     return (React.createElement("div", { ref: elementRef, className: kendo_react_common_1.classNames('k-expander', props.className, {
             'k-expanded': expanded,
             'k-state-focus': focused && !disabled,
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }), onFocus: onFocus, onBlur: onBlur, style: props.style, id: props.id, "aria-expanded": expanded, "aria-disabled": disabled, dir: kendo_react_common_1.useRtl(elementRef, props.dir), tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, disabled), onKeyDown: disabled ? undefined : onKeyDown },
         React.createElement("div", { className: "k-expander-header", onClick: disabled ? undefined : onClick },
             title !== undefined ? React.createElement("div", { className: "k-expander-title" }, title) : undefined,

package/dist/npm/main.d.ts

@@ -27,6 +27,7 @@ export * from './card/CardImage';
 export * from './card/CardSubtitle';
 export * from './card/CardFooter';
 export * from './card/interfaces/CardProps';
+export * from './card/interfaces/CardHandle';
 export * from './card/interfaces/AvatarProps';
 export * from './card/interfaces/CardActionsProps';
 export * from './card/Avatar';

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

@@ -23,7 +23,7 @@ export declare class MenuItemInternal extends React.Component<MenuItemInternalPr
     constructor(props: MenuItemInternalProps);
     componentDidMount(): void;
     componentDidUpdate(prevProps: MenuItemInternalProps): void;
-    render(): JSX.Element[];
+    render(): JSX.Element;
     private renderContent;
     private renderMenuItemLink;
     private renderPopupIfOpened;