@progress/kendo-react-layout 5.3.0-dev.202205041411 → 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

@@ -29,7 +29,7 @@ export var BreadcrumbLink = React.forwardRef(function (props, ref) {
         }
     }, [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/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/package-metadata.js

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

package/dist/es/tabstrip/TabStripNavigationItem.js

@@ -54,8 +54,8 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
         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

@@ -31,7 +31,7 @@ exports.BreadcrumbLink = React.forwardRef(function (props, ref) {
         }
     }, [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/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/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1651672640,
+    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/npm/panelbar/PanelBarItem.js

@@ -90,9 +90,9 @@ var PanelBarItem = /** @class */ (function (_super) {
             'k-state-expanded': expanded && !!children
         }, "k-level-" + level, className);
         var panelBarLinkClassName = kendo_react_common_1.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 = kendo_react_common_1.classNames('k-panelbar-toggle', 'k-icon', (_a = {},
             _a['k-i-arrow-chevron-up'] = expanded && !!children,

package/dist/npm/splitter/SplitterBar.js

@@ -159,7 +159,7 @@ var SplitterBar = /** @class */ (function (_super) {
         var isStatic = this.isStatic;
         var isHorizontal = this.isHorizontal;
         var barClasses = kendo_react_common_1.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/npm/tabstrip/TabStripContent.js

@@ -45,7 +45,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 = kendo_react_common_1.classNames('k-content', 'k-state-active', selectedTab && selectedTab.props.contentClassName);
+        var contentClasses = kendo_react_common_1.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) {

package/dist/npm/tabstrip/TabStripNavigationItem.js

@@ -56,8 +56,8 @@ var TabStripNavigationItem = /** @class */ (function (_super) {
         var itemClasses = kendo_react_common_1.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)));