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

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

@@ -96,36 +96,27 @@ var HeaderRow = /** @class */ (function (_super) {
             } : {
                 'role': 'presentation'
             };
-            var columnMenuWrapperProps = {
-                column: {
-                    field: column.field,
-                    filter: column.filter
-                },
-                sortable: sortable && _this.props.sortable,
-                sort: _this.props.sort,
-                onSortChange: _this.props.sortChange,
-                filter: _this.props.filter,
-                filterable: _this.props.filterable && column.filterable,
-                filterOperators: _this.props.filterOperators,
-                onFilterChange: _this.props.filterChange,
-                group: _this.props.group,
-                groupable: _this.props.groupable,
-                onGroupChange: _this.props.groupChange,
-                columnMenu: columnMenu
-            };
-            var headerCellProps = {
-                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: columnMenuWrapperProps
-            };
             var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
+            var HeaderCell = column.headerCell ? column.headerCell : GridHeaderCell_1.GridHeaderCell;
+            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: {
+                    column: {
+                        field: column.field,
+                        filter: column.filter
+                    },
+                    sortable: sortable && _this.props.sortable,
+                    sort: _this.props.sort,
+                    onSortChange: _this.props.sortChange,
+                    filter: _this.props.filter,
+                    filterable: _this.props.filterable && column.filterable,
+                    filterOperators: _this.props.filterOperators,
+                    onFilterChange: _this.props.filterChange,
+                    group: _this.props.group,
+                    groupable: _this.props.groupable,
+                    onGroupChange: _this.props.groupChange,
+                    columnMenu: columnMenu
+                } }));
             return (React.createElement(kendo_react_data_tools_1.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" }),
-                column.headerCell ? React.createElement(column.headerCell, __assign({}, headerCellProps)) : React.createElement(GridHeaderCell_1.GridHeaderCell, __assign({}, headerCellProps)),
+                headerCell,
                 _this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
                     React.createElement(ColumnResizer_1.ColumnResizer, { key: 2, resize: function (e, element, end) {
                             return _this.props.columnResize &&
@@ -158,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 () {
@@ -167,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';
 }

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

@@ -7,4 +7,20 @@ export interface GridToolbarProps {
      * The React elements that will be rendered inside the toolbar of the Grid.
      */
     children?: React.ReactNode;
+    /**
+     * Specifies the name of the CSS class which is set to the GridToolbar.
+     */
+    className?: string;
+    /**
+     * Configures the `size` of the Toolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
 }

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1672762751,
+    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/npm/rows/GridRow.js

@@ -43,12 +43,12 @@ var GridRow = /** @class */ (function (_super) {
      */
     GridRow.prototype.render = function () {
         var _a;
-        var className = (0, kendo_react_common_1.classNames)({
+        var className = (0, kendo_react_common_1.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/utils/index.d.ts

@@ -50,3 +50,11 @@ export declare const footerColumns: (columns: ExtendedColumnProps[]) => Extended
  * @hidden
  */
 export declare const sanitizeColumns: (columns: ExtendedColumnProps[]) => GridColumnProps[];
+/**
+ * @hidden
+ */
+export declare const firefox: boolean;
+/**
+ * @hidden
+ */
+export declare const firefoxMaxHeight = 17895697;

package/dist/npm/utils/index.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sanitizeColumns = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
+exports.firefoxMaxHeight = exports.firefox = exports.sanitizeColumns = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
 /**
  * @hidden
  */
@@ -237,3 +237,12 @@ var sanitizeColumns = function (columns) {
     });
 };
 exports.sanitizeColumns = sanitizeColumns;
+/**
+ * @hidden
+ */
+exports.firefox = typeof window !== 'undefined' &&
+    /Firefox/.test(window.navigator.userAgent);
+/**
+ * @hidden
+ */
+exports.firefoxMaxHeight = 17895697;