@progress/kendo-react-grid 4.14.1-dev.202201181415 → 5.0.1-dev.202201200659

package/dist/es/cells/GridEditCell.js

@@ -64,12 +64,12 @@ export var GridEditCell = function (props) {
             break;
         case 'boolean':
             defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox", onChange: handleOnChange }),
+                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
                 React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId })));
             break;
         default:
             defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { style: { width: '100%' }, className: "k-textbox", value: data || '', onChange: handleOnChange })));
+                React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange })));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridFilterCell.js

@@ -12,12 +12,14 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
-import { NumericTextBox } from '@progress/kendo-react-inputs';
+import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
 import { DatePicker } from '@progress/kendo-react-dateinputs';
 import { messages, filterClearButton, filterChooseOperator } from '../messages';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
+import { classNames } from '@progress/kendo-react-common';
 var GridFilterCell = /** @class */ (function (_super) {
     __extends(GridFilterCell, _super);
     function GridFilterCell(props) {
@@ -41,18 +43,15 @@ var GridFilterCell = /** @class */ (function (_super) {
      * @hidden
      */
     GridFilterCell.prototype.render = function () {
+        var _a;
         var localizationService = provideLocalizationService(this);
         var defaultRendering = (React.createElement("div", { className: "k-filtercell" },
-            React.createElement("div", { className: "k-filtercell-wrapper" },
+            React.createElement("span", null,
                 this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues),
-                React.createElement("div", { className: "k-filtercell-operator" },
-                    this.renderOperatorEditor(localizationService),
-                    React.createElement("button", { className: 
-                        /* button is always visible if there is either value or operator */
-                        (!(this.props.value === null || this.props.value === '') || this.props.operator) ?
-                            'k-button k-button-icon k-clear-button-visible' :
-                            'k-button k-button-icon', title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton]), type: "button", onClick: this.clear },
-                        React.createElement("span", { className: "k-icon k-i-filter-clear" }))))));
+                React.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(localizationService)),
+                React.createElement(Button, { icon: 'filter-clear', className: classNames((_a = {},
+                        _a['k-clear-button-visible'] = Boolean(!(this.props.value === null || this.props.value === '') || this.props.operator),
+                        _a)), title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton]), type: "button", onClick: this.clear, disabled: !(!(this.props.value === null || this.props.value === '') || this.props.operator) }))));
         if (this.props.render) {
             return this.props.render.call(undefined, defaultRendering, this.props);
         }
@@ -81,7 +80,7 @@ var GridFilterCell = /** @class */ (function (_super) {
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
                 return (React.createElement(DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text", title: this.props.title }));
-            default: return (React.createElement("input", { className: "k-textbox", value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e); }, title: this.props.title }));
+            default: return (React.createElement(Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); }, title: this.props.title }));
         }
     };
     return GridFilterCell;

package/dist/es/cells/GridSelectionCell.js

@@ -26,7 +26,7 @@ export var GridSelectionCell = function (props) {
     var selectedValue = getNestedValue(props.field, props.dataItem);
     var navigationAttributes = useTableKeyboardNavigation(props.id);
     var defaultRendering = props.rowType !== 'groupHeader' ? (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: props.className, "aria-colindex": props.ariaColumnIndex, role: 'gridcell' }, navigationAttributes),
-        React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox", onChange: handleOnChange }),
+        React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
         React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId }))) : null;
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -26,11 +26,12 @@ import * as React from 'react';
 import { GridColumnMenuItem } from './GridColumnMenuItem';
 import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
 import { GridColumnMenuItemContent } from './GridColumnMenuItemContent';
-import { Checkbox } from '@progress/kendo-react-inputs';
+import { Checkbox, Input } from '@progress/kendo-react-inputs';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { messages, filterClearButton, filterSubmitButton, filterTitle, searchPlaceholder, filterCheckAll, filterSelectedItems } from '../messages';
 import { filterBy } from '@progress/kendo-data-query';
 import { clone } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 import { getNestedValue } from '../utils';
 /**
  * @hidden
@@ -279,13 +280,10 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
         }
         var searchBox = this.props.searchBox ?
             React.createElement(this.props.searchBox, { value: this.state.value, onChange: this.handleSearchChange }) :
-            (React.createElement("div", { className: "k-searchbox" },
-                React.createElement("span", { className: "k-input-prefix" },
-                    React.createElement("span", { className: "k-icon k-i-search" })),
-                React.createElement("input", { className: "k-input", type: "text", placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]), value: this.state.value, onChange: this.handleSearchChange }),
-                React.createElement("span", { className: "k-input-suffix" },
-                    React.createElement("button", { type: "button", className: "k-button k-icon-button k-button-clear", onClick: this.handleClear },
-                        React.createElement("span", { className: "k-icon k-i-close" })))));
+            (React.createElement("div", { className: "k-searchbox k-textbox k-input k-input-md k-input-solid" },
+                React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
+                React.createElement(Input, { className: "k-input-inner", type: "text", placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]), value: this.state.value, onChange: function (e) { return _this.handleSearchChange(e.nativeEvent); } }),
+                React.createElement(Button, { type: "button", rounded: null, className: "k-input-button", onClick: this.handleClear, icon: "close" })));
         var uniqueFilterValues = filterValues.filter(function (item, index) { return filterValues.indexOf(item) === index; });
         return (React.createElement(GridColumnMenuItemGroup, null,
             React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: "k-i-filter", onClick: this.onFilterExpand }),
@@ -303,8 +301,8 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
                                 })),
                             React.createElement("div", { className: "k-filter-selected-items" }, uniqueFilterValues.length + ' ' + localizationService.toLanguageString(filterSelectedItems, messages[filterSelectedItems])),
                             React.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" },
-                                React.createElement("button", { className: 'k-button k-primary', type: 'submit' }, localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])),
-                                React.createElement("button", { className: "k-button", type: 'reset' }, localizationService.toLanguageString(filterClearButton, messages[filterClearButton])))))))));
+                                React.createElement(Button, { themeColor: "primary", type: 'submit' }, localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])),
+                                React.createElement(Button, { className: "k-button", type: 'reset' }, localizationService.toLanguageString(filterClearButton, messages[filterClearButton])))))))));
     };
     /**
      * @hidden

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -31,6 +31,7 @@ import { provideLocalizationService, registerForLocalization } from '@progress/k
 import { operatorMap, getDefaultOperator, filterLogicList, defaultHideSecondFilter, booleanFilterValues, getFilterType, IsUnaryFilter } from '../filterCommon';
 import { messages, filterClearButton, filterSubmitButton, filterTitle } from '../messages';
 import { GridColumnMenuFilterUI } from './GridColumnMenuFilterUI';
+import { Button } from '@progress/kendo-react-buttons';
 /**
  * @hidden
  */
@@ -345,11 +346,9 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
                             FilterUI ?
                                 React.createElement(FilterUI, __assign({}, filterUIProps)) :
                                 React.createElement(GridColumnMenuFilterUI, __assign({}, filterUIProps)),
-                            React.createElement("div", { className: 'k-actions k-hstack k-justify-content-stretch' },
-                                React.createElement("button", { className: 'k-button', type: 'reset' }, localizationService
-                                    .toLanguageString(filterClearButton, messages[filterClearButton])),
-                                React.createElement("button", { className: 'k-button k-primary', disabled: !isFilterValid }, localizationService
-                                    .toLanguageString(filterSubmitButton, messages[filterSubmitButton])))))))));
+                            React.createElement("div", { className: 'k-actions k-actions-stretched' },
+                                React.createElement(Button, { type: 'reset' }, localizationService.toLanguageString(filterClearButton, messages[filterClearButton])),
+                                React.createElement(Button, { themeColor: "primary", disabled: !isFilterValid }, localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])))))))));
     };
     /* eslint-disable max-len */
     /**

package/dist/es/columnMenu/GridColumnMenuFilterCell.js

@@ -13,7 +13,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
-import { NumericTextBox } from '@progress/kendo-react-inputs';
+import { NumericTextBox, Input } from '@progress/kendo-react-inputs';
 import { DatePicker } from '@progress/kendo-react-dateinputs';
 import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
 /**
@@ -62,7 +62,7 @@ var GridColumnMenuFilterCell = /** @class */ (function (_super) {
             case 'boolean':
                 var noFilterSet_1 = function (filter) { return filter === null || filter === undefined; };
                 return (React.createElement(DropDownList, { onChange: this.boolDropdownChange, value: booleanValues.find(function (item) { return item.operator === (noFilterSet_1(value) ? '' : value); }), data: booleanValues, textField: "text" }));
-            default: return (React.createElement("input", { className: "k-textbox", value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e); } }));
+            default: return (React.createElement(Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); } }));
         }
     };
     return GridColumnMenuFilterCell;

package/dist/es/drag/GroupingIndicator.d.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
 export interface GroupingIndicatorProps {
     title: string;
     dir: 'asc' | 'desc';
-    onRemove?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onSortChange?: (event: React.MouseEvent<HTMLAnchorElement>, dir: string) => void;
     onDrag?: (draggableEvent: any, element: HTMLDivElement) => void;
     onPress?: (draggableEvent: any, element: HTMLDivElement) => void;
@@ -29,6 +29,6 @@ export declare class GroupingIndicator extends React.Component<GroupingIndicator
      */
     onRelease: (data: any) => void;
     sortChange: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-    groupRemove: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    groupRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     render(): JSX.Element;
 }

package/dist/es/drag/GroupingIndicator.js

@@ -13,6 +13,7 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import { Draggable } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 /**
  * @hidden
  */
@@ -70,8 +71,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
                     React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
                         React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.dir + '-sm' }),
                         this.props.title),
-                    React.createElement("a", { className: "k-button k-button-icon k-flat", tabIndex: -1, onClick: this.groupRemove },
-                        React.createElement("span", { className: "k-icon k-i-group-delete" }))))));
+                    React.createElement(Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'close' })))));
     };
     return GroupingIndicator;
 }(React.Component));

package/dist/es/header/GridHeaderSelectionCell.js

@@ -39,7 +39,7 @@ var GridHeaderSelectionCell = /** @class */ (function (_super) {
         var _this = this;
         var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
         var defaultRendering = [
-            (React.createElement("input", { key: 0, checked: this.props.selectionValue, id: this._inputId, type: "checkbox", className: "k-checkbox", onChange: function (e) {
+            (React.createElement("input", { key: 0, checked: this.props.selectionValue, id: this._inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: function (e) {
                     return _this.props.selectionChange({
                         field: _this.props.field,
                         syntheticEvent: e

package/dist/es/header/GroupPanel.d.ts

@@ -6,7 +6,7 @@ import { ColumnDraggableProps } from '../drag/ColumnDraggable';
  */
 export interface GroupPanelProps extends ColumnDraggableProps {
     group: GroupDescriptor[];
-    groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLAnchorElement>) => void;
+    groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
 }
@@ -14,7 +14,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
  * @hidden
  */
 export declare class GroupPanel extends React.Component<GroupPanelProps, {}> {
-    onGroupRemove: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, index: number) => void;
+    onGroupRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     onGroupSortChange: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, index: number, groupDesc: GroupDescriptor, dir: string) => void;
     render(): JSX.Element;
 }

package/dist/es/package-metadata.js

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

@@ -66,12 +66,12 @@ exports.GridEditCell = function (props) {
             break;
         case 'boolean':
             defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox", onChange: handleOnChange }),
+                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
                 React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId })));
             break;
         default:
             defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { style: { width: '100%' }, className: "k-textbox", value: data || '', onChange: handleOnChange })));
+                React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange })));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/npm/cells/GridFilterCell.js

@@ -14,12 +14,14 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
 var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
 var kendo_react_dateinputs_1 = require("@progress/kendo-react-dateinputs");
 var messages_1 = require("../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var filterCommon_1 = require("../filterCommon");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 var GridFilterCell = /** @class */ (function (_super) {
     __extends(GridFilterCell, _super);
     function GridFilterCell(props) {
@@ -43,18 +45,15 @@ var GridFilterCell = /** @class */ (function (_super) {
      * @hidden
      */
     GridFilterCell.prototype.render = function () {
+        var _a;
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
         var defaultRendering = (React.createElement("div", { className: "k-filtercell" },
-            React.createElement("div", { className: "k-filtercell-wrapper" },
+            React.createElement("span", null,
                 this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues),
-                React.createElement("div", { className: "k-filtercell-operator" },
-                    this.renderOperatorEditor(localizationService),
-                    React.createElement("button", { className: 
-                        /* button is always visible if there is either value or operator */
-                        (!(this.props.value === null || this.props.value === '') || this.props.operator) ?
-                            'k-button k-button-icon k-clear-button-visible' :
-                            'k-button k-button-icon', title: localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton]), type: "button", onClick: this.clear },
-                        React.createElement("span", { className: "k-icon k-i-filter-clear" }))))));
+                React.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(localizationService)),
+                React.createElement(kendo_react_buttons_1.Button, { icon: 'filter-clear', className: 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) {
             return this.props.render.call(undefined, defaultRendering, this.props);
         }
@@ -83,7 +82,7 @@ var GridFilterCell = /** @class */ (function (_super) {
             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 }));
-            default: return (React.createElement("input", { className: "k-textbox", value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e); }, title: this.props.title }));
+            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 }));
         }
     };
     return GridFilterCell;

package/dist/npm/cells/GridSelectionCell.js

@@ -28,7 +28,7 @@ exports.GridSelectionCell = function (props) {
     var selectedValue = utils_1.getNestedValue(props.field, props.dataItem);
     var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
     var defaultRendering = props.rowType !== 'groupHeader' ? (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: props.className, "aria-colindex": props.ariaColumnIndex, role: 'gridcell' }, navigationAttributes),
-        React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox", onChange: handleOnChange }),
+        React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
         React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId }))) : null;
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -33,6 +33,7 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 var kendo_data_query_1 = require("@progress/kendo-data-query");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var utils_1 = require("../utils");
 /**
  * @hidden
@@ -281,13 +282,10 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
         }
         var searchBox = this.props.searchBox ?
             React.createElement(this.props.searchBox, { value: this.state.value, onChange: this.handleSearchChange }) :
-            (React.createElement("div", { className: "k-searchbox" },
-                React.createElement("span", { className: "k-input-prefix" },
-                    React.createElement("span", { className: "k-icon k-i-search" })),
-                React.createElement("input", { className: "k-input", type: "text", placeholder: localizationService.toLanguageString(messages_1.searchPlaceholder, messages_1.messages[messages_1.searchPlaceholder]), value: this.state.value, onChange: this.handleSearchChange }),
-                React.createElement("span", { className: "k-input-suffix" },
-                    React.createElement("button", { type: "button", className: "k-button k-icon-button k-button-clear", onClick: this.handleClear },
-                        React.createElement("span", { className: "k-icon k-i-close" })))));
+            (React.createElement("div", { className: "k-searchbox k-textbox k-input k-input-md k-input-solid" },
+                React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
+                React.createElement(kendo_react_inputs_1.Input, { className: "k-input-inner", type: "text", placeholder: localizationService.toLanguageString(messages_1.searchPlaceholder, messages_1.messages[messages_1.searchPlaceholder]), value: this.state.value, onChange: function (e) { return _this.handleSearchChange(e.nativeEvent); } }),
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", rounded: null, className: "k-input-button", onClick: this.handleClear, icon: "close" })));
         var uniqueFilterValues = filterValues.filter(function (item, index) { return filterValues.indexOf(item) === index; });
         return (React.createElement(GridColumnMenuItemGroup_1.GridColumnMenuItemGroup, null,
             React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(messages_1.filterTitle, messages_1.messages[messages_1.filterTitle]), iconClass: "k-i-filter", onClick: this.onFilterExpand }),
@@ -305,8 +303,8 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
                                 })),
                             React.createElement("div", { className: "k-filter-selected-items" }, uniqueFilterValues.length + ' ' + localizationService.toLanguageString(messages_1.filterSelectedItems, messages_1.messages[messages_1.filterSelectedItems])),
                             React.createElement("div", { className: "k-actions k-hstack k-justify-content-stretch" },
-                                React.createElement("button", { className: 'k-button k-primary', type: 'submit' }, localizationService.toLanguageString(messages_1.filterSubmitButton, messages_1.messages[messages_1.filterSubmitButton])),
-                                React.createElement("button", { className: "k-button", type: 'reset' }, localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton])))))))));
+                                React.createElement(kendo_react_buttons_1.Button, { themeColor: "primary", type: 'submit' }, localizationService.toLanguageString(messages_1.filterSubmitButton, messages_1.messages[messages_1.filterSubmitButton])),
+                                React.createElement(kendo_react_buttons_1.Button, { className: "k-button", type: 'reset' }, localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton])))))))));
     };
     /**
      * @hidden

package/dist/npm/columnMenu/GridColumnMenuFilter.js

@@ -33,6 +33,7 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var filterCommon_1 = require("../filterCommon");
 var messages_1 = require("../messages");
 var GridColumnMenuFilterUI_1 = require("./GridColumnMenuFilterUI");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /**
  * @hidden
  */
@@ -347,11 +348,9 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
                             FilterUI ?
                                 React.createElement(FilterUI, __assign({}, filterUIProps)) :
                                 React.createElement(GridColumnMenuFilterUI_1.GridColumnMenuFilterUI, __assign({}, filterUIProps)),
-                            React.createElement("div", { className: 'k-actions k-hstack k-justify-content-stretch' },
-                                React.createElement("button", { className: 'k-button', type: 'reset' }, localizationService
-                                    .toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton])),
-                                React.createElement("button", { className: 'k-button k-primary', disabled: !isFilterValid }, localizationService
-                                    .toLanguageString(messages_1.filterSubmitButton, messages_1.messages[messages_1.filterSubmitButton])))))))));
+                            React.createElement("div", { className: 'k-actions k-actions-stretched' },
+                                React.createElement(kendo_react_buttons_1.Button, { type: 'reset' }, localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton])),
+                                React.createElement(kendo_react_buttons_1.Button, { themeColor: "primary", disabled: !isFilterValid }, localizationService.toLanguageString(messages_1.filterSubmitButton, messages_1.messages[messages_1.filterSubmitButton])))))))));
     };
     /* eslint-disable max-len */
     /**

package/dist/npm/columnMenu/GridColumnMenuFilterCell.js

@@ -64,7 +64,7 @@ var GridColumnMenuFilterCell = /** @class */ (function (_super) {
             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" }));
-            default: return (React.createElement("input", { className: "k-textbox", value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e); } }));
+            default: return (React.createElement(kendo_react_inputs_1.Input, { value: value || '', onChange: function (e) { _this.inputChange(e.target.value, e.syntheticEvent); } }));
         }
     };
     return GridColumnMenuFilterCell;

package/dist/npm/drag/GroupingIndicator.d.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
 export interface GroupingIndicatorProps {
     title: string;
     dir: 'asc' | 'desc';
-    onRemove?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onSortChange?: (event: React.MouseEvent<HTMLAnchorElement>, dir: string) => void;
     onDrag?: (draggableEvent: any, element: HTMLDivElement) => void;
     onPress?: (draggableEvent: any, element: HTMLDivElement) => void;
@@ -29,6 +29,6 @@ export declare class GroupingIndicator extends React.Component<GroupingIndicator
      */
     onRelease: (data: any) => void;
     sortChange: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
-    groupRemove: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+    groupRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     render(): JSX.Element;
 }

package/dist/npm/drag/GroupingIndicator.js

@@ -15,6 +15,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /**
  * @hidden
  */
@@ -72,8 +73,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
                     React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
                         React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.dir + '-sm' }),
                         this.props.title),
-                    React.createElement("a", { className: "k-button k-button-icon k-flat", tabIndex: -1, onClick: this.groupRemove },
-                        React.createElement("span", { className: "k-icon k-i-group-delete" }))))));
+                    React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'close' })))));
     };
     return GroupingIndicator;
 }(React.Component));

package/dist/npm/header/GridHeaderSelectionCell.js

@@ -41,7 +41,7 @@ var GridHeaderSelectionCell = /** @class */ (function (_super) {
         var _this = this;
         var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
         var defaultRendering = [
-            (React.createElement("input", { key: 0, checked: this.props.selectionValue, id: this._inputId, type: "checkbox", className: "k-checkbox", onChange: function (e) {
+            (React.createElement("input", { key: 0, checked: this.props.selectionValue, id: this._inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: function (e) {
                     return _this.props.selectionChange({
                         field: _this.props.field,
                         syntheticEvent: e

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

@@ -6,7 +6,7 @@ import { ColumnDraggableProps } from '../drag/ColumnDraggable';
  */
 export interface GroupPanelProps extends ColumnDraggableProps {
     group: GroupDescriptor[];
-    groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLAnchorElement>) => void;
+    groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
 }
@@ -14,7 +14,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
  * @hidden
  */
 export declare class GroupPanel extends React.Component<GroupPanelProps, {}> {
-    onGroupRemove: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, index: number) => void;
+    onGroupRemove: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     onGroupSortChange: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, index: number, groupDesc: GroupDescriptor, dir: string) => void;
     render(): JSX.Element;
 }

package/dist/npm/package-metadata.js

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