@progress/kendo-react-layout 5.4.0-dev.202205250548 → 5.4.0-dev.202206081230

package/dist/es/tilelayout/InternalTile.js

@@ -2,10 +2,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -70,7 +72,7 @@ var InternalTile = /** @class */ (function (_super) {
                 else {
                     _this.dragElement.style.marginRight = -dX + 'px';
                 }
-                _this.dragElement.style.height = "calc(100% + " + dY + "px)";
+                _this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
             }
             _this.element.classList.add('k-layout-item-hint', 'k-layout-item-hint-resize');
             if (_this.preventDataOps) {
@@ -97,9 +99,6 @@ var InternalTile = /** @class */ (function (_super) {
             }
         };
         _this.handlePress = function (e) {
-            if (!_this.reorderable) {
-                return;
-            }
             if (!_this.dragElement) {
                 return;
             }
@@ -125,7 +124,7 @@ var InternalTile = /** @class */ (function (_super) {
             };
         };
         _this.handleDrag = function (e) {
-            if (!_this.reorderable || _this.ignoreDrag) {
+            if (_this.ignoreDrag) {
                 return;
             }
             var dragElement = _this.dragElement;
@@ -139,7 +138,7 @@ var InternalTile = /** @class */ (function (_super) {
                 x: e.event.clientX - rec.x - _this.pressOffset.x + _this.currentTranslate.x,
                 y: e.event.clientY - rec.y - _this.pressOffset.y + _this.currentTranslate.y
             };
-            dragElement.style.transform = "translate(" + _this.currentTranslate.x + "px, " + _this.currentTranslate.y + "px)";
+            dragElement.style.transform = "translate(".concat(_this.currentTranslate.x, "px, ").concat(_this.currentTranslate.y, "px)");
             dragElement.style.transition = 'transform 0s';
             if (_this.preventDataOps) {
                 return;
@@ -161,9 +160,6 @@ var InternalTile = /** @class */ (function (_super) {
             _this.props.update(_this.props.index, row, _this.state.rtl ? -col : col, 0, 0);
         };
         _this.handleRelease = function () {
-            if (!_this.reorderable) {
-                return;
-            }
             _this.dragging = _this.resizing = false;
             _this.currentTranslate = { x: 0, y: 0 };
             if (_this.element) {
@@ -173,7 +169,7 @@ var InternalTile = /** @class */ (function (_super) {
             var dragElement = _this.dragElement;
             if (dragElement) {
                 dragElement.style.transform = 'translate(0px, 0px)';
-                dragElement.style.transition = "transform " + ANIMATION_DURATION + "ms cubic-bezier(0.2, 0, 0, 1) 0s";
+                dragElement.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
                 dragElement.style.marginRight = '0px';
                 dragElement.style.marginLeft = '0px';
                 dragElement.style.height = '100%';
@@ -187,14 +183,14 @@ var InternalTile = /** @class */ (function (_super) {
         get: function () {
             return this.props.reorderable !== undefined ? this.props.reorderable : InternalTile.defaultProps.reorderable;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(InternalTile.prototype, "dragElement", {
         get: function () {
             return this.draggable ? this.draggable.element : undefined;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     InternalTile.prototype.componentDidMount = function () {
@@ -215,12 +211,12 @@ var InternalTile = /** @class */ (function (_super) {
         }
         var position = this.props.defaultPosition;
         var resizable = this.props.resizable !== undefined ? this.props.resizable : InternalTile.defaultProps.resizable;
-        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span " + position.colSpan, gridRowStart: position.row, gridRowEnd: "span " + position.rowSpan, outline: 'none', order: position.order }, this.props.hintStyle);
+        var itemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order }, this.props.hintStyle);
         var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: classNames('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
             this.props.children,
             React.createElement(ResizeHandlers, { onPress: this.handlePress, onResize: this.handleResize, resizable: resizable, rtl: this.state.rtl })));
         return (React.createElement("div", { ref: function (e) { _this.element = e; }, style: itemStyles, className: this.props.hintClassName },
-            React.createElement(Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.handleDrag, onRelease: this.handleRelease, onPress: this.handlePress }, card)));
+            React.createElement(Draggable, { ref: function (e) { _this.draggable = e; }, onDrag: this.props.reorderable ? this.handleDrag : undefined, onRelease: this.props.reorderable ? this.handleRelease : undefined, onPress: this.props.reorderable ? this.handlePress : undefined }, card)));
     };
     /**
      * @hidden
@@ -256,7 +252,7 @@ var InternalTile = /** @class */ (function (_super) {
             this.pressXY.x += this.state.rtl ? -diffCol : diffCol;
             var diffRow = newBox.height - oldBox.height;
             var currentBot = parseFloat(dragElement.style.height.substring(12));
-            dragElement.style.height = "calc(100% + " + (currentBot + diffRow) + "px)";
+            dragElement.style.height = "calc(100% + ".concat((currentBot + diffRow), "px)");
             this.pressXY.y += diffRow;
         }
         var deltaX = oldBox.left - newBox.left;
@@ -282,11 +278,11 @@ var InternalTile = /** @class */ (function (_super) {
             if (!domNode) {
                 return;
             }
-            domNode.style.transform = "translate(" + deltaX + "px, " + deltaY + "px)";
+            domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
             domNode.style.transition = 'transform 0s';
             requestAnimationFrame(function () {
                 domNode.style.transform = '';
-                domNode.style.transition = "transform " + ANIMATION_DURATION + "ms cubic-bezier(0.2, 0, 0, 1) 0s";
+                domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
             });
         });
     };

package/dist/es/tilelayout/ResizeHandlers.d.ts

@@ -16,5 +16,5 @@ export interface ResizeHandlersProps {
  */
 export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
     handleResize: (event: any, isEnd: boolean, direction: any) => void;
-    render(): JSX.Element;
+    render(): JSX.Element | null;
 }

package/dist/es/tilelayout/ResizeHandlers.js

@@ -2,10 +2,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());

package/dist/es/tilelayout/TileLayout.d.ts

@@ -124,7 +124,7 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
     /**
      * Gets the HTML element of the TileLayout component.
      */
-    readonly element: HTMLDivElement | null;
+    get element(): HTMLDivElement | null;
     /**
      * @hidden
      */
@@ -138,7 +138,7 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
             rowSpan: number;
             colSpan: number;
         } & TilePosition)[];
-    };
+    } | null;
     /**
      * @hidden
      */

package/dist/es/tilelayout/TileLayout.js

@@ -2,10 +2,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -108,7 +110,7 @@ var TileLayout = /** @class */ (function (_super) {
         get: function () {
             return this._element;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -133,9 +135,9 @@ var TileLayout = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? '1fr' : _c, gap = _a.gap, _d = _a.rowHeight, rowHeight = _d === void 0 ? '1fr' : _d, style = _a.style, _e = _a.autoFlow, autoFlow = _e === void 0 ? 'column' : _e, _f = _a.items, items = _f === void 0 ? [] : _f;
         var gapValue = gap
-            ? "" + (typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + ("" + (typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns))
+            ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns)
             : 16;
-        var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(" + columns + ", minmax(0px, " + (typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth) + "))", gridAutoRows: "minmax(0px, " + (typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight) + ")", gap: gapValue, padding: gapValue }, style);
+        var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"), gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"), gap: gapValue, padding: gapValue }, style);
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: classNames('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
                 return (React.createElement(InternalTile, { key: _this.props.dataItemKey ? getter(_this.props.dataItemKey)(tile) : index, update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),

package/dist/es/tilelayout/interfaces/main.js

@@ -0,0 +1 @@
+export {};

package/dist/npm/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/npm/appbar/AppBar.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBar = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -40,12 +41,12 @@ var package_metadata_1 = require("../package-metadata");
  * ```
  */
 exports.AppBar = React.forwardRef(function (props, target) {
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var children = props.children, className = props.className, style = props.style, id = props.id;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_1.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -53,11 +54,11 @@ exports.AppBar = React.forwardRef(function (props, target) {
         focus: focusElement
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
+    var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var themeColor = React.useMemo(function () { return props.themeColor || defaultProps.themeColor; }, [props.themeColor]);
     var position = React.useMemo(function () { return props.position || defaultProps.position; }, [props.position]);
     var positionMode = React.useMemo(function () { return props.positionMode || defaultProps.positionMode; }, [props.positionMode]);
-    var appbarClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-appbar', {
+    var appbarClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-appbar', {
         'k-appbar-top': position === 'top',
         'k-appbar-bottom': position === 'bottom',
         'k-appbar-static': positionMode === 'static',

package/dist/npm/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/npm/appbar/AppBarSection.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBarSection = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -41,7 +42,7 @@ exports.AppBarSection = React.forwardRef(function (props, target) {
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_1.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -49,7 +50,7 @@ exports.AppBarSection = React.forwardRef(function (props, target) {
         focus: focusElement
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var sectionClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-appbar-section', className); }, [className]);
+    var sectionClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-appbar-section', className); }, [className]);
     return (React.createElement("div", { className: sectionClasses, style: style }, children));
 });
 exports.AppBarSection.propTypes = {

package/dist/npm/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/npm/appbar/AppBarSpacer.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppBarSpacer = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -42,7 +43,7 @@ exports.AppBarSpacer = React.forwardRef(function (props, target) {
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_1.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_1.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -50,7 +51,7 @@ exports.AppBarSpacer = React.forwardRef(function (props, target) {
         focus: focusElement
     }); }, [focusElement]);
     React.useImperativeHandle(target, getImperativeHandle);
-    var spacerClasses = React.useMemo(function () { return kendo_react_common_1.classNames('k-appbar-spacer', {
+    var spacerClasses = React.useMemo(function () { return (0, kendo_react_common_1.classNames)('k-appbar-spacer', {
         'k-appbar-spacer-sized': style && style.width && style.width !== null
     }, className); }, [className, style]);
     var spacerStyles = React.useMemo(function () {

package/dist/npm/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/npm/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/npm/bottomnavigation/BottomNavigation.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomNavigation = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -40,11 +41,11 @@ var BottomNavigationItem_1 = require("./BottomNavigationItem");
  * ```
  */
 exports.BottomNavigation = React.forwardRef(function (props, ref) {
-    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
         if (elementRef.current) {
-            kendo_react_common_2.focusFirstFocusableChild(elementRef.current);
+            (0, kendo_react_common_2.focusFirstFocusableChild)(elementRef.current);
         }
     }, []);
     var getImperativeHandle = React.useCallback(function () { return ({
@@ -53,9 +54,9 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
     }); }, [focusElement]);
     React.useImperativeHandle(ref, getImperativeHandle);
     var _a = props.themeColor, themeColor = _a === void 0 ? defaultProps.themeColor : _a, _b = props.fill, fill = _b === void 0 ? defaultProps.fill : _b, _c = props.positionMode, positionMode = _c === void 0 ? defaultProps.positionMode : _c, _d = props.itemFlow, itemFlow = _d === void 0 ? defaultProps.itemFlow : _d, _e = props.border, border = _e === void 0 ? defaultProps.border : _e, className = props.className, items = props.items, item = props.item, itemRender = props.itemRender, disabled = props.disabled, style = props.style, id = props.id, onSelect = props.onSelect, onKeyDown = props.onKeyDown;
-    var navId = React.useMemo(function () { return kendo_react_common_2.guid(); }, []);
-    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], {
+    var navId = React.useMemo(function () { return (0, kendo_react_common_2.guid)(); }, []);
+    var dir = (0, kendo_react_common_2.useDir)(elementRef, props.dir);
+    var navClasses = React.useMemo(function () { return (0, 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-disabled': disabled
     }, className); }, [positionMode, themeColor, fill, itemFlow, border, disabled, className]);
@@ -64,7 +65,7 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
             return;
         }
         if (!items[index].disabled && onSelect) {
-            kendo_react_common_2.dispatchEvent(onSelect, dispatchedEvent, getImperativeHandle(), {
+            (0, kendo_react_common_2.dispatchEvent)(onSelect, dispatchedEvent, getImperativeHandle(), {
                 itemTarget: items[index],
                 itemIndex: index
             });
@@ -83,10 +84,10 @@ exports.BottomNavigation = React.forwardRef(function (props, ref) {
             default:
                 break;
         }
-        kendo_react_common_2.dispatchEvent(onKeyDown, event, getImperativeHandle(), undefined);
+        (0, kendo_react_common_2.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_1.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_1.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/npm/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/npm/bottomnavigation/BottomNavigationItem.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomNavigationItem = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -9,13 +10,13 @@ var kendo_react_common_2 = require("@progress/kendo-react-common");
  * Represents the [KendoReact BottomNavigationItem component]({% slug overview_bottomnavigation %}).
  */
 exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
-    kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
     var elementRef = React.useRef(null);
     React.useImperativeHandle(ref, function () { return ({
         element: elementRef.current
     }); });
     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', {
+    var itemClasses = React.useMemo(function () { return (0, kendo_react_common_2.classNames)('k-bottom-nav-item', {
         'k-selected': selected,
         'k-disabled': disabled
     }, className); }, [selected, disabled, className]);
@@ -33,7 +34,7 @@ exports.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/npm/bottomnavigation/models/utils.d.ts

@@ -2,35 +2,35 @@
  * @hidden
  */
 export declare const THEME_COLOR_CLASSES: {
-    'primary': string;
-    'secondary': string;
-    'tertiary': string;
-    'info': string;
-    'success': string;
-    'warning': string;
-    'error': string;
-    'dark': string;
-    'light': string;
-    'inverse': string;
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    info: string;
+    success: string;
+    warning: string;
+    error: string;
+    dark: string;
+    light: string;
+    inverse: string;
 };
 /**
  * @hidden
  */
 export declare const FILL_CLASSES: {
-    'flat': string;
-    'solid': string;
+    flat: string;
+    solid: string;
 };
 /**
  * @hidden
  */
 export declare const ITEM_FLOW_CLASSES: {
-    'vertical': string;
-    'horizontal': string;
+    vertical: string;
+    horizontal: string;
 };
 /**
  * @hidden
  */
 export declare const POSITION_MODE_CLASSES: {
-    'fixed': string;
-    'sticky': string;
+    fixed: string;
+    sticky: string;
 };

package/dist/npm/bottomnavigation/models/utils.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.POSITION_MODE_CLASSES = exports.ITEM_FLOW_CLASSES = exports.FILL_CLASSES = exports.THEME_COLOR_CLASSES = void 0;
 /**
  * @hidden
  */

package/dist/npm/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/npm/breadcrumb/Breadcrumb.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumb = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
@@ -24,7 +25,7 @@ var BreadcrumbOrderedList_1 = require("./BreadcrumbOrderedList");
  * Represents the Breadcrumb component.
  */
 exports.Breadcrumb = React.forwardRef(function (props, ref) {
-    kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var breadcrumbRef = React.useRef(null);
     var OrderedListComponent = React.useMemo(function () { return props.breadcrumbOrderedList || BreadcrumbOrderedList_1.BreadcrumbOrderedList; }, [props.breadcrumbOrderedList]);
@@ -43,26 +44,31 @@ exports.Breadcrumb = React.forwardRef(function (props, ref) {
         props: props
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var dir = kendo_react_common_1.useDir(breadcrumbRef, props.dir);
+    var dir = (0, kendo_react_common_1.useDir)(breadcrumbRef, props.dir);
     var handleItemSelect = function (event) {
         if (target.current) {
-            kendo_react_common_1.dispatchEvent(props.onItemSelect, event, event.target, { id: event.target.id });
+            (0, kendo_react_common_1.dispatchEvent)(props.onItemSelect, event, event.target, { id: event.target.id });
         }
     };
     var handleKeyDown = function (event) {
         if (target.current) {
-            kendo_react_common_1.dispatchEvent(props.onKeyDown, event, event.target, { id: event.target.id });
+            (0, kendo_react_common_1.dispatchEvent)(props.onKeyDown, event, event.target, { id: event.target.id });
         }
     };
-    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', {
+    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: (0, kendo_react_common_1.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/npm/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/npm/breadcrumb/BreadcrumbDelimiter.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbDelimiter = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
@@ -9,7 +10,7 @@ var package_metadata_1 = require("../package-metadata");
  * Represents the BreadcrumbDelimiter component.
  */
 exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
-    kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
+    (0, kendo_licensing_1.validatePackage)(package_metadata_1.packageMetadata);
     var target = React.useRef(null);
     var breadcrumbDelimiterRef = React.useRef(null);
     React.useImperativeHandle(target, function () { return ({
@@ -17,7 +18,7 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
         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: kendo_react_common_1.classNames('k-icon k-i-arrow-chevron-right k-breadcrumb-delimiter-icon', props.className) }));
+    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) }));
 });
 var propTypes = {
     id: PropTypes.string,
@@ -26,5 +27,4 @@ var propTypes = {
     tabIndex: PropTypes.number
 };
 exports.BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
-// TODO: delete casting when @types/react is updated!
 exports.BreadcrumbDelimiter.propTypes = propTypes;

package/dist/npm/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>>;