@progress/kendo-react-grid 4.14.0-dev.202201141457 → 5.0.0-dev.202201182040

package/dist/es/cells/GridEditCell.js

@@ -69,7 +69,7 @@ export var GridEditCell = function (props) {
             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 }))));
         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/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/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: 1642171551,
+    publishDate: 1642537604,
     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

@@ -71,7 +71,7 @@ exports.GridEditCell = function (props) {
             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 }))));
         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/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/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: 1642171551,
+    publishDate: 1642537604,
     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'
 };