@progress/kendo-react-layout 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

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

@@ -9,6 +9,7 @@ export interface InternalTileProps extends TileLayoutItem {
     index: number;
     defaultPosition: TileStrictPosition;
     ignoreDrag?: (event: any) => boolean;
+    children?: React.ReactNode;
 }
 /**
  * @hidden
@@ -42,7 +43,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
         resizable: boolean;
         reorderable: boolean;
     };
-    protected readonly reorderable: boolean;
+    protected get reorderable(): boolean;
     state: {
         rtl: boolean;
     };
@@ -53,7 +54,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     dragging: boolean;
     resizing: boolean;
     element: HTMLElement | null;
-    readonly dragElement: HTMLElement;
+    get dragElement(): HTMLElement | null | undefined;
     ignoreDrag: boolean;
     pressOffset: {
         x: number;
@@ -80,7 +81,7 @@ export declare class InternalTile extends React.Component<InternalTileProps, {
     /**
      * @hidden
      */
-    getSnapshotBeforeUpdate(_: any): any;
+    getSnapshotBeforeUpdate(_: any): null;
     /**
      * @hidden
      */

package/dist/npm/tilelayout/InternalTile.js

@@ -3,10 +3,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 __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     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");
@@ -72,7 +75,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) {
@@ -141,7 +144,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;
@@ -175,7 +178,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%';
@@ -189,14 +192,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 () {
@@ -217,8 +220,8 @@ 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 card = (React.createElement("div", { ref: function (e) { _this.draggable = e ? ({ element: e }) : null; }, className: kendo_react_common_1.classNames('k-tilelayout-item k-card', { 'k-cursor-grab': this.reorderable }, this.props.className), style: __assign({ height: '100%' }, this.props.style) },
+        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: (0, kendo_react_common_1.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_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, className: this.props.hintClassName },
@@ -258,7 +261,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;
@@ -284,11 +287,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/npm/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/npm/tilelayout/ResizeHandlers.js

@@ -3,10 +3,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 __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     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");
 /**

package/dist/npm/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/npm/tilelayout/TileLayout.js

@@ -3,10 +3,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 __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     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");
@@ -98,7 +101,7 @@ var TileLayout = /** @class */ (function (_super) {
             }
             if (shouldUpdate) {
                 _this.setState({ positions: positions });
-                kendo_react_common_1.dispatchEvent(_this.props.onReposition, {}, _this, { value: positions });
+                (0, kendo_react_common_1.dispatchEvent)(_this.props.onReposition, {}, _this, { value: positions });
             }
         };
         return _this;
@@ -110,7 +113,7 @@ var TileLayout = /** @class */ (function (_super) {
         get: function () {
             return this._element;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -135,11 +138,11 @@ 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);
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: kendo_react_common_1.classNames('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(InternalTile_1.InternalTile, { key: _this.props.dataItemKey ? kendo_react_common_1.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,
+        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', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
+                return (React.createElement(InternalTile_1.InternalTile, { key: _this.props.dataItemKey ? (0, kendo_react_common_1.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)),
                     React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))));
             }) }));