@progress/kendo-react-grid 5.10.0-dev.202301051045 → 5.10.0-dev.202301091032

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1672914787,
+    publishDate: 1673259545,
     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/rows/GridRow.js

@@ -40,12 +40,12 @@ var GridRow = /** @class */ (function (_super) {
      */
     GridRow.prototype.render = function () {
         var _a;
-        var className = classNames({
+        var className = classNames('k-table-row', {
             'k-grouping-row': this.props.rowType === 'groupHeader',
             'k-group-footer': this.props.rowType === 'groupFooter',
             'k-master-row': this.props.rowType !== 'groupHeader' &&
                 this.props.rowType !== 'groupFooter',
-            'k-alt': this.props.rowType !== 'groupHeader' &&
+            'k-table-alt-row k-alt': this.props.rowType !== 'groupHeader' &&
                 this.props.rowType !== 'groupFooter' &&
                 this.props.isAltRow,
             'k-selected': this.props.isSelected,

package/dist/npm/Grid.d.ts

@@ -100,6 +100,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
         onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
         dataItemKey: PropTypes.Requireable<string>;
         navigatable: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<string>;
     };
     /** @hidden */
     static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;

package/dist/npm/Grid.js

@@ -424,6 +424,7 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.render = function () {
+        var _a, _b, _c;
         var _this = this;
         var total = this.props.total || 0;
         var idPrefix = kendo_react_data_tools_1.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);
@@ -473,17 +474,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 _a = this.props, sort = _a.sort, sortable = _a.sortable, group = _a.group, filter = _a.filter, filterable = _a.filterable, _b = _a.filterOperators, filterOperators = _b === void 0 ? filterCommon_1.operators : _b, headerCellRender = _a.headerCellRender, columnMenu = _a.columnMenu;
-        var header = (React.createElement(Header_1.Header, { 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, { 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 ?
+        var _d = this.props, sort = _d.sort, sortable = _d.sortable, group = _d.group, filter = _d.filter, filterable = _d.filterable, _e = _d.filterOperators, filterOperators = _e === void 0 ? filterCommon_1.operators : _e, headerCellRender = _d.headerCellRender, columnMenu = _d.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, { 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 _c = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
+        var _f = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
             scrollLeft: scrollLeft
-        }), colSpans = _c.colSpans, isColHidden = _c.hiddenColumns;
+        }), colSpans = _f.colSpans, isColHidden = _f.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;
@@ -562,7 +563,7 @@ var Grid = /** @class */ (function (_super) {
                         - (_this.props.group ? _this.props.group.length : 0)) || 1;
                     detailRowCount_1++;
                     currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
-                    body.push((React.createElement("tr", { key: detailRowId, className: isAlt ? 'k-detail-row k-alt' : 'k-detail-row', style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
+                    body.push((React.createElement("tr", { key: detailRowId, className: (0, kendo_react_common_1.classNames)('k-table-row', isAlt ? 'k-detail-row k-table-alt-row k-alt' : 'k-detail-row'), style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
                         _this.props.group && _this.props.group.map(function (gr, idx) {
                             return (React.createElement(GridGroupCell_1.GridGroupCell, { id: '', dataIndex: item.dataIndex, field: gr.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups }));
                         }),
@@ -573,15 +574,15 @@ var Grid = /** @class */ (function (_super) {
             });
         }
         else {
-            body.push((React.createElement("tr", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": rowIndexStart },
-                React.createElement("td", { colSpan: leafColumns.length }, noRecords.length ? noRecords : React.createElement(GridNoRecords_1.GridNoRecords, null)))));
+            body.push((React.createElement("tr", { key: "no-records", className: "k-table-row k-grid-norecords", role: 'row', "aria-rowindex": rowIndexStart },
+                React.createElement("td", { className: 'k-table-td', colSpan: leafColumns.length, role: 'gridcell' }, noRecords.length ? noRecords : React.createElement(GridNoRecords_1.GridNoRecords, null)))));
         }
-        var pagerProps = __assign({ className: 'k-grid-pager', onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: messages_1.pagerMessagesMap }, ((0, GridPagerSettings_1.normalize)(this.props.pageable || {})));
-        var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(kendo_react_data_tools_1.Pager, __assign({}, pagerProps));
+        var pagerProps = __assign({ size: this.props.size, onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: messages_1.pagerMessagesMap }, ((0, GridPagerSettings_1.normalize)(this.props.pageable || {})));
+        var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(kendo_react_data_tools_1.Pager, __assign({ className: "k-grid-pager" }, pagerProps));
         var sorted = function (field) {
             return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
         };
-        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer_1.Footer, { columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.FooterRow, { columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
+        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer_1.Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.FooterRow, { columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), 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 })); }) })) : null;
         var colGroups = (React.createElement("colgroup", { ref: function (c) {
                 _this.columnResize.colGroupMain = c;
@@ -591,7 +592,11 @@ var Grid = /** @class */ (function (_super) {
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
             return (React.createElement(kendo_react_data_tools_1.TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: (0, kendo_react_common_1.classNames)('k-widget k-grid', this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
+                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: (0, kendo_react_common_1.classNames)('k-grid', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
+                        _a["k-grid-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                        _a), this.props.className), ref: function (el) { _this._element = el; }, "aria-label": this.props.ariaLabel, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
                     React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
@@ -602,7 +607,7 @@ var Grid = /** @class */ (function (_super) {
                         React.createElement("table", { style: { userSelect: tableUserSelect, display: tableDisplay } },
                             colGroups,
                             header,
-                            React.createElement("tbody", __assign({}, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body),
+                            React.createElement("tbody", __assign({ role: 'rowgroup', className: 'k-table-tbody' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body),
                             footer)),
                     this.props.pageable && pager,
                     enableDragClues && (React.createElement(React.Fragment, null,
@@ -617,9 +622,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-widget k-grid', {
-                    'k-grid-virtual': this.props.scrollable === 'virtual'
-                }, this.props.className), ref: function (el) {
+            React.createElement("div", __assign({ id: this.props.id, style: wrapperStyle, className: (0, kendo_react_common_1.classNames)('k-grid', (_b = {
+                        '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) {
                     _this._element = el;
                     _this.resetTableWidth();
                 }, 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),
@@ -628,16 +636,19 @@ var Grid = /** @class */ (function (_super) {
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
                     React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
-                        React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
-                            React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                    _this.vs.table = table;
-                                    _this.tableElement = table;
-                                } },
-                                React.createElement("table", { className: 'k-grid-table', role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                    colGroups,
-                                    React.createElement("tbody", __assign({ ref: function (tableBody) {
-                                            _this.vs.tableBody = tableBody;
-                                        }, role: "presentation" }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
+                        React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
+                                _this.vs.table = table;
+                                _this.tableElement = table;
+                            } },
+                            React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
+                                        'k-grid-md': !this.props.size
+                                    },
+                                    _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                    _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                colGroups,
+                                React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
+                                        _this.vs.tableBody = tableBody;
+                                    }, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),
@@ -870,7 +881,8 @@ var Grid = /** @class */ (function (_super) {
         onColumnResize: PropTypes.func,
         onColumnReorder: PropTypes.func,
         dataItemKey: PropTypes.string,
-        navigatable: PropTypes.bool
+        navigatable: PropTypes.bool,
+        size: PropTypes.oneOf(['small', 'medium'])
     };
     /** @hidden */
     Grid.contextType = kendo_react_data_tools_1.TableKeyboardNavigationContext;

package/dist/npm/GridToolbar.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridToolbar = void 0;
 var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * Represents the GridToolbar component.
  *
@@ -64,7 +65,10 @@ var GridToolbar = /** @class */ (function (_super) {
      * @hidden
      */
     GridToolbar.prototype.render = function () {
-        return (React.createElement("div", { className: "k-toolbar k-grid-toolbar" }, this.props.children));
+        var _a;
+        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-toolbar k-grid-toolbar', (_a = {},
+                _a["k-toolbar-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                _a), this.props.className) }, this.props.children));
     };
     /**
      * @hidden

package/dist/npm/cells/GridCell.js

@@ -34,7 +34,7 @@ var GridCell = function (props) {
                 intl.format(props.format, data) :
                 data.toString();
         }
-        var className = (0, kendo_react_common_1.classNames)(props.className, { 'k-selected': props.isSelected });
+        var className = (0, kendo_react_common_1.classNames)('k-table-td', props.className, { 'k-selected': props.isSelected });
         defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
     }
     return props.render ?

package/dist/npm/cells/GridDetailCell.js

@@ -18,7 +18,7 @@ var React = require("react");
 var GridDetailCell = function (props) {
     var colSpan = props.colSpan, ariaColIndex = props.ariaColIndex, dataItem = props.dataItem, dataIndex = props.dataIndex, id = props.id;
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(id);
-    return (React.createElement("td", __assign({ className: "k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
+    return (React.createElement("td", __assign({ className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement(props.detail, { dataItem: dataItem, dataIndex: dataIndex })));
 };
 exports.GridDetailCell = GridDetailCell;

package/dist/npm/cells/GridDetailHierarchyCell.js

@@ -17,6 +17,6 @@ var React = require("react");
 /** @hidden */
 var GridDetailHierarchyCell = function (props) {
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
-    return (React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes)));
+    return (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell" }, navigationAttributes, { role: 'gridcell' })));
 };
 exports.GridDetailHierarchyCell = GridDetailHierarchyCell;

package/dist/npm/cells/GridEditCell.js

@@ -26,7 +26,7 @@ var GridEditCell = function (props) {
     var _a, _b, _c, _d, _e;
     var data = (0, utils_1.getNestedValue)(props.field, props.dataItem);
     var defaultRendering = null;
-    var editCellClasses = (0, kendo_react_common_1.classNames)('k-grid-edit-cell', (_a = {},
+    var editCellClasses = (0, kendo_react_common_1.classNames)('k-table-td', 'k-grid-edit-cell', (_a = {},
         _a['k-selected'] = props.isSelected,
         _a), props.className);
     var inputId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);

package/dist/npm/cells/GridFilterCell.js

@@ -34,7 +34,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 return;
             }
             var value = _this.props.operators.find(function (item) { return item.operator === _this.props.operator; }) || null;
-            return (React.createElement(kendo_react_dropdowns_1.DropDownList, { value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(messages_1.filterChooseOperator, messages_1.messages[messages_1.filterChooseOperator]), popupSettings: {
+            return (React.createElement(kendo_react_dropdowns_1.DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(messages_1.filterChooseOperator, messages_1.messages[messages_1.filterChooseOperator]), popupSettings: {
                     width: ''
                 } }));
         };
@@ -51,12 +51,12 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _a;
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var defaultRendering = (React.createElement("div", { className: "k-filtercell" },
-            React.createElement("span", null,
+            React.createElement("div", { className: "k-filtercell-wrapper" },
                 this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues),
                 React.createElement("div", { className: "k-filtercell-operator" },
                     this.renderOperatorEditor(localizationService),
                     "\u00A0",
-                    React.createElement(kendo_react_buttons_1.Button, { icon: 'filter-clear', className: (0, kendo_react_common_1.classNames)((_a = {},
+                    React.createElement(kendo_react_buttons_1.Button, { size: this.props.size, icon: 'filter-clear', className: (0, kendo_react_common_1.classNames)((_a = {},
                             _a['k-clear-button-visible'] = Boolean(!(this.props.value === null || this.props.value === '') || this.props.operator),
                             _a)), title: localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton]), type: "button", onClick: this.clear, disabled: !(!(this.props.value === null || this.props.value === '') || this.props.operator) })))));
         if (this.props.render) {
@@ -81,13 +81,13 @@ var GridFilterCell = /** @class */ (function (_super) {
         var _this = this;
         switch (filterType) {
             case 'numeric':
-                return (React.createElement(kendo_react_inputs_1.NumericTextBox, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
+                return (React.createElement(kendo_react_inputs_1.NumericTextBox, { size: this.props.size, value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'date':
-                return (React.createElement(kendo_react_dateinputs_1.DatePicker, { value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
+                return (React.createElement(kendo_react_dateinputs_1.DatePicker, { size: this.props.size, value: value, onChange: function (e) { _this.inputChange(e.value, e.syntheticEvent); }, title: this.props.title, ariaLabel: this.props.ariaLabel }));
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
-                return (React.createElement(kendo_react_dropdowns_1.DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
-            default: return (React.createElement(kendo_react_inputs_1.Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
+                return (React.createElement(kendo_react_dropdowns_1.DropDownList, { size: this.props.size, onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title, ariaLabel: this.props.ariaLabel }));
+            default: return (React.createElement(kendo_react_inputs_1.TextBox, { size: this.props.size, value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title, "aria-label": this.props.ariaLabel }));
         }
     };
     return GridFilterCell;

package/dist/npm/cells/GridGroupCell.js

@@ -44,7 +44,7 @@ var GridGroupCell = function (props) {
     var renderCellCollapse = function (colspan, styles) {
         var baseMessage = expanded ? messages_1.groupCollapse : messages_1.groupExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
-        return (React.createElement("td", __assign({ style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
+        return (React.createElement("td", __assign({ className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
                         e.preventDefault();
@@ -64,7 +64,7 @@ var GridGroupCell = function (props) {
     };
     if (columnIndex === undefined || level === undefined || columnIndex < level ||
         columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
-        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: (0, kendo_react_common_1.classNames)('k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "presentation" }));
+        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: (0, kendo_react_common_1.classNames)('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell" }));
     }
     else if (columnIndex <= level && !props.locked) {
         defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
@@ -72,7 +72,7 @@ var GridGroupCell = function (props) {
     else if (columnIndex <= level && props.locked) {
         defaultRendering = (React.createElement(React.Fragment, null,
             renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
-            React.createElement("td", { colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
+            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/npm/cells/GridHierarchyCell.js

@@ -42,13 +42,14 @@ var GridHierarchyCell = function (props) {
         }
     }, [props.dataItem, props.dataIndex, props.field, props.onChange, expanded]);
     if (props.rowType === 'groupFooter') {
-        defaultRendering = React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes));
+        defaultRendering =
+            React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
     }
     else if (props.rowType !== 'groupHeader') {
         var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
         var baseMessage = expanded ? messages_1.detailCollapse : messages_1.detailExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
-        defaultRendering = (React.createElement("td", __assign({ className: "k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
+        defaultRendering = (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
             React.createElement("a", { onClick: function (e) {
                     e.preventDefault();
                     if (props.onChange) {

package/dist/npm/columnMenu/GridColumnMenuWrapper.d.ts

@@ -22,7 +22,7 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
     /** @hidden */
     readonly state: ColumnMenuStateProps;
     /** @hidden */
-    _anchor: HTMLDivElement | null;
+    _anchor: HTMLAnchorElement | null;
     /** @hidden */
     _content: HTMLDivElement | null;
     /** @hidden */
@@ -38,6 +38,6 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
     /** @hidden */
     closeMenu: () => void;
     /** @hidden */
-    onAnchorMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onAnchorMouseDown: (event: React.MouseEvent<HTMLAnchorElement>) => void;
     render(): JSX.Element;
 }

package/dist/npm/columnMenu/GridColumnMenuWrapper.js

@@ -90,7 +90,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         var _this = this;
         var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown },
+            React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, href: "#" },
                 React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
             React.createElement(kendo_react_popup_1.Popup, { anchor: this._anchor, show: this.state.show },
                 React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));

package/dist/npm/drag/ColumnDraggable.js

@@ -58,7 +58,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
     ColumnDraggable.prototype.render = function () {
         var _this = this;
         return (React.createElement(kendo_react_common_1.Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, hint: this.props.dragClue, autoScroll: { boundaryElementRef: this.props.headerRef, direction: { horizontal: true, vertical: false } }, scrollContainer: this.props.containerRef || undefined, ref: function (component) { _this.draggable = component; } },
-            React.createElement("tr", { style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
+            React.createElement("tr", { className: 'k-table-row', style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
     };
     return ColumnDraggable;
 }(React.PureComponent));

package/dist/npm/footer/Footer.d.ts

@@ -9,6 +9,8 @@ export interface FooterProps {
         colGroupFooter: HTMLTableColElement | null;
     };
     cols: React.ReactElement<HTMLTableColElement>[];
+    className?: string;
+    size?: string;
 }
 /**
  * @hidden

package/dist/npm/footer/Footer.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var React = require("react");
+var kendo_react_common_2 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -52,15 +53,18 @@ var Footer = /** @class */ (function (_super) {
         }
     };
     Footer.prototype.render = function () {
+        var _a;
         var _this = this;
         if (!this.props.staticHeaders) {
-            return (React.createElement("tfoot", { className: "k-grid-footer" }, this.props.row));
+            return (React.createElement("tfoot", { className: "k-table-tfoot" }, this.props.row));
         }
         return (React.createElement("div", { className: "k-grid-footer", role: "presentation" },
             React.createElement("div", { ref: function (div) { _this.footerWrap = div; }, className: "k-grid-footer-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, role: "presentation" },
-                React.createElement("table", { ref: function (table) { _this.table = table; }, role: "presentation" },
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_2.classNames)('k-table k-grid-footer-table', (_a = {},
+                        _a["k-table-".concat(kendo_react_common_2.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                        _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupFooter = e; }, role: "presentation" }, this.props.cols),
-                    React.createElement("tfoot", { role: "presentation" }, this.props.row)))));
+                    React.createElement("tfoot", { className: "k-table-tfoot", role: "presentation" }, this.props.row)))));
     };
     return Footer;
 }(React.Component));

package/dist/npm/footer/FooterRow.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterRow = void 0;
 var React = require("react");
 var utils_1 = require("./../utils");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -45,7 +46,7 @@ var FooterRow = /** @class */ (function (_super) {
                         ? { left: column.left, right: column.right }
                         : { left: column.right, right: column.left }
                     : {},
-                className: column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''
+                className: (0, kendo_react_common_1.classNames)('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '')
             };
             var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);
             return (column.footerCell && React.createElement(column.footerCell, __assign({}, cellProps, { key: index }))) || (React.createElement("td", __assign({ key: index }, tdProps, { role: 'columnfooter', "aria-selected": false, "aria-colindex": column.ariaColumnIndex })));
@@ -60,7 +61,7 @@ var FooterRow = /** @class */ (function (_super) {
         configurable: true
     });
     FooterRow.prototype.render = function () {
-        return React.createElement("tr", { role: "row", "aria-rowindex": this.props.ariaRowIndex }, (0, utils_1.footerColumns)(this.props.columns).map(this.renderCell));
+        return React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": this.props.ariaRowIndex }, (0, utils_1.footerColumns)(this.props.columns).map(this.renderCell));
     };
     return FooterRow;
 }(React.Component));

package/dist/npm/header/FilterRow.d.ts

@@ -6,7 +6,7 @@ import { GridFilterOperators } from '../interfaces/GridFilterOperators';
 /**
  * @hidden
  */
-export declare const FILTER_ROW_CLASS = "k-filter-row";
+export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";
 /**
  * @hidden
  */
@@ -19,6 +19,7 @@ export interface FilterRowProps {
     cellRender?: (defaultRendering: React.ReactElement<any> | null, props: GridFilterCellProps) => React.ReactElement<any> | null;
     isRtl?: boolean;
     ariaRowIndex?: number;
+    size?: null | 'small' | 'medium' | 'large';
 }
 /**
  *

package/dist/npm/header/FilterRow.js

@@ -33,10 +33,11 @@ var GridFilterCell_1 = require("../cells/GridFilterCell");
 var filterCommon_1 = require("../filterCommon");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var messages_1 = require("../messages");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
-exports.FILTER_ROW_CLASS = 'k-filter-row';
+exports.FILTER_ROW_CLASS = 'k-table-row k-filter-row';
 /**
  *
  * @hidden
@@ -121,9 +122,9 @@ var FilterRow = /** @class */ (function (_super) {
                     ? { left: column.left, right: column.right }
                     : { left: column.right, right: column.left }
                 : {};
-            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key, columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: _this.headerCellClassName(column.field, column.locked) || undefined, role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
+            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key, columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.classNames)('k-header', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
                 React.createElement(column.filterCell, __assign({}, filterCellProps)) :
-                React.createElement(GridFilterCell_1.GridFilterCell, __assign({}, filterCellProps)))));
+                React.createElement(GridFilterCell_1.GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
         });
         return React.createElement("tr", { className: exports.FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
     };

package/dist/npm/header/Header.d.ts

@@ -14,6 +14,8 @@ export interface HeaderProps {
     cols: React.ReactElement<HTMLTableColElement>[];
     draggable?: boolean | undefined;
     elemRef: React.RefObject<HTMLDivElement>;
+    className?: string;
+    size?: string;
 }
 /**
  * @hidden

package/dist/npm/header/Header.js

@@ -91,17 +91,20 @@ var Header = /** @class */ (function (_super) {
         }
     };
     Header.prototype.render = function () {
+        var _a;
         var _this = this;
         if (!this.props.staticHeaders) {
-            return (React.createElement("thead", __assign({ role: "presentation", className: (0, kendo_react_common_1.classNames)('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }) }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
+            return (React.createElement("thead", __assign({ role: "presentation", className: (0, kendo_react_common_1.classNames)('k-table-thead', { 'k-grid-draggable-header': this.props.draggable }) }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
                 this.props.headerRow,
                 this.props.filterRow));
         }
         return (React.createElement("div", { ref: this.props.elemRef, className: (0, kendo_react_common_1.classNames)('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
             React.createElement("div", { ref: function (div) { _this.headerWrap = div; }, className: "k-grid-header-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, onScroll: this.onScroll, role: "presentation" },
-                React.createElement("table", { ref: function (table) { _this.table = table; }, role: "presentation" },
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_1.classNames)('k-table k-grid-header-table', (_a = {},
+                        _a["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                        _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),
-                    React.createElement("thead", __assign({ role: "rowgroup" }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
+                    React.createElement("thead", __assign({ className: 'k-table-thead', role: "rowgroup" }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
                         this.props.headerRow,
                         this.props.filterRow)))));
     };

package/dist/npm/header/HeaderRow.js

@@ -149,8 +149,11 @@ var HeaderRow = /** @class */ (function (_super) {
             return null;
         }
         return sortIndex >= 0 && [
-            React.createElement("span", { key: 1, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' }),
-            this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
+            React.createElement("span", { key: 1, className: 'k-sort-icon' },
+                React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' })),
+            this.props.sort.length > 1 &&
+                React.createElement("span", { key: 2, className: 'k-sort-icon' },
+                    React.createElement("span", { className: "k-sort-order" }, sortIndex + 1))
         ];
     };
     HeaderRow.prototype.render = function () {
@@ -158,7 +161,7 @@ var HeaderRow = /** @class */ (function (_super) {
         this.serviceIndex = 0;
         this.index = -1;
         return this.props.columnsMap.map(function (rowIndexes, i) {
-            return _this.props.pressHandler && (React.createElement(ColumnDraggable_1.ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1, dragClue: _this.props.dragClue, headerRef: _this.props.headerRef, containerRef: _this.props.containerRef }, _this.cells(rowIndexes))) || React.createElement("tr", { role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
+            return _this.props.pressHandler && (React.createElement(ColumnDraggable_1.ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1, dragClue: _this.props.dragClue, headerRef: _this.props.headerRef, containerRef: _this.props.containerRef }, _this.cells(rowIndexes))) || React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
         });
     };
     return HeaderRow;

package/dist/npm/interfaces/GridColumnProps.d.ts

@@ -74,7 +74,7 @@ export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * ```jsx-no-run
      * <GridColumn
      *  footerCell={props => (
-     *    <td colSpan={props.colSpan} style={props.style}>Sum: 50</td>
+     *    <td className='k-table-td' colSpan={props.colSpan} style={props.style} role={'gridcell'}>Sum: 50</td>
      *  )}
      * />
      * ```

package/dist/npm/interfaces/GridFilterCellProps.d.ts

@@ -50,4 +50,16 @@ export interface GridFilterCellProps {
      * Accessible label of the filter.
      */
     ariaLabel?: string;
+    /**
+     * Configures the `size` of the cell.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
 }

package/dist/npm/interfaces/GridProps.d.ts

@@ -291,4 +291,14 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * Defaults to `false`.
      */
     lockGroups?: boolean;
+    /**
+     * Configures the `size` of the Grid.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     *
+     * @default `medium`
+     */
+    size?: 'small' | 'medium';
 }