@progress/kendo-react-layout 6.1.1 → 7.0.0-develop.1

package/dist/npm/tilelayout/InternalTile.js

@@ -1,334 +0,0 @@
-"use strict";
-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 (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 __());
-    };
-})();
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InternalTile = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var ResizeHandlers_1 = require("./ResizeHandlers");
-/**
- * @hidden
- */
-var ANIMATION_DURATION = 200;
-/**
- * @hidden
- */
-var InternalTile = /** @class */ (function (_super) {
-    __extends(InternalTile, _super);
-    function InternalTile() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            rtl: false
-        };
-        _this.oldSize = {};
-        _this.draggable = null;
-        _this.dragging = false;
-        _this.resizing = false;
-        _this.element = null;
-        _this.hintElement = null;
-        _this.ignoreDrag = false;
-        _this.pressOffset = { x: 0, y: 0 };
-        _this.pressXY = { x: 0, y: 0 };
-        _this.currentTranslate = { x: 0, y: 0 };
-        _this.preventDataOps = undefined;
-        _this.handleResize = function (e, q) {
-            if (q.end) {
-                _this.handleRelease();
-                return;
-            }
-            if (!_this.element || !_this.hintElement) {
-                return;
-            }
-            var x = e.clientX;
-            var y = e.clientY;
-            _this.resizing = true;
-            var dX = (q.direction !== 'ns' ? x - _this.pressXY.x : 0) * (_this.state.rtl ? -1 : 1);
-            var dY = q.direction !== 'ew' ? y - _this.pressXY.y : 0;
-            if (_this.dragElement) {
-                if (_this.state.rtl) {
-                    _this.dragElement.style.marginLeft = -dX + 'px';
-                }
-                else {
-                    _this.dragElement.style.marginRight = -dX + 'px';
-                }
-                _this.dragElement.style.height = "calc(100% + ".concat(dY, "px)");
-            }
-            _this.hintElement.classList.add('k-layout-item-hint-resize');
-            if (_this.preventDataOps) {
-                return;
-            }
-            var col = 0;
-            var row = 0;
-            var wrapBox = _this.element.getBoundingClientRect();
-            if (dX > wrapBox.width / _this.props.defaultPosition.colSpan / 3) {
-                col = 1;
-            }
-            if (dX < -wrapBox.width / _this.props.defaultPosition.colSpan / 1.25) {
-                col = -1;
-            }
-            // vertical
-            if (dY > wrapBox.height / _this.props.defaultPosition.rowSpan / 3) {
-                row = 1;
-            }
-            if (dY < -wrapBox.height / _this.props.defaultPosition.rowSpan / 1.25) {
-                row = -1;
-            }
-            if (col !== 0 || row !== 0) {
-                _this.props.update(_this.props.index, 0, 0, row, col);
-            }
-        };
-        _this.handlePress = function (e) {
-            if (!_this.dragElement) {
-                return;
-            }
-            _this.pressXY = {
-                x: e.event.clientX,
-                y: e.event.clientY
-            };
-            _this.ignoreDrag = false;
-            if (_this.props.ignoreDrag && _this.props.ignoreDrag(e.event.originalEvent)) {
-                _this.ignoreDrag = true;
-                return;
-            }
-            if (_this.element && _this.hintElement) {
-                _this.element.style.zIndex = '10';
-                _this.hintElement.style.display = 'block';
-            }
-            _this.dragElement.classList.remove('k-cursor-grab');
-            _this.dragElement.classList.add('k-cursor-grabbing');
-            var rec = _this.dragElement.getBoundingClientRect();
-            _this.pressOffset = {
-                x: e.event.clientX - rec.x,
-                y: e.event.clientY - rec.y
-            };
-        };
-        _this.handleDrag = function (e) {
-            if (_this.ignoreDrag) {
-                return;
-            }
-            var dragElement = _this.dragElement;
-            if (e.event.originalEvent.defaultPrevented || !dragElement) {
-                return;
-            }
-            _this.dragging = true;
-            e.event.originalEvent.preventDefault();
-            var rec = dragElement.getBoundingClientRect();
-            _this.currentTranslate = {
-                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(".concat(_this.currentTranslate.x, "px, ").concat(_this.currentTranslate.y, "px)");
-            dragElement.style.transition = 'transform 0s';
-            if (_this.preventDataOps) {
-                return;
-            }
-            var col = 0;
-            var row = 0;
-            if (_this.currentTranslate.y > 0.7 * rec.height / _this.props.defaultPosition.rowSpan) {
-                row = 1;
-            }
-            if (_this.currentTranslate.y < 0.7 * -rec.height / _this.props.defaultPosition.rowSpan) {
-                row = -1;
-            }
-            if (_this.currentTranslate.x > 0.7 * rec.width / _this.props.defaultPosition.colSpan) {
-                col = 1;
-            }
-            if (_this.currentTranslate.x < 0.7 * -rec.width / _this.props.defaultPosition.colSpan) {
-                col = -1;
-            }
-            _this.props.update(_this.props.index, row, _this.state.rtl ? -col : col, 0, 0);
-        };
-        _this.handleRelease = function () {
-            _this.dragging = _this.resizing = false;
-            _this.currentTranslate = { x: 0, y: 0 };
-            if (_this.element && _this.hintElement) {
-                _this.element.style.zIndex = '1';
-                _this.hintElement.classList.remove('k-layout-item-hint-resize');
-                _this.hintElement.style.display = 'none';
-            }
-            var dragElement = _this.dragElement;
-            if (dragElement) {
-                dragElement.style.transform = 'translate(0px, 0px)';
-                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%';
-                dragElement.classList.remove('k-cursor-grabbing');
-                dragElement.classList.add('k-cursor-grab');
-            }
-        };
-        return _this;
-    }
-    Object.defineProperty(InternalTile.prototype, "reorderable", {
-        get: function () {
-            return this.props.reorderable !== undefined ? this.props.reorderable : InternalTile.defaultProps.reorderable;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(InternalTile.prototype, "dragElement", {
-        get: function () {
-            return this.draggable ? this.draggable.element : undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    InternalTile.prototype.componentDidMount = function () {
-        if (!this.element) {
-            return;
-        }
-        if (getComputedStyle(this.element).direction === 'rtl') {
-            this.setState({
-                rtl: true
-            });
-        }
-        if (this.hintElement) {
-            this.hintElement.style.height = this.element.offsetHeight + 'px';
-            this.hintElement.style.width = this.element.offsetWidth + 'px';
-        }
-    };
-    InternalTile.prototype.render = function () {
-        var _this = this;
-        if (clearTimeout && typeof (clearTimeout) === 'function') {
-            clearTimeout(this.preventDataOps);
-            this.preventDataOps = window.setTimeout(function () { _this.preventDataOps = undefined; }, 200);
-        }
-        var position = this.props.defaultPosition;
-        var resizable = this.props.resizable !== undefined ? this.props.resizable : InternalTile.defaultProps.resizable;
-        var hintItemStyles = __assign({ gridColumnStart: position.col, gridColumnEnd: "span ".concat(position.colSpan), gridRowStart: position.row, gridRowEnd: "span ".concat(position.rowSpan), outline: 'none', order: position.order, display: 'none' }, this.props.hintStyle);
-        var itemStyles = {
-            gridColumnStart: position.col,
-            gridColumnEnd: "span ".concat(position.colSpan),
-            gridRowStart: position.row,
-            gridRowEnd: "span ".concat(position.rowSpan),
-            order: position.order
-        };
-        var card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: (0, kendo_react_common_1.classNames)('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign(__assign({ height: '100%' }, itemStyles), this.props.style) },
-            this.props.children,
-            React.createElement(ResizeHandlers_1.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 },
-            React.createElement("div", { ref: function (e) { _this.hintElement = e; }, style: __assign({ position: 'absolute' }, hintItemStyles), className: (0, kendo_react_common_1.classNames)('k-layout-item-hint', this.props.hintClassName) }),
-            React.createElement(kendo_react_common_1.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
-     */
-    InternalTile.prototype.getSnapshotBeforeUpdate = function (_) {
-        this.oldSize = {};
-        if (this.dragElement) {
-            this.oldSize = this.dragElement.getBoundingClientRect();
-        }
-        return null;
-    };
-    /**
-     * @hidden
-     */
-    InternalTile.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        var dragElement = this.dragElement;
-        if (!dragElement) {
-            return;
-        }
-        var newBox = dragElement.getBoundingClientRect();
-        var oldBox = this.oldSize;
-        if (this.resizing) {
-            var diffCol = newBox.width - oldBox.width;
-            if (this.state.rtl) {
-                var currentM = parseFloat(dragElement.style.marginLeft || '0');
-                dragElement.style.marginLeft = (currentM - diffCol) + 'px';
-            }
-            else {
-                var currentM = parseFloat(dragElement.style.marginRight || '0');
-                dragElement.style.marginRight = (currentM + diffCol) + 'px';
-            }
-            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% + ".concat((currentBot + diffRow), "px)");
-            this.pressXY.y += diffRow;
-        }
-        var deltaX = oldBox.left - newBox.left;
-        var deltaY = oldBox.top - newBox.top;
-        if (deltaX === 0 && deltaY === 0) {
-            return;
-        }
-        if (this.dragging) {
-            if ((prevProps.defaultPosition.order !== this.props.defaultPosition.order ||
-                prevProps.defaultPosition.col !== this.props.defaultPosition.col)) {
-                this.currentTranslate.x = 0;
-                this.currentTranslate.y = 0;
-                dragElement.style.transform = '';
-            }
-            return;
-        }
-        if (Math.abs(deltaY) < 15 && Math.abs(deltaX) < 15) {
-            // improves performance and removes random flickering
-            return;
-        }
-        requestAnimationFrame(function () {
-            var domNode = _this.element;
-            if (!domNode) {
-                return;
-            }
-            domNode.style.transform = "translate(".concat(deltaX, "px, ").concat(deltaY, "px)");
-            domNode.style.transition = 'transform 0s';
-            requestAnimationFrame(function () {
-                domNode.style.transform = '';
-                domNode.style.transition = "transform ".concat(ANIMATION_DURATION, "ms cubic-bezier(0.2, 0, 0, 1) 0s");
-            });
-        });
-    };
-    /**
-     * @hidden
-     */
-    InternalTile.propTypes = {
-        defaultPosition: PropTypes.object.isRequired,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        hintStyle: PropTypes.object,
-        hintClassName: PropTypes.string,
-        header: PropTypes.any,
-        body: PropTypes.any,
-        item: PropTypes.any,
-        resizable: PropTypes.oneOf(['horizontal', 'vertical', true, false]),
-        reorderable: PropTypes.bool
-    };
-    /**
-     * @hidden
-     */
-    InternalTile.displayName = 'KendoTileLayoutItem';
-    /**
-     * @hidden
-     */
-    InternalTile.defaultProps = {
-        resizable: true,
-        reorderable: true
-    };
-    return InternalTile;
-}(React.Component));
-exports.InternalTile = InternalTile;

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-/**
- * @hidden
- */
-export interface ResizeHandlersProps {
-    resizable: string | boolean;
-    onResize: (e: any, args: {
-        end: boolean;
-        direction: any;
-    }) => void;
-    onPress: (e: any) => void;
-    rtl: boolean;
-}
-/**
- * @hidden
- */
-export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
-    handleResize: (event: any, isEnd: boolean, direction: any) => void;
-    render(): JSX.Element | null;
-}

package/dist/npm/tilelayout/ResizeHandlers.js

@@ -1,62 +0,0 @@
-"use strict";
-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 (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 __());
-    };
-})();
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizeHandlers = void 0;
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-/**
- * @hidden
- */
-var Handle = function (props) { return (React.createElement(kendo_react_common_1.Draggable, { onPress: props.onPress, onDrag: function (data) { props.onResize(data.event, false, props.d); }, onRelease: function (data) { props.onResize(data.event, true, props.d); } },
-    React.createElement("div", { className: 'k-resize-handle k-cursor-' + props.d + '-resize', style: __assign({ bottom: 0, right: 0 }, props.style) }))); };
-/**
- * @hidden
- */
-var ResizeHandlers = /** @class */ (function (_super) {
-    __extends(ResizeHandlers, _super);
-    function ResizeHandlers() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleResize = function (event, isEnd, direction) {
-            event.originalEvent.preventDefault();
-            _this.props.onResize(event, { end: isEnd, direction: direction });
-        };
-        return _this;
-    }
-    ResizeHandlers.prototype.render = function () {
-        var _a = this.props, resizable = _a.resizable, onPress = _a.onPress, rtl = _a.rtl;
-        if (!resizable) {
-            return null;
-        }
-        return (React.createElement(React.Fragment, null,
-            resizable !== 'vertical' && (React.createElement(Handle, { onPress: onPress, onResize: this.handleResize, d: "ew", style: rtl ? { top: 0, width: 9, left: 0, right: '' } : { top: 0, width: 9, right: 0, left: '' } })),
-            resizable !== 'horizontal' && (React.createElement(Handle, { onPress: onPress, onResize: this.handleResize, d: "ns", style: { left: 0, height: 9 } })),
-            (resizable === true) && (React.createElement(Handle, { onPress: onPress, onResize: this.handleResize, d: rtl ? 'nesw' : 'nwse', style: rtl ? { width: 9, height: 9, right: '', left: 0 } : { width: 9, height: 9, right: 0, left: '' } }))));
-    };
-    return ResizeHandlers;
-}(React.Component));
-exports.ResizeHandlers = ResizeHandlers;

package/dist/npm/tilelayout/TileLayout.js

@@ -1,181 +0,0 @@
-"use strict";
-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 (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 __());
-    };
-})();
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TileLayout = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var InternalTile_1 = require("./InternalTile");
-var package_metadata_1 = require("../package-metadata");
-/**
- * @hidden
- */
-var AUTO_FLOW_CLASSES = {
-    'column': 'k-grid-flow-col',
-    'row': 'k-grid-flow-row',
-    'column dense': 'k-grid-flow-col-dense',
-    'row dense': 'k-grid-flow-row-dense',
-    'unset': 'k-grid-flow-unset'
-};
-/**
- * Represents the [KendoReact TileLayout component]({% slug overview_tilelayout %}).
- */
-var TileLayout = /** @class */ (function (_super) {
-    __extends(TileLayout, _super);
-    function TileLayout(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this._element = null;
-        /**
-         * @hidden
-         */
-        _this.state = { positions: (_this.props.items || []).map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); }) };
-        _this.showLicenseWatermark = false;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this._element) {
-                _this._element.focus();
-            }
-        };
-        /**
-         * @hidden
-         */
-        _this.update = function (index, dOrder, dCol, dRowSpan, dColSpan) {
-            if (dRowSpan === void 0) { dRowSpan = 0; }
-            if (dColSpan === void 0) { dColSpan = 0; }
-            if (dOrder === 0 && dCol === 0 && !dColSpan && !dRowSpan) {
-                return;
-            }
-            var shouldUpdate = false;
-            var positions = _this.state.positions.map(function (p) { return Object.assign({}, p); });
-            // reordering:
-            var current = positions[index];
-            var other = positions.find(function (item) { return (item.order === current.order + dOrder); });
-            if (other && other !== current) {
-                current.order += dOrder;
-                other.order += -dOrder;
-                shouldUpdate = true;
-            }
-            var proposedCol = current.col + dCol;
-            if (dCol !== 0 && proposedCol >= 1 && proposedCol + current.colSpan <= (_this.props.columns || 3) + 1) {
-                current.col = proposedCol;
-                shouldUpdate = true;
-            }
-            // resizing:
-            var proposedColSpan = current.colSpan + dColSpan;
-            if (dColSpan && proposedColSpan >= 1 && proposedColSpan + current.col <= (_this.props.columns || 3) + 1) {
-                current.colSpan = proposedColSpan;
-                shouldUpdate = true;
-            }
-            var proposedRowSpan = current.rowSpan + dRowSpan;
-            if (dRowSpan && proposedRowSpan >= 1) {
-                current.rowSpan = proposedRowSpan;
-                shouldUpdate = true;
-            }
-            if (shouldUpdate) {
-                _this.setState({ positions: positions });
-                (0, kendo_react_common_1.dispatchEvent)(_this.props.onReposition, {}, _this, { value: positions });
-            }
-        };
-        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
-        _this.showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(TileLayout.prototype, "element", {
-        /**
-         * Gets the HTML element of the TileLayout component.
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    TileLayout.getDerivedStateFromProps = function (props, state) {
-        if (props.positions) {
-            // The component is in controlled mode.
-            return {
-                positions: props.positions.map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p)); })
-            };
-        }
-        if (props.items && (!state.positions || (props.items.length !== state.positions.length))) {
-            // The component is in uncontrolled mode.
-            return {
-                positions: props.items.map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); })
-            };
-        }
-        return null;
-    };
-    TileLayout.prototype.render = function () {
-        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
-            ? "".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(".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: (0, kendo_react_common_1.classNames)('k-tilelayout k-pos-relative', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(React.Fragment, { key: _this.props.dataItemKey ? (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(tile) : index },
-                    React.createElement(InternalTile_1.InternalTile, { 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)),
-                        React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))),
-                    _this.showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
-            }) }));
-    };
-    /**
-     * @hidden
-     */
-    TileLayout.propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        dir: PropTypes.string,
-        gap: PropTypes.object,
-        columns: PropTypes.number,
-        columnWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        dataItemKey: PropTypes.string,
-        items: PropTypes.array,
-        positions: PropTypes.array,
-        autoFlow: PropTypes.oneOf(['column', 'row', 'column dense', 'row dense', 'unset']),
-        onReposition: PropTypes.func,
-        ignoreDrag: PropTypes.func
-    };
-    /**
-     * @hidden
-     */
-    TileLayout.displayName = 'KendoTileLayout';
-    return TileLayout;
-}(React.Component));
-exports.TileLayout = TileLayout;