@progress/kendo-react-layout 4.13.0-dev.202111230848 → 4.13.0-dev.202111291459

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637656382,
+    publishDate: 1638196973,
     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/tilelayout/TileLayout.d.ts

@@ -41,6 +41,10 @@ export interface TileLayoutProps {
      * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
      */
     rowHeight?: number | string;
+    /**
+     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
+     */
+    dataItemKey?: string;
     /**
      * The collection of items that will be rendered in the TileLayout
      * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
@@ -92,6 +96,7 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
         columns: PropTypes.Requireable<number>;
         columnWidth: PropTypes.Requireable<string | number>;
         rowHeight: PropTypes.Requireable<string | number>;
+        dataItemKey: PropTypes.Requireable<string>;
         items: PropTypes.Requireable<any[]>;
         positions: PropTypes.Requireable<any[]>;
         autoFlow: PropTypes.Requireable<string>;

package/dist/es/tilelayout/TileLayout.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, dispatchEvent } from '@progress/kendo-react-common';
+import { getter, classNames, dispatchEvent } from '@progress/kendo-react-common';
 import { InternalTile } from './InternalTile';
 /**
  * @hidden
@@ -137,7 +137,7 @@ var TileLayout = /** @class */ (function (_super) {
             : 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: 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: 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,
+                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)),
                     React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))));
             }) }));
@@ -154,6 +154,7 @@ var TileLayout = /** @class */ (function (_super) {
         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']),

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637656382,
+    publishDate: 1638196973,
     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/tilelayout/TileLayout.d.ts

@@ -41,6 +41,10 @@ export interface TileLayoutProps {
      * Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
      */
     rowHeight?: number | string;
+    /**
+     * Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
+     */
+    dataItemKey?: string;
     /**
      * The collection of items that will be rendered in the TileLayout
      * ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
@@ -92,6 +96,7 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
         columns: PropTypes.Requireable<number>;
         columnWidth: PropTypes.Requireable<string | number>;
         rowHeight: PropTypes.Requireable<string | number>;
+        dataItemKey: PropTypes.Requireable<string>;
         items: PropTypes.Requireable<any[]>;
         positions: PropTypes.Requireable<any[]>;
         autoFlow: PropTypes.Requireable<string>;

package/dist/npm/tilelayout/TileLayout.js

@@ -139,7 +139,7 @@ var TileLayout = /** @class */ (function (_super) {
             : 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: 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,
+                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,
                     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)))));
             }) }));
@@ -156,6 +156,7 @@ var TileLayout = /** @class */ (function (_super) {
         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']),