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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/cdn/js/kendo-react-grid.js +1 -1
  2. package/dist/es/Grid.d.ts +6 -0
  3. package/dist/es/Grid.js +71 -67
  4. package/dist/es/GridToolbar.js +5 -1
  5. package/dist/es/VirtualScroll.d.ts +2 -2
  6. package/dist/es/VirtualScroll.js +38 -30
  7. package/dist/es/cells/GridCell.js +1 -1
  8. package/dist/es/cells/GridDetailCell.js +1 -1
  9. package/dist/es/cells/GridDetailHierarchyCell.js +1 -1
  10. package/dist/es/cells/GridEditCell.js +1 -1
  11. package/dist/es/cells/GridFilterCell.js +8 -8
  12. package/dist/es/cells/GridGroupCell.js +3 -3
  13. package/dist/es/cells/GridHierarchyCell.js +3 -2
  14. package/dist/es/columnMenu/GridColumnMenuWrapper.d.ts +2 -2
  15. package/dist/es/columnMenu/GridColumnMenuWrapper.js +1 -1
  16. package/dist/es/drag/ColumnDraggable.js +1 -1
  17. package/dist/es/footer/Footer.d.ts +2 -0
  18. package/dist/es/footer/Footer.js +7 -3
  19. package/dist/es/footer/FooterRow.js +3 -2
  20. package/dist/es/header/FilterRow.d.ts +2 -1
  21. package/dist/es/header/FilterRow.js +4 -3
  22. package/dist/es/header/Header.d.ts +2 -0
  23. package/dist/es/header/Header.js +7 -4
  24. package/dist/es/header/HeaderRow.js +25 -31
  25. package/dist/es/interfaces/GridColumnProps.d.ts +1 -1
  26. package/dist/es/interfaces/GridFilterCellProps.d.ts +12 -0
  27. package/dist/es/interfaces/GridProps.d.ts +10 -0
  28. package/dist/es/interfaces/GridToolbarProps.d.ts +16 -0
  29. package/dist/es/package-metadata.js +1 -1
  30. package/dist/es/rows/GridRow.js +2 -2
  31. package/dist/es/utils/index.d.ts +8 -0
  32. package/dist/es/utils/index.js +9 -0
  33. package/dist/npm/Grid.d.ts +6 -0
  34. package/dist/npm/Grid.js +69 -65
  35. package/dist/npm/GridToolbar.js +5 -1
  36. package/dist/npm/VirtualScroll.d.ts +2 -2
  37. package/dist/npm/VirtualScroll.js +38 -30
  38. package/dist/npm/cells/GridCell.js +1 -1
  39. package/dist/npm/cells/GridDetailCell.js +1 -1
  40. package/dist/npm/cells/GridDetailHierarchyCell.js +1 -1
  41. package/dist/npm/cells/GridEditCell.js +1 -1
  42. package/dist/npm/cells/GridFilterCell.js +7 -7
  43. package/dist/npm/cells/GridGroupCell.js +3 -3
  44. package/dist/npm/cells/GridHierarchyCell.js +3 -2
  45. package/dist/npm/columnMenu/GridColumnMenuWrapper.d.ts +2 -2
  46. package/dist/npm/columnMenu/GridColumnMenuWrapper.js +1 -1
  47. package/dist/npm/drag/ColumnDraggable.js +1 -1
  48. package/dist/npm/footer/Footer.d.ts +2 -0
  49. package/dist/npm/footer/Footer.js +7 -3
  50. package/dist/npm/footer/FooterRow.js +3 -2
  51. package/dist/npm/header/FilterRow.d.ts +2 -1
  52. package/dist/npm/header/FilterRow.js +4 -3
  53. package/dist/npm/header/Header.d.ts +2 -0
  54. package/dist/npm/header/Header.js +6 -3
  55. package/dist/npm/header/HeaderRow.js +25 -31
  56. package/dist/npm/interfaces/GridColumnProps.d.ts +1 -1
  57. package/dist/npm/interfaces/GridFilterCellProps.d.ts +12 -0
  58. package/dist/npm/interfaces/GridProps.d.ts +10 -0
  59. package/dist/npm/interfaces/GridToolbarProps.d.ts +16 -0
  60. package/dist/npm/package-metadata.js +1 -1
  61. package/dist/npm/rows/GridRow.js +2 -2
  62. package/dist/npm/utils/index.d.ts +8 -0
  63. package/dist/npm/utils/index.js +10 -1
  64. package/dist/systemjs/kendo-react-grid.js +1 -1
  65. package/package.json +18 -18
@@ -41,7 +41,7 @@ export var GridGroupCell = function (props) {
41
41
  var renderCellCollapse = function (colspan, styles) {
42
42
  var baseMessage = expanded ? groupCollapse : groupExpand;
43
43
  var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
44
- 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),
44
+ 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),
45
45
  React.createElement("p", { className: "k-reset" },
46
46
  React.createElement("a", { onClick: function (e) {
47
47
  e.preventDefault();
@@ -61,7 +61,7 @@ export var GridGroupCell = function (props) {
61
61
  };
62
62
  if (columnIndex === undefined || level === undefined || columnIndex < level ||
63
63
  columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
64
- defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "presentation" }));
64
+ defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell" }));
65
65
  }
66
66
  else if (columnIndex <= level && !props.locked) {
67
67
  defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
@@ -69,7 +69,7 @@ export var GridGroupCell = function (props) {
69
69
  else if (columnIndex <= level && props.locked) {
70
70
  defaultRendering = (React.createElement(React.Fragment, null,
71
71
  renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
72
- React.createElement("td", { colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
72
+ React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
73
73
  }
74
74
  return render ?
75
75
  render.call(undefined, defaultRendering, props) :
@@ -39,13 +39,14 @@ export var GridHierarchyCell = function (props) {
39
39
  }
40
40
  }, [props.dataItem, props.dataIndex, props.field, props.onChange, expanded]);
41
41
  if (props.rowType === 'groupFooter') {
42
- defaultRendering = React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes));
42
+ defaultRendering =
43
+ React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
43
44
  }
44
45
  else if (props.rowType !== 'groupHeader') {
45
46
  var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
46
47
  var baseMessage = expanded ? detailCollapse : detailExpand;
47
48
  var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
48
- defaultRendering = (React.createElement("td", __assign({ className: "k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
49
+ 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),
49
50
  React.createElement("a", { onClick: function (e) {
50
51
  e.preventDefault();
51
52
  if (props.onChange) {
@@ -22,7 +22,7 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
22
22
  /** @hidden */
23
23
  readonly state: ColumnMenuStateProps;
24
24
  /** @hidden */
25
- _anchor: HTMLDivElement | null;
25
+ _anchor: HTMLAnchorElement | null;
26
26
  /** @hidden */
27
27
  _content: HTMLDivElement | null;
28
28
  /** @hidden */
@@ -38,6 +38,6 @@ export declare class GridColumnMenuWrapper extends React.Component<GridColumnMen
38
38
  /** @hidden */
39
39
  closeMenu: () => void;
40
40
  /** @hidden */
41
- onAnchorMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
41
+ onAnchorMouseDown: (event: React.MouseEvent<HTMLAnchorElement>) => void;
42
42
  render(): JSX.Element;
43
43
  }
@@ -87,7 +87,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
87
87
  var _this = this;
88
88
  var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
89
89
  return (React.createElement(React.Fragment, null,
90
- 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 },
90
+ 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: "#" },
91
91
  React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
92
92
  React.createElement(Popup, { anchor: this._anchor, show: this.state.show },
93
93
  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 })))))));
@@ -55,7 +55,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
55
55
  ColumnDraggable.prototype.render = function () {
56
56
  var _this = this;
57
57
  return (React.createElement(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; } },
58
- React.createElement("tr", { style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
58
+ React.createElement("tr", { className: 'k-table-row', style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
59
59
  };
60
60
  return ColumnDraggable;
61
61
  }(React.PureComponent));
@@ -9,6 +9,8 @@ export interface FooterProps {
9
9
  colGroupFooter: HTMLTableColElement | null;
10
10
  };
11
11
  cols: React.ReactElement<HTMLTableColElement>[];
12
+ className?: string;
13
+ size?: string;
12
14
  }
13
15
  /**
14
16
  * @hidden
@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
15
15
  })();
16
16
  import { getScrollbarWidth } from '@progress/kendo-react-common';
17
17
  import * as React from 'react';
18
+ import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
18
19
  /**
19
20
  * @hidden
20
21
  */
@@ -49,15 +50,18 @@ var Footer = /** @class */ (function (_super) {
49
50
  }
50
51
  };
51
52
  Footer.prototype.render = function () {
53
+ var _a;
52
54
  var _this = this;
53
55
  if (!this.props.staticHeaders) {
54
- return (React.createElement("tfoot", { className: "k-grid-footer" }, this.props.row));
56
+ return (React.createElement("tfoot", { className: "k-table-tfoot" }, this.props.row));
55
57
  }
56
58
  return (React.createElement("div", { className: "k-grid-footer", role: "presentation" },
57
59
  React.createElement("div", { ref: function (div) { _this.footerWrap = div; }, className: "k-grid-footer-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, role: "presentation" },
58
- React.createElement("table", { ref: function (table) { _this.table = table; }, role: "presentation" },
60
+ React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-footer-table', (_a = {},
61
+ _a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
62
+ _a), this.props.className), role: "presentation" },
59
63
  React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupFooter = e; }, role: "presentation" }, this.props.cols),
60
- React.createElement("tfoot", { role: "presentation" }, this.props.row)))));
64
+ React.createElement("tfoot", { className: "k-table-tfoot", role: "presentation" }, this.props.row)))));
61
65
  };
62
66
  return Footer;
63
67
  }(React.Component));
@@ -26,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
26
26
  };
27
27
  import * as React from 'react';
28
28
  import { footerColumns } from './../utils';
29
+ import { classNames } from '@progress/kendo-react-common';
29
30
  /**
30
31
  * @hidden
31
32
  */
@@ -42,7 +43,7 @@ var FooterRow = /** @class */ (function (_super) {
42
43
  ? { left: column.left, right: column.right }
43
44
  : { left: column.right, right: column.left }
44
45
  : {},
45
- className: column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''
46
+ className: classNames('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '')
46
47
  };
47
48
  var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);
48
49
  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 })));
@@ -57,7 +58,7 @@ var FooterRow = /** @class */ (function (_super) {
57
58
  configurable: true
58
59
  });
59
60
  FooterRow.prototype.render = function () {
60
- return React.createElement("tr", { role: "row", "aria-rowindex": this.props.ariaRowIndex }, footerColumns(this.props.columns).map(this.renderCell));
61
+ return React.createElement("tr", { className: 'k-table-row', role: "row", "aria-rowindex": this.props.ariaRowIndex }, footerColumns(this.props.columns).map(this.renderCell));
61
62
  };
62
63
  return FooterRow;
63
64
  }(React.Component));
@@ -6,7 +6,7 @@ import { GridFilterOperators } from '../interfaces/GridFilterOperators';
6
6
  /**
7
7
  * @hidden
8
8
  */
9
- export declare const FILTER_ROW_CLASS = "k-filter-row";
9
+ export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";
10
10
  /**
11
11
  * @hidden
12
12
  */
@@ -19,6 +19,7 @@ export interface FilterRowProps {
19
19
  cellRender?: (defaultRendering: React.ReactElement<any> | null, props: GridFilterCellProps) => React.ReactElement<any> | null;
20
20
  isRtl?: boolean;
21
21
  ariaRowIndex?: number;
22
+ size?: null | 'small' | 'medium' | 'large';
22
23
  }
23
24
  /**
24
25
  *
@@ -30,10 +30,11 @@ import { GridFilterCell } from '../cells/GridFilterCell';
30
30
  import { operatorMap, booleanFilterValues, getFilterType } from '../filterCommon';
31
31
  import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-react-data-tools';
32
32
  import { filterAriaLabel, messages } from '../messages';
33
+ import { classNames } from '@progress/kendo-react-common';
33
34
  /**
34
35
  * @hidden
35
36
  */
36
- export var FILTER_ROW_CLASS = 'k-filter-row';
37
+ export var FILTER_ROW_CLASS = 'k-table-row k-filter-row';
37
38
  /**
38
39
  *
39
40
  * @hidden
@@ -118,9 +119,9 @@ var FilterRow = /** @class */ (function (_super) {
118
119
  ? { left: column.left, right: column.right }
119
120
  : { left: column.right, right: column.left }
120
121
  : {};
121
- return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: _this.headerCellClassName(column.field, column.locked) || undefined, role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
122
+ return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-header', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
122
123
  React.createElement(column.filterCell, __assign({}, filterCellProps)) :
123
- React.createElement(GridFilterCell, __assign({}, filterCellProps)))));
124
+ React.createElement(GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
124
125
  });
125
126
  return React.createElement("tr", { className: FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
126
127
  };
@@ -14,6 +14,8 @@ export interface HeaderProps {
14
14
  cols: React.ReactElement<HTMLTableColElement>[];
15
15
  draggable?: boolean | undefined;
16
16
  elemRef: React.RefObject<HTMLDivElement>;
17
+ className?: string;
18
+ size?: string;
17
19
  }
18
20
  /**
19
21
  * @hidden
@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
25
25
  return __assign.apply(this, arguments);
26
26
  };
27
27
  import * as React from 'react';
28
- import { classNames, getScrollbarWidth } from '@progress/kendo-react-common';
28
+ import { classNames, getScrollbarWidth, kendoThemeMaps } from '@progress/kendo-react-common';
29
29
  import { isRtl, tableKeyboardNavigationHeaderAttributes } from '@progress/kendo-react-data-tools';
30
30
  /**
31
31
  * @hidden
@@ -88,17 +88,20 @@ var Header = /** @class */ (function (_super) {
88
88
  }
89
89
  };
90
90
  Header.prototype.render = function () {
91
+ var _a;
91
92
  var _this = this;
92
93
  if (!this.props.staticHeaders) {
93
- return (React.createElement("thead", __assign({ role: "presentation", className: classNames('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }) }, tableKeyboardNavigationHeaderAttributes),
94
+ return (React.createElement("thead", __assign({ role: "presentation", className: classNames('k-table-thead', { 'k-grid-draggable-header': this.props.draggable }) }, tableKeyboardNavigationHeaderAttributes),
94
95
  this.props.headerRow,
95
96
  this.props.filterRow));
96
97
  }
97
98
  return (React.createElement("div", { ref: this.props.elemRef, className: classNames('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
98
99
  React.createElement("div", { ref: function (div) { _this.headerWrap = div; }, className: "k-grid-header-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, onScroll: this.onScroll, role: "presentation" },
99
- React.createElement("table", { ref: function (table) { _this.table = table; }, role: "presentation" },
100
+ React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-header-table', (_a = {},
101
+ _a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
102
+ _a), this.props.className), role: "presentation" },
100
103
  React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),
101
- React.createElement("thead", __assign({ role: "rowgroup" }, tableKeyboardNavigationHeaderAttributes),
104
+ React.createElement("thead", __assign({ className: 'k-table-thead', role: "rowgroup" }, tableKeyboardNavigationHeaderAttributes),
102
105
  this.props.headerRow,
103
106
  this.props.filterRow)))));
104
107
  };
@@ -93,36 +93,27 @@ var HeaderRow = /** @class */ (function (_super) {
93
93
  } : {
94
94
  'role': 'presentation'
95
95
  };
96
- var columnMenuWrapperProps = {
97
- column: {
98
- field: column.field,
99
- filter: column.filter
100
- },
101
- sortable: sortable && _this.props.sortable,
102
- sort: _this.props.sort,
103
- onSortChange: _this.props.sortChange,
104
- filter: _this.props.filter,
105
- filterable: _this.props.filterable && column.filterable,
106
- filterOperators: _this.props.filterOperators,
107
- onFilterChange: _this.props.filterChange,
108
- group: _this.props.group,
109
- groupable: _this.props.groupable,
110
- onGroupChange: _this.props.groupChange,
111
- columnMenu: columnMenu
112
- };
113
- var headerCellProps = {
114
- field: column.field,
115
- onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
116
- selectionChange: _this.props.selectionChange,
117
- title: column.title,
118
- selectionValue: column.headerSelectionValue,
119
- render: _this.props.cellRender,
120
- children: _this.sortIcon(sortIndex),
121
- columnMenuWrapperProps: columnMenuWrapperProps
122
- };
123
96
  var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
97
+ var HeaderCell = column.headerCell ? column.headerCell : GridHeaderCell;
98
+ var headerCell = (React.createElement(HeaderCell, { field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
99
+ column: {
100
+ field: column.field,
101
+ filter: column.filter
102
+ },
103
+ sortable: sortable && _this.props.sortable,
104
+ sort: _this.props.sort,
105
+ onSortChange: _this.props.sortChange,
106
+ filter: _this.props.filter,
107
+ filterable: _this.props.filterable && column.filterable,
108
+ filterOperators: _this.props.filterOperators,
109
+ onFilterChange: _this.props.filterChange,
110
+ group: _this.props.group,
111
+ groupable: _this.props.groupable,
112
+ onGroupChange: _this.props.groupChange,
113
+ columnMenu: columnMenu
114
+ } }));
124
115
  return (React.createElement(HeaderThElement, __assign({}, ariaAttrs, { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined, role: "columnheader" }),
125
- column.headerCell ? React.createElement(column.headerCell, __assign({}, headerCellProps)) : React.createElement(GridHeaderCell, __assign({}, headerCellProps)),
116
+ headerCell,
126
117
  _this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
127
118
  React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
128
119
  return _this.props.columnResize &&
@@ -155,8 +146,11 @@ var HeaderRow = /** @class */ (function (_super) {
155
146
  return null;
156
147
  }
157
148
  return sortIndex >= 0 && [
158
- React.createElement("span", { key: 1, className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' }),
159
- this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
149
+ React.createElement("span", { key: 1, className: 'k-sort-icon' },
150
+ React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' })),
151
+ this.props.sort.length > 1 &&
152
+ React.createElement("span", { key: 2, className: 'k-sort-icon' },
153
+ React.createElement("span", { className: "k-sort-order" }, sortIndex + 1))
160
154
  ];
161
155
  };
162
156
  HeaderRow.prototype.render = function () {
@@ -164,7 +158,7 @@ var HeaderRow = /** @class */ (function (_super) {
164
158
  this.serviceIndex = 0;
165
159
  this.index = -1;
166
160
  return this.props.columnsMap.map(function (rowIndexes, i) {
167
- return _this.props.pressHandler && (React.createElement(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));
161
+ return _this.props.pressHandler && (React.createElement(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));
168
162
  });
169
163
  };
170
164
  return HeaderRow;
@@ -74,7 +74,7 @@ export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
74
74
  * ```jsx-no-run
75
75
  * <GridColumn
76
76
  * footerCell={props => (
77
- * <td colSpan={props.colSpan} style={props.style}>Sum: 50</td>
77
+ * <td className='k-table-td' colSpan={props.colSpan} style={props.style} role={'gridcell'}>Sum: 50</td>
78
78
  * )}
79
79
  * />
80
80
  * ```
@@ -50,4 +50,16 @@ export interface GridFilterCellProps {
50
50
  * Accessible label of the filter.
51
51
  */
52
52
  ariaLabel?: string;
53
+ /**
54
+ * Configures the `size` of the cell.
55
+ *
56
+ * The available options are:
57
+ * - small
58
+ * - medium
59
+ * - large
60
+ * - null&mdash;Does not set a size `className`.
61
+ *
62
+ * @default `medium`
63
+ */
64
+ size?: null | 'small' | 'medium' | 'large';
53
65
  }
@@ -291,4 +291,14 @@ export interface GridProps extends KendoReactComponentBaseProps {
291
291
  * Defaults to `false`.
292
292
  */
293
293
  lockGroups?: boolean;
294
+ /**
295
+ * Configures the `size` of the Grid.
296
+ *
297
+ * The available options are:
298
+ * - small
299
+ * - medium
300
+ *
301
+ * @default `medium`
302
+ */
303
+ size?: 'small' | 'medium';
294
304
  }
@@ -7,4 +7,20 @@ export interface GridToolbarProps {
7
7
  * The React elements that will be rendered inside the toolbar of the Grid.
8
8
  */
9
9
  children?: React.ReactNode;
10
+ /**
11
+ * Specifies the name of the CSS class which is set to the GridToolbar.
12
+ */
13
+ className?: string;
14
+ /**
15
+ * Configures the `size` of the Toolbar.
16
+ *
17
+ * The available options are:
18
+ * - small
19
+ * - medium
20
+ * - large
21
+ * - null&mdash;Does not set a size `className`.
22
+ *
23
+ * @default `medium`
24
+ */
25
+ size?: null | 'small' | 'medium' | 'large';
10
26
  }
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-grid',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1672762751,
8
+ publishDate: 1673259545,
9
9
  version: '',
10
10
  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'
11
11
  };
@@ -40,12 +40,12 @@ var GridRow = /** @class */ (function (_super) {
40
40
  */
41
41
  GridRow.prototype.render = function () {
42
42
  var _a;
43
- var className = classNames({
43
+ var className = classNames('k-table-row', {
44
44
  'k-grouping-row': this.props.rowType === 'groupHeader',
45
45
  'k-group-footer': this.props.rowType === 'groupFooter',
46
46
  'k-master-row': this.props.rowType !== 'groupHeader' &&
47
47
  this.props.rowType !== 'groupFooter',
48
- 'k-alt': this.props.rowType !== 'groupHeader' &&
48
+ 'k-table-alt-row k-alt': this.props.rowType !== 'groupHeader' &&
49
49
  this.props.rowType !== 'groupFooter' &&
50
50
  this.props.isAltRow,
51
51
  'k-selected': this.props.isSelected,
@@ -50,3 +50,11 @@ export declare const footerColumns: (columns: ExtendedColumnProps[]) => Extended
50
50
  * @hidden
51
51
  */
52
52
  export declare const sanitizeColumns: (columns: ExtendedColumnProps[]) => GridColumnProps[];
53
+ /**
54
+ * @hidden
55
+ */
56
+ export declare const firefox: boolean;
57
+ /**
58
+ * @hidden
59
+ */
60
+ export declare const firefoxMaxHeight = 17895697;
@@ -227,3 +227,12 @@ export var sanitizeColumns = function (columns) {
227
227
  return children.length ? __assign({ children: sanitizeColumns(children) }, props) : props;
228
228
  });
229
229
  };
230
+ /**
231
+ * @hidden
232
+ */
233
+ export var firefox = typeof window !== 'undefined' &&
234
+ /Firefox/.test(window.navigator.userAgent);
235
+ /**
236
+ * @hidden
237
+ */
238
+ export var firefoxMaxHeight = 17895697;
@@ -100,12 +100,14 @@ export declare class Grid extends React.Component<GridProps, {}> {
100
100
  onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
101
101
  dataItemKey: PropTypes.Requireable<string>;
102
102
  navigatable: PropTypes.Requireable<boolean>;
103
+ size: PropTypes.Requireable<string>;
103
104
  };
104
105
  /** @hidden */
105
106
  static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;
106
107
  protected dragLogic: CommonDragLogic;
107
108
  private _columns;
108
109
  private _columnsMap;
110
+ private _columnsMutations;
109
111
  private contextStateRef;
110
112
  private navigationStateRef;
111
113
  private _data;
@@ -221,7 +223,11 @@ export declare class Grid extends React.Component<GridProps, {}> {
221
223
  private columnToGroup;
222
224
  private resetTableWidth;
223
225
  private onResize;
226
+ private childrenToArray;
227
+ private readColumns;
228
+ private mapColumns;
224
229
  private initColumns;
230
+ private getHeaderRow;
225
231
  private resolveTitle;
226
232
  private getDataState;
227
233
  private getArguments;