@progress/kendo-react-layout 5.6.0-dev.202208261541 → 5.6.0-dev.202209021051

package/dist/es/breadcrumb/BreadcrumbDelimiter.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { validatePackage } from '@progress/kendo-licensing';
-import { classNames } from '@progress/kendo-react-common';
+import { Icon } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * Represents the BreadcrumbDelimiter component.
@@ -10,12 +10,15 @@ export var BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
     validatePackage(packageMetadata);
     var target = React.useRef(null);
     var breadcrumbDelimiterRef = React.useRef(null);
-    React.useImperativeHandle(target, function () { return ({
-        element: breadcrumbDelimiterRef.current,
-        props: props
-    }); });
+    React.useImperativeHandle(target, function () {
+        var _a;
+        return ({
+            element: ((_a = breadcrumbDelimiterRef.current) === null || _a === void 0 ? void 0 : _a.element) || null,
+            props: props
+        });
+    });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("span", { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, className: classNames('k-icon k-i-arrow-chevron-right k-breadcrumb-delimiter-icon', props.className) }));
+    return (React.createElement(Icon, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/es/expansionpanel/ExpansionPanel.js

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur } from '@progress/kendo-react-common';
+import { classNames, getTabIndex, useRtl, validatePackage, dispatchEvent, Keys, useAsyncFocusBlur, Icon } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 /**
  * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
  */
 export var ExpansionPanel = React.forwardRef(function (props, target) {
-    var _a;
+    var _a, _b;
     validatePackage(packageMetadata);
     var elementRef = React.useRef(null);
-    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
     var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _c = props.expanded, expanded = _c === void 0 ? false : _c, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var _d = props.expanded, expanded = _d === void 0 ? false : _d, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
     var onClick = React.useCallback(function (event) {
         dispatchEvent(onAction, event, getImperativeHandle(), { expanded: expanded });
     }, [onAction, expanded]);
@@ -34,7 +34,7 @@ export var ExpansionPanel = React.forwardRef(function (props, target) {
         }
         setFocused(false);
     }, [props.disabled]);
-    var _d = useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
+    var _e = useAsyncFocusBlur({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _e.onFocus, onBlur = _e.onBlur;
     return (React.createElement("div", { ref: elementRef, className: classNames('k-expander', props.className, {
             'k-expanded': expanded,
             'k-focus': focused && !disabled,
@@ -45,14 +45,14 @@ export var ExpansionPanel = React.forwardRef(function (props, target) {
             React.createElement("span", { className: "k-spacer" }),
             subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
             React.createElement("span", { className: "k-expander-indicator" },
-                React.createElement("span", { className: classNames((_a = {},
-                        // expand icon
-                        _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
-                        _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
-                        // collapse icon
-                        _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
-                        _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
-                        _a)) }))),
+                React.createElement(Icon, { name: !expanded
+                        ? !expandIcon ? 'chevron-down' : undefined
+                        : !collapseIcon ? 'chevron-up' : undefined, className: classNames(expanded
+                        ? (_a = {},
+                            _a[String(collapseIcon)] = Boolean(collapseIcon),
+                            _a) : (_b = {},
+                        _b[String(expandIcon)] = Boolean(expandIcon),
+                        _b)) }))),
         props.children));
 });
 ExpansionPanel.propTypes = {

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

@@ -20,15 +20,15 @@ export interface MenuItemArrowProps {
 /**
  * @hidden
  */
-export declare const downArrowClass = "k-i-arrow-60-down";
+export declare const downArrowName = "caret-alt-down";
 /**
  * @hidden
  */
-export declare const rightArrowClass = "k-i-arrow-60-right";
+export declare const rightArrowName = "caret-alt-right";
 /**
  * @hidden
  */
-export declare const leftArrowClass = "k-i-arrow-60-left";
+export declare const leftArrowName = "caret-alt-left";
 export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {}> {
     /**
      * @hidden
@@ -42,5 +42,5 @@ export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {
      * @hidden
      */
     render(): JSX.Element;
-    private getArrowClassName;
+    private getIconName;
 }

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

@@ -15,20 +15,20 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
+import { Icon } from '@progress/kendo-react-common';
 import { getChildrenPosition } from '../utils/misc';
 /**
  * @hidden
  */
-export var downArrowClass = 'k-i-arrow-60-down';
+export var downArrowName = 'caret-alt-down';
 /**
  * @hidden
  */
-export var rightArrowClass = 'k-i-arrow-60-right';
+export var rightArrowName = 'caret-alt-right';
 /**
  * @hidden
  */
-export var leftArrowClass = 'k-i-arrow-60-left';
+export var leftArrowName = 'caret-alt-left';
 var MenuItemArrow = /** @class */ (function (_super) {
     __extends(MenuItemArrow, _super);
     function MenuItemArrow() {
@@ -38,17 +38,20 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement("span", { className: "k-menu-expand-arrow", role: "presentation" },
-            React.createElement("span", { className: this.getArrowClassName() }));
+        return React.createElement(Icon, { className: 'k-menu-expand-arrow', name: this.getIconName() });
     };
-    MenuItemArrow.prototype.getArrowClassName = function () {
-        var _a;
+    MenuItemArrow.prototype.getIconName = function () {
         var childrenPosition = getChildrenPosition(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');
-        return classNames('k-icon', (_a = {},
-            _a[downArrowClass] = childrenPosition === 'downward',
-            _a[rightArrowClass] = childrenPosition === 'rightward',
-            _a[leftArrowClass] = childrenPosition === 'leftward',
-            _a));
+        switch (childrenPosition) {
+            case 'downward':
+                return downArrowName;
+            case 'rightward':
+                return rightArrowName;
+            case 'leftward':
+                return leftArrowName;
+            default:
+                return undefined;
+        }
     };
     /**
      * @hidden

package/dist/es/package-metadata.js

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

@@ -26,7 +26,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, Icon } from '@progress/kendo-react-common';
 import { Reveal } from '@progress/kendo-react-animation';
 /**
  * @hidden
@@ -74,9 +74,8 @@ var PanelBarItem = /** @class */ (function (_super) {
      * @hidden
      */
     PanelBarItem.prototype.render = function () {
-        var _a;
         var _this = this;
-        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation, keepItemsMounted = _b.keepItemsMounted;
+        var _a = this.props, id = _a.id, children = _a.children, title = _a.title, uniquePrivateKey = _a.uniquePrivateKey, disabled = _a.disabled, selected = _a.selected, focused = _a.focused, expanded = _a.expanded, className = _a.className, level = _a.level, headerClassName = _a.headerClassName, animation = _a.animation, keepItemsMounted = _a.keepItemsMounted;
         var panelBarItemAriaAttributes = {
             'role': 'treeitem',
             'aria-disabled': disabled,
@@ -84,25 +83,22 @@ var PanelBarItem = /** @class */ (function (_super) {
             'aria-selected': !disabled && selected,
             'aria-expanded': !disabled && expanded && !!children
         };
-        var panelBarItemClassName = classNames('k-item', {
+        var panelBarItemClassName = classNames('k-panelbar-item', {
             'k-panelbar-header': level === 0,
-            'k-panelbar-item': level !== 0,
-            'k-state-expanded': expanded && !!children
+            'k-state-expanded': expanded && !!children,
+            'k-disabled': disabled
         }, "k-level-".concat(level), className);
         var panelBarLinkClassName = classNames('k-link', {
             'k-selected': !disabled && selected,
-            'k-focus': !disabled && focused,
-            'k-disabled': disabled
+            'k-focus': !disabled && focused
         }, headerClassName);
-        var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {},
-            _a['k-i-arrow-chevron-up'] = expanded && !!children,
-            _a['k-panelbar-collapse'] = expanded && !!children,
-            _a['k-i-arrow-chevron-down'] = !expanded && !!children,
-            _a['k-panelbar-expand'] = !expanded && !!children,
-            _a));
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
-        var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
+        var arrow = (!disabled && children)
+            ? (React.createElement(Icon, { name: expanded ? 'chevron-up' : 'chevron-down', className: classNames('k-panelbar-toggle', expanded
+                    ? 'k-panelbar-collapse'
+                    : 'k-panelbar-expand') }))
+            : null;
         var opened = (!disabled && expanded);
         var content = opened || keepItemsMounted
             ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted

package/dist/es/splitter/SplitterBar.d.ts

@@ -35,6 +35,4 @@ export declare class SplitterBar extends React.Component<SplitterBarProps, Split
     private onPrevToggle;
     private onNextToggle;
     private onKeyDown;
-    private previousArrowClass;
-    private nextArrowClass;
 }

package/dist/es/splitter/SplitterBar.js

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { classNames, Draggable, Keys } from '@progress/kendo-react-common';
+import { classNames, Draggable, Icon, Keys } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -27,9 +27,6 @@ var SplitterBar = /** @class */ (function (_super) {
             var event = data.event;
             var _a = _this.props, onDrag = _a.onDrag, index = _a.index;
             var element = _this.draggable && _this.draggable.element;
-            if (!isLast && event) {
-                event.originalEvent.preventDefault();
-            }
             if (element && !_this.isStatic && _this.isDraggable) {
                 onDrag(event, element, index, isFirst, isLast);
             }
@@ -93,34 +90,6 @@ var SplitterBar = /** @class */ (function (_super) {
                 }
             }
         };
-        _this.previousArrowClass = function (isHorizontal) {
-            var _a;
-            var prev = _this.props.prev;
-            var isCollapsible = prev.collapsible;
-            var isCollapsed = prev.collapsed;
-            return classNames('k-icon', (_a = {},
-                _a['k-hidden'] = !isCollapsible,
-                _a['k-collapse-prev'] = isCollapsible,
-                _a['k-i-arrow-60-left'] = isCollapsible && isHorizontal && !isCollapsed,
-                _a['k-i-arrow-60-right'] = isCollapsible && isHorizontal && isCollapsed,
-                _a['k-i-arrow-60-up'] = isCollapsible && !isHorizontal && !isCollapsed,
-                _a['k-i-arrow-60-down'] = isCollapsible && !isHorizontal && isCollapsed,
-                _a));
-        };
-        _this.nextArrowClass = function (isHorizontal) {
-            var _a;
-            var next = _this.props.next;
-            var isCollapsible = next.collapsible;
-            var isCollapsed = next.collapsed;
-            return classNames('k-icon', (_a = {},
-                _a['k-hidden'] = !isCollapsible,
-                _a['k-collapse-next'] = isCollapsible,
-                _a['k-i-arrow-60-right'] = isCollapsible && isHorizontal && !isCollapsed,
-                _a['k-i-arrow-60-left'] = isCollapsible && isHorizontal && isCollapsed,
-                _a['k-i-arrow-60-down'] = isCollapsible && !isHorizontal && !isCollapsed,
-                _a['k-i-arrow-60-up'] = isCollapsible && !isHorizontal && isCollapsed,
-                _a));
-        };
         _this.state = {
             focused: false
         };
@@ -168,13 +137,29 @@ var SplitterBar = /** @class */ (function (_super) {
             _a['k-splitbar-static-horizontal'] = isHorizontal && isStatic,
             _a['k-splitbar-static-vertical'] = !isHorizontal && isStatic,
             _a));
-        var previousArrowClass = this.previousArrowClass(isHorizontal);
-        var nextArrowClass = this.nextArrowClass(isHorizontal);
         return (React.createElement(Draggable, { onPress: function (event) { return _this.onDrag(event, true, false); }, onDrag: function (event) { return _this.onDrag(event, false, false); }, onRelease: function (event) { return _this.onDrag(event, false, true); }, ref: function (component) { _this.draggable = component; } },
             React.createElement("div", { tabIndex: isStatic ? -1 : 0, role: 'separator', className: barClasses, style: { touchAction: 'none' }, onFocus: this.onFocus, onBlur: this.onBlur, onDoubleClick: this.onToggle, onKeyDown: this.onKeyDown },
-                React.createElement("div", { className: previousArrowClass, onClick: this.onPrevToggle }),
+                this.props.prev.collapsible && React.createElement("div", { className: 'k-collapse-prev', onClick: this.onPrevToggle },
+                    React.createElement(Icon, { name: this.props.prev.collapsible
+                            ? isHorizontal
+                                ? this.props.prev.collapsed
+                                    ? 'caret-alt-right'
+                                    : 'caret-alt-left'
+                                : this.props.prev.collapsed
+                                    ? 'caret-alt-down'
+                                    : 'caret-alt-up'
+                            : undefined })),
                 React.createElement("div", { className: 'k-resize-handle' }),
-                React.createElement("div", { className: nextArrowClass, onClick: this.onNextToggle }))));
+                this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
+                    React.createElement(Icon, { name: this.props.next.collapsible
+                            ? isHorizontal
+                                ? this.props.next.collapsed
+                                    ? 'caret-alt-left'
+                                    : 'caret-alt-right'
+                                : this.props.next.collapsed
+                                    ? 'caret-alt-up'
+                                    : 'caret-alt-down'
+                            : undefined })))));
     };
     return SplitterBar;
 }(React.Component));

package/dist/es/stepper/Step.js

@@ -90,15 +90,16 @@ export var Step = React.forwardRef(function (props, target) {
         'k-step-done': index < value,
         'k-step-current': current,
         'k-step-optional': optional,
-        'k-step-disabled': disabled,
-        'k-step-focus': focused,
         'k-step-error': isValid !== undefined && !isValid,
         'k-step-success': isValid
+    }, {
+        'k-disabled': disabled,
+        'k-focus': focused
     }, className); }, [index, numOfSteps, value, current, optional, disabled, focused, isValid, className]);
     var itemStyles = React.useMemo(function () { return (__assign({ maxWidth: !isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, maxHeight: isVertical ? "calc(100% / ".concat(numOfSteps, ")") : undefined, pointerEvents: !allowClick ? 'none' : undefined }, style)); }, [isVertical, numOfSteps, style, allowClick]);
     var validationIconClasses = (isValid
-        ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check'
-        : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-warning');
+        ? successIcon ? "".concat(successIcon) : 'k-icon k-i-check-circle'
+        : errorIcon ? "".concat(errorIcon) : 'k-icon k-i-exclamation-circle');
     var validationIcons = (React.createElement("span", { className: 'k-step-indicator-icon ' + validationIconClasses, "aria-hidden": "true" }));
     var stepIndicator = (React.createElement(React.Fragment, null, mode !== 'labels' ?
         React.createElement("span", { className: "k-step-indicator", "aria-hidden": true, style: { transitionDuration: progressAnimation + 'ms' } }, icon

package/dist/es/tabstrip/TabStrip.js

@@ -167,7 +167,7 @@ var TabStrip = /** @class */ (function (_super) {
         var tabProps = __assign(__assign({}, this.props), { children: this.children(), onKeyDown: this.onKeyDown, onSelect: this.onSelect });
         var tabPosition = tabProps.tabPosition, _a = tabProps.tabIndex, tabIndex = _a === void 0 ? 0 : _a;
         var bottom = tabPosition === 'bottom';
-        var componentClasses = classNames('k-tabstrip', 'k-floatwrap', {
+        var componentClasses = classNames('k-tabstrip', {
             'k-tabstrip-left': tabPosition === 'left',
             'k-tabstrip-right': tabPosition === 'right',
             'k-tabstrip-bottom': tabPosition === 'bottom',

package/dist/npm/breadcrumb/BreadcrumbDelimiter.js

@@ -13,12 +13,15 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
     (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var breadcrumbDelimiterRef = React.useRef(null);
-    React.useImperativeHandle(target, function () { return ({
-        element: breadcrumbDelimiterRef.current,
-        props: props
-    }); });
+    React.useImperativeHandle(target, function () {
+        var _a;
+        return ({
+            element: ((_a = breadcrumbDelimiterRef.current) === null || _a === void 0 ? void 0 : _a.element) || null,
+            props: props
+        });
+    });
     React.useImperativeHandle(ref, function () { return target.current; });
-    return (React.createElement("span", { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, className: (0, kendo_react_common_1.classNames)('k-icon k-i-arrow-chevron-right k-breadcrumb-delimiter-icon', props.className) }));
+    return (React.createElement(kendo_react_common_1.Icon, { ref: breadcrumbDelimiterRef, id: props.id, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", className: "k-breadcrumb-delimiter-icon" }));
 });
 var propTypes = {
     id: PropTypes.string,

package/dist/npm/expansionpanel/ExpansionPanel.js

@@ -9,13 +9,13 @@ var package_metadata_1 = require("../package-metadata");
  * Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
  */
 exports.ExpansionPanel = React.forwardRef(function (props, target) {
-    var _a;
+    var _a, _b;
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
     var elementRef = React.useRef(null);
-    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var _c = React.useState(false), focused = _c[0], setFocused = _c[1];
     var getImperativeHandle = React.useCallback(function () { return ({ element: elementRef.current }); }, []);
     React.useImperativeHandle(target, getImperativeHandle);
-    var _c = props.expanded, expanded = _c === void 0 ? false : _c, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
+    var _d = props.expanded, expanded = _d === void 0 ? false : _d, disabled = props.disabled, title = props.title, subtitle = props.subtitle, onAction = props.onAction, expandIcon = props.expandIcon, collapseIcon = props.collapseIcon;
     var onClick = React.useCallback(function (event) {
         (0, kendo_react_common_1.dispatchEvent)(onAction, event, getImperativeHandle(), { expanded: expanded });
     }, [onAction, expanded]);
@@ -37,7 +37,7 @@ exports.ExpansionPanel = React.forwardRef(function (props, target) {
         }
         setFocused(false);
     }, [props.disabled]);
-    var _d = (0, kendo_react_common_1.useAsyncFocusBlur)({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _d.onFocus, onBlur = _d.onBlur;
+    var _e = (0, kendo_react_common_1.useAsyncFocusBlur)({ onFocus: handleFocus, onBlur: handleBlur }), onFocus = _e.onFocus, onBlur = _e.onBlur;
     return (React.createElement("div", { ref: elementRef, className: (0, kendo_react_common_1.classNames)('k-expander', props.className, {
             'k-expanded': expanded,
             'k-focus': focused && !disabled,
@@ -48,14 +48,14 @@ exports.ExpansionPanel = React.forwardRef(function (props, target) {
             React.createElement("span", { className: "k-spacer" }),
             subtitle !== undefined ? React.createElement("div", { className: "k-expander-sub-title" }, subtitle) : undefined,
             React.createElement("span", { className: "k-expander-indicator" },
-                React.createElement("span", { className: (0, kendo_react_common_1.classNames)((_a = {},
-                        // expand icon
-                        _a[String(expandIcon)] = Boolean(!expanded && expandIcon),
-                        _a['k-icon k-i-arrow-chevron-down'] = !expanded && !expandIcon,
-                        // collapse icon
-                        _a[String(collapseIcon)] = Boolean(expanded && collapseIcon),
-                        _a['k-icon k-i-arrow-chevron-up'] = expanded && !collapseIcon,
-                        _a)) }))),
+                React.createElement(kendo_react_common_1.Icon, { name: !expanded
+                        ? !expandIcon ? 'chevron-down' : undefined
+                        : !collapseIcon ? 'chevron-up' : undefined, className: (0, kendo_react_common_1.classNames)(expanded
+                        ? (_a = {},
+                            _a[String(collapseIcon)] = Boolean(collapseIcon),
+                            _a) : (_b = {},
+                        _b[String(expandIcon)] = Boolean(expandIcon),
+                        _b)) }))),
         props.children));
 });
 exports.ExpansionPanel.propTypes = {

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

@@ -20,15 +20,15 @@ export interface MenuItemArrowProps {
 /**
  * @hidden
  */
-export declare const downArrowClass = "k-i-arrow-60-down";
+export declare const downArrowName = "caret-alt-down";
 /**
  * @hidden
  */
-export declare const rightArrowClass = "k-i-arrow-60-right";
+export declare const rightArrowName = "caret-alt-right";
 /**
  * @hidden
  */
-export declare const leftArrowClass = "k-i-arrow-60-left";
+export declare const leftArrowName = "caret-alt-left";
 export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {}> {
     /**
      * @hidden
@@ -42,5 +42,5 @@ export declare class MenuItemArrow extends React.Component<MenuItemArrowProps, {
      * @hidden
      */
     render(): JSX.Element;
-    private getArrowClassName;
+    private getIconName;
 }

package/dist/npm/menu/components/MenuItemArrow.js

@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItemArrow = exports.leftArrowClass = exports.rightArrowClass = exports.downArrowClass = void 0;
+exports.MenuItemArrow = exports.leftArrowName = exports.rightArrowName = exports.downArrowName = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -23,15 +23,15 @@ var misc_1 = require("../utils/misc");
 /**
  * @hidden
  */
-exports.downArrowClass = 'k-i-arrow-60-down';
+exports.downArrowName = 'caret-alt-down';
 /**
  * @hidden
  */
-exports.rightArrowClass = 'k-i-arrow-60-right';
+exports.rightArrowName = 'caret-alt-right';
 /**
  * @hidden
  */
-exports.leftArrowClass = 'k-i-arrow-60-left';
+exports.leftArrowName = 'caret-alt-left';
 var MenuItemArrow = /** @class */ (function (_super) {
     __extends(MenuItemArrow, _super);
     function MenuItemArrow() {
@@ -41,17 +41,20 @@ var MenuItemArrow = /** @class */ (function (_super) {
      * @hidden
      */
     MenuItemArrow.prototype.render = function () {
-        return React.createElement("span", { className: "k-menu-expand-arrow", role: "presentation" },
-            React.createElement("span", { className: this.getArrowClassName() }));
+        return React.createElement(kendo_react_common_1.Icon, { className: 'k-menu-expand-arrow', name: this.getIconName() });
     };
-    MenuItemArrow.prototype.getArrowClassName = function () {
-        var _a;
+    MenuItemArrow.prototype.getIconName = function () {
         var childrenPosition = (0, misc_1.getChildrenPosition)(this.props.itemId, this.props.verticalMenu === true, this.props.dir === 'rtl');
-        return (0, kendo_react_common_1.classNames)('k-icon', (_a = {},
-            _a[exports.downArrowClass] = childrenPosition === 'downward',
-            _a[exports.rightArrowClass] = childrenPosition === 'rightward',
-            _a[exports.leftArrowClass] = childrenPosition === 'leftward',
-            _a));
+        switch (childrenPosition) {
+            case 'downward':
+                return exports.downArrowName;
+            case 'rightward':
+                return exports.rightArrowName;
+            case 'leftward':
+                return exports.leftArrowName;
+            default:
+                return undefined;
+        }
     };
     /**
      * @hidden

package/dist/npm/package-metadata.js

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

@@ -77,9 +77,8 @@ var PanelBarItem = /** @class */ (function (_super) {
      * @hidden
      */
     PanelBarItem.prototype.render = function () {
-        var _a;
         var _this = this;
-        var _b = this.props, id = _b.id, children = _b.children, title = _b.title, uniquePrivateKey = _b.uniquePrivateKey, disabled = _b.disabled, selected = _b.selected, focused = _b.focused, expanded = _b.expanded, className = _b.className, level = _b.level, headerClassName = _b.headerClassName, animation = _b.animation, keepItemsMounted = _b.keepItemsMounted;
+        var _a = this.props, id = _a.id, children = _a.children, title = _a.title, uniquePrivateKey = _a.uniquePrivateKey, disabled = _a.disabled, selected = _a.selected, focused = _a.focused, expanded = _a.expanded, className = _a.className, level = _a.level, headerClassName = _a.headerClassName, animation = _a.animation, keepItemsMounted = _a.keepItemsMounted;
         var panelBarItemAriaAttributes = {
             'role': 'treeitem',
             'aria-disabled': disabled,
@@ -87,25 +86,22 @@ var PanelBarItem = /** @class */ (function (_super) {
             'aria-selected': !disabled && selected,
             'aria-expanded': !disabled && expanded && !!children
         };
-        var panelBarItemClassName = (0, kendo_react_common_1.classNames)('k-item', {
+        var panelBarItemClassName = (0, kendo_react_common_1.classNames)('k-panelbar-item', {
             'k-panelbar-header': level === 0,
-            'k-panelbar-item': level !== 0,
-            'k-state-expanded': expanded && !!children
+            'k-state-expanded': expanded && !!children,
+            'k-disabled': disabled
         }, "k-level-".concat(level), className);
         var panelBarLinkClassName = (0, kendo_react_common_1.classNames)('k-link', {
             'k-selected': !disabled && selected,
-            'k-focus': !disabled && focused,
-            'k-disabled': disabled
+            'k-focus': !disabled && focused
         }, headerClassName);
-        var panelBarItemArrowClassName = (0, kendo_react_common_1.classNames)('k-panelbar-toggle', 'k-icon', (_a = {},
-            _a['k-i-arrow-chevron-up'] = expanded && !!children,
-            _a['k-panelbar-collapse'] = expanded && !!children,
-            _a['k-i-arrow-chevron-down'] = !expanded && !!children,
-            _a['k-panelbar-expand'] = !expanded && !!children,
-            _a));
         var animationStyle = { display: 'block' };
         var icon = iconElement(this.props);
-        var arrow = (!disabled && children) ? React.createElement("span", { className: panelBarItemArrowClassName }) : null;
+        var arrow = (!disabled && children)
+            ? (React.createElement(kendo_react_common_1.Icon, { name: expanded ? 'chevron-up' : 'chevron-down', className: (0, kendo_react_common_1.classNames)('k-panelbar-toggle', expanded
+                    ? 'k-panelbar-collapse'
+                    : 'k-panelbar-expand') }))
+            : null;
         var opened = (!disabled && expanded);
         var content = opened || keepItemsMounted
             ? (React.createElement("ul", { role: "group", className: "k-panelbar-group k-panel k-group", style: { display: keepItemsMounted

package/dist/npm/splitter/SplitterBar.d.ts

@@ -35,6 +35,4 @@ export declare class SplitterBar extends React.Component<SplitterBarProps, Split
     private onPrevToggle;
     private onNextToggle;
     private onKeyDown;
-    private previousArrowClass;
-    private nextArrowClass;
 }