@progress/kendo-react-grid 5.16.0-dev.202307201227 → 5.16.0-dev.202307241523

package/dist/es/Grid.d.ts

@@ -114,6 +114,7 @@ export declare class Grid extends React.Component<GridProps> {
     private _data;
     private _slicedData;
     private wrapperScrollTop;
+    private showLicenseWatermark;
     /**
      * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
      *

package/dist/es/Grid.js

@@ -59,7 +59,7 @@ import { operators } from './filterCommon';
 import { FooterRow } from './footer/FooterRow';
 import { normalize } from './paging/GridPagerSettings';
 import { pagerMessagesMap } from './messages';
-import { validatePackage } from '@progress/kendo-react-common';
+import { validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
 import { packageMetadata } from './package-metadata';
 import { GridDetailCell } from './cells/GridDetailCell';
 import { GridDetailHierarchyCell } from './cells/GridDetailHierarchyCell';
@@ -106,6 +106,7 @@ var Grid = /** @class */ (function (_super) {
         _this._data = [];
         _this._slicedData = undefined;
         _this.wrapperScrollTop = 0;
+        _this.showLicenseWatermark = false;
         _this.headerRef = React.createRef();
         _this.headerElementRef = React.createRef();
         _this._element = null;
@@ -443,6 +444,7 @@ var Grid = /** @class */ (function (_super) {
             return _this._data.filter(function (item) { return item.rowType === 'data'; }).map(function (item) { return item.dataItem; });
         };
         validatePackage(packageMetadata);
+        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
         var groupable = _this.props.groupable === true ||
             (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
         var VS = _this.getVirtualScroll(props);
@@ -593,7 +595,7 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.render = function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var _this = this;
         var total = this.props.total || 0;
         var idPrefix = navigationTools.getIdPrefix(this.navigationStateRef);
@@ -607,7 +609,7 @@ var Grid = /** @class */ (function (_super) {
             total = total || this.props.data.total;
         }
         var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        var _d = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _d.resolvedGroupsCount, flattedData = _d.flattedData;
+        var _e = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _e.resolvedGroupsCount, flattedData = _e.flattedData;
         this._data = flattedData;
         var groupable = this.props.groupable === true ||
             (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
@@ -624,17 +626,17 @@ var Grid = /** @class */ (function (_super) {
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
-        var _e = this.props, sort = _e.sort, sortable = _e.sortable, group = _e.group, filter = _e.filter, filterable = _e.filterable, _f = _e.filterOperators, filterOperators = _f === void 0 ? operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
+        var _f = this.props, sort = _f.sort, sortable = _f.sortable, group = _f.group, filter = _f.filter, filterable = _f.filterable, _g = _f.filterOperators, filterOperators = _g === void 0 ? operators : _g, headerCellRender = _f.headerCellRender, columnMenu = _f.columnMenu;
         var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _g = tableColumnsVirtualization({
+        var _h = tableColumnsVirtualization({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _g.colSpans, isColHidden = _g.hiddenColumns;
+        }), colSpans = _h.colSpans, isColHidden = _h.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
             var selectedValue = _this.props.selectedField ? getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
@@ -759,7 +761,7 @@ var Grid = /** @class */ (function (_super) {
                     React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                             _this.tableElement = table;
                         } },
-                        React.createElement("table", { style: { userSelect: tableUserSelect, display: tableDisplay } },
+                        React.createElement("table", { className: classNames('k-table k-grid-table', (_b = {}, _b["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size, _b)), style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
                             React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, tableKeyboardNavigationBodyAttributes), body),
@@ -777,12 +779,12 @@ var Grid = /** @class */ (function (_super) {
             }
         }
         return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: classNames('k-grid', (_b = {
+            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: classNames('k-grid', (_c = {
                         'k-grid-md': !this.props.size
                     },
-                    _b["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                    _b['k-grid-virtual'] = this.props.scrollable === 'virtual',
-                    _b), this.props.className), ref: function (el) {
+                    _c["k-grid-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _c['k-grid-virtual'] = this.props.scrollable === 'virtual',
+                    _c), this.props.className), ref: function (el) {
                     _this._element = el;
                 }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, tableKeyboardNavigationScopeAttributes),
                 toolbar,
@@ -794,11 +796,11 @@ var Grid = /** @class */ (function (_super) {
                             React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                                     _this.tableElement = table;
                                 } },
-                                React.createElement("table", { className: classNames('k-table k-grid-table', (_c = {
+                                React.createElement("table", { className: classNames('k-table k-grid-table', (_d = {
                                             'k-table-md': !this.props.size
                                         },
-                                        _c["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                        _c)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                        _d["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                        _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
                                     colGroups,
                                     React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
@@ -808,7 +810,8 @@ var Grid = /** @class */ (function (_super) {
                 this.props.pageable && pager,
                 enableDragClues && (React.createElement(React.Fragment, null,
                     React.createElement(DropClue, { ref: this.dragLogic.refDropElementClue }),
-                    React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }))))));
+                    React.createElement(DragClue, { ref: this.dragLogic.refDragElementClue }))),
+                this.showLicenseWatermark && React.createElement(WatermarkOverlay, null))));
     };
     Grid.prototype.selectionChange = function (options) {
         if (this.props.onSelectionChange) {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1689854301,
+    publishDate: 1690210928,
     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/Grid.d.ts

@@ -114,6 +114,7 @@ export declare class Grid extends React.Component<GridProps> {
     private _data;
     private _slicedData;
     private wrapperScrollTop;
+    private showLicenseWatermark;
     /**
      * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref` callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console.
      *

package/dist/npm/Grid.js

@@ -109,6 +109,7 @@ var Grid = /** @class */ (function (_super) {
         _this._data = [];
         _this._slicedData = undefined;
         _this.wrapperScrollTop = 0;
+        _this.showLicenseWatermark = false;
         _this.headerRef = React.createRef();
         _this.headerElementRef = React.createRef();
         _this._element = null;
@@ -446,6 +447,7 @@ var Grid = /** @class */ (function (_super) {
             return _this._data.filter(function (item) { return item.rowType === 'data'; }).map(function (item) { return item.dataItem; });
         };
         (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+        _this.showLicenseWatermark = (0, kendo_react_common_2.shouldShowValidationUI)(package_metadata_1.packageMetadata);
         var groupable = _this.props.groupable === true ||
             (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
         var VS = _this.getVirtualScroll(props);
@@ -596,7 +598,7 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.render = function () {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         var _this = this;
         var total = this.props.total || 0;
         var idPrefix = kendo_react_data_tools_1.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);
@@ -610,7 +612,7 @@ var Grid = /** @class */ (function (_super) {
             total = total || this.props.data.total;
         }
         var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
-        var _d = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _d.resolvedGroupsCount, flattedData = _d.flattedData;
+        var _e = this.flatData(propsData, groupingFooter, this.props.skip || 0, this.props.group, this.props.expandField, this.props.filter, this.props.sort), resolvedGroupsCount = _e.resolvedGroupsCount, flattedData = _e.flattedData;
         this._data = flattedData;
         var groupable = this.props.groupable === true ||
             (typeof this.props.groupable === 'object') && this.props.groupable.enabled !== false;
@@ -627,17 +629,17 @@ var Grid = /** @class */ (function (_super) {
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
-        var _e = this.props, sort = _e.sort, sortable = _e.sortable, group = _e.group, filter = _e.filter, filterable = _e.filterable, _f = _e.filterOperators, filterOperators = _f === void 0 ? filterCommon_1.operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
+        var _f = this.props, sort = _f.sort, sortable = _f.sortable, group = _f.group, filter = _f.filter, filterable = _f.filterable, _g = _f.filterOperators, filterOperators = _g === void 0 ? filterCommon_1.operators : _g, headerCellRender = _f.headerCellRender, columnMenu = _f.columnMenu;
         var header = (React.createElement(Header_1.Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _g = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
+        var _h = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _g.colSpans, isColHidden = _g.hiddenColumns;
+        }), colSpans = _h.colSpans, isColHidden = _h.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
             var selectedValue = _this.props.selectedField ? (0, index_1.getNestedValue)(_this.props.selectedField, item.dataItem) : undefined;
@@ -762,7 +764,7 @@ var Grid = /** @class */ (function (_super) {
                     React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                             _this.tableElement = table;
                         } },
-                        React.createElement("table", { style: { userSelect: tableUserSelect, display: tableDisplay } },
+                        React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_b = {}, _b["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size, _b)), style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
                             React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body),
@@ -780,12 +782,12 @@ var Grid = /** @class */ (function (_super) {
             }
         }
         return (React.createElement(kendo_react_data_tools_1.TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: (0, kendo_react_common_1.classNames)('k-grid', (_b = {
+            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: (0, kendo_react_common_1.classNames)('k-grid', (_c = {
                         'k-grid-md': !this.props.size
                     },
-                    _b["k-grid-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                    _b['k-grid-virtual'] = this.props.scrollable === 'virtual',
-                    _b), this.props.className), ref: function (el) {
+                    _c["k-grid-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _c['k-grid-virtual'] = this.props.scrollable === 'virtual',
+                    _c), this.props.className), ref: function (el) {
                     _this._element = el;
                 }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 toolbar,
@@ -797,11 +799,11 @@ var Grid = /** @class */ (function (_super) {
                             React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                                     _this.tableElement = table;
                                 } },
-                                React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
+                                React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_d = {
                                             'k-table-md': !this.props.size
                                         },
-                                        _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                        _c)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                        _d["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                        _d)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
                                     colGroups,
                                     React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: this.tableBodyRef, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
@@ -811,7 +813,8 @@ var Grid = /** @class */ (function (_super) {
                 this.props.pageable && pager,
                 enableDragClues && (React.createElement(React.Fragment, null,
                     React.createElement(kendo_react_data_tools_1.DropClue, { ref: this.dragLogic.refDropElementClue }),
-                    React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue }))))));
+                    React.createElement(kendo_react_data_tools_1.DragClue, { ref: this.dragLogic.refDragElementClue }))),
+                this.showLicenseWatermark && React.createElement(kendo_react_common_2.WatermarkOverlay, null))));
     };
     Grid.prototype.selectionChange = function (options) {
         if (this.props.onSelectionChange) {

package/dist/npm/package-metadata.js

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