@progress/kendo-react-data-tools 4.14.1 → 5.0.0-dev.202201182040

package/dist/es/columnmenu/ColumnMenuFilterForm.js

@@ -13,6 +13,7 @@ import * as React from 'react';
 import { Reveal } from '@progress/kendo-react-animation';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { messages, columnMenuFilterClearButton as clear, columnMenuFilterSubmitButton as submit } from '../messages';
+import { Button } from '@progress/kendo-react-buttons';
 export var ColumnMenuForm = function (props) {
     return (React.createElement("div", { className: "k-columnmenu-item-content" },
         React.createElement(Reveal, { style: { position: 'relative', display: 'block' } }, props.show && (React.createElement("div", { className: "kendo-grid-filter-menu-container" },
@@ -27,6 +28,6 @@ export var ColumnMenuForm = function (props) {
 export var ColumnMenuFilterForm = function (props) {
     var localization = useLocalization();
     return (React.createElement(ColumnMenuForm, __assign({}, props, { actions: (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "k-button", type: "reset" }, localization.toLanguageString(clear, messages[clear])),
-            React.createElement("button", { className: "k-button k-primary" }, localization.toLanguageString(submit, messages[submit])))) })));
+            React.createElement(Button, { type: "reset" }, localization.toLanguageString(clear, messages[clear])),
+            React.createElement(Button, { themeColor: 'primary' }, localization.toLanguageString(submit, messages[submit])))) })));
 };

package/dist/es/columnmenu/ColumnMenuFilters.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
-import { NumericTextBox, Checkbox } from '@progress/kendo-react-inputs';
+import { NumericTextBox, Checkbox, Input } from '@progress/kendo-react-inputs';
 import { DatePicker } from '@progress/kendo-react-dateinputs';
 import { messages } from '../messages';
 import { ColumnMenuOperators } from './ColumnMenuOperators';
@@ -43,7 +43,7 @@ export var ColumnMenuBooleanFilter = function (props) {
     return (React.createElement(Checkbox, { onChange: inputChange, checked: filter.value, label: useLocalization().toLanguageString(isTrue, messages[isTrue]), labelPlacement: "after" }));
 };
 export var ColumnMenuTextFilter = function (props) {
-    var input = React.useCallback(function (pr) { return React.createElement("input", __assign({}, pr, { value: pr.value || '', className: "k-textbox" })); }, []);
+    var input = React.useCallback(function (pr) { return React.createElement(Input, __assign({}, pr, { value: pr.value || '' })); }, []);
     var operators = React.useRef(ColumnMenuOperators.text);
     var initialFilter = React.useRef({ operator: '', value: '' });
     return (React.createElement(ColumnMenuFilter, __assign({ initialFilter: initialFilter.current, input: input, operators: props.operators || operators.current }, props)));

package/dist/es/filter/Expression.js

@@ -121,7 +121,7 @@ var Expression = /** @class */ (function (_super) {
                     React.createElement(DropDownList, { data: operators, textField: "text", value: operators.find(function (o) { return o.operator === filter.operator; }), onChange: this.onOperatorChange })),
                 React.createElement(ToolbarItem, { className: "k-filter-value" }, field && React.createElement(field.filter, { filter: filter, onFilterChange: this.onInputChange })),
                 React.createElement(ToolbarItem, null,
-                    React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", look: "flat", type: "button", onClick: this.onFilterRemove })))));
+                    React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
     };
     Expression.propTypes = {
         filter: PropTypes.object.isRequired,

package/dist/es/filter/Group.js

@@ -116,7 +116,7 @@ var Group = /** @class */ (function (_super) {
                     React.createElement(ToolbarItem, null,
                         React.createElement(Button, { title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]), icon: "filter-add-group", type: "button", onClick: this.onAddGroup })),
                     React.createElement(ToolbarItem, null,
-                        React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", look: "flat", type: "button", onClick: this.onGroupRemove })))),
+                        React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onGroupRemove })))),
             filter.filters.length > 0 && (React.createElement("ul", { className: "k-filter-lines" }, filter.filters.map(function (f, idx) {
                 return (React.createElement("li", { key: idx, className: "k-filter-item" }, isCompositeFilterDescriptor(f) ?
                     React.createElement(Group, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove, defaultGroupFilter: _this.props.defaultGroupFilter })

package/dist/es/filteringCells/FilterComponent.js

@@ -23,6 +23,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -75,7 +77,8 @@ export var createFilterComponent = function (settings) {
             return _this;
         }
         FilterComponent.prototype.render = function () {
-            var _a = this.props, _b = _a.clearButtonTitle, clearButtonTitle = _b === void 0 ? '' : _b, _c = _a.operators, operators = _c === void 0 ? [] : _c;
+            var _a;
+            var _b = this.props, _c = _b.clearButtonTitle, clearButtonTitle = _c === void 0 ? '' : _c, _d = _b.operators, operators = _d === void 0 ? [] : _d;
             var filter = this.findCellFilter() || __assign({}, settings.emptyFilter, { operator: '' });
             var operator = filter.operator, value = filter.value;
             var operatorComponentProps = {
@@ -89,16 +92,12 @@ export var createFilterComponent = function (settings) {
                 components: this.props.components
             };
             return (React.createElement("div", { className: "k-filtercell" },
-                React.createElement("div", { className: "k-filtercell-wrapper" },
+                React.createElement("span", null,
                     settings.inputComponent({ value: value, onChange: this.inputChange, components: this.props.components }),
-                    React.createElement("div", { className: "k-filtercell-operator" },
-                        settings.operatorComponent(operatorComponentProps, this.props),
-                        React.createElement("button", { className: 
-                            /* button is always visible if there is either value or operator */
-                            (!(value === null || value === '') || operator) ?
-                                'k-button k-button-icon k-clear-button-visible' :
-                                'k-button k-button-icon', title: clearButtonTitle, type: "button", onClick: this.clearButtonClick },
-                            React.createElement("span", { className: "k-icon k-i-filter-clear" }))))));
+                    React.createElement("div", { className: "k-filtercell-operator" }, settings.operatorComponent(operatorComponentProps, this.props)),
+                    React.createElement(Button, { className: classNames((_a = {},
+                            _a['k-clear-button-visible'] = (!(value === null || value === '') || operator),
+                            _a)), title: clearButtonTitle, type: "button", onClick: this.clearButtonClick, icon: "filter-clear" }))));
         };
         return FilterComponent;
     }(React.Component));

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-data-tools',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642516407,
+    publishDate: 1642537079,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/pager/PagerInput.js

@@ -48,7 +48,7 @@ var PagerInput = /** @class */ (function (_super) {
             ({ messageKey: pagerTotalPages, defaultMessage: messages[pagerTotalPages] });
         return (React.createElement("span", { className: "k-pager-input k-label" },
             localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage),
-            React.createElement("input", { className: "k-textbox", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange }), localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage) + " " + intlService
+            React.createElement("input", { className: "k-input", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange }), localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage) + " " + intlService
             .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
             this.props.totalPages
         ])));

package/dist/npm/columnmenu/ColumnMenuFilterForm.js

@@ -15,6 +15,7 @@ var React = require("react");
 var kendo_react_animation_1 = require("@progress/kendo-react-animation");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 exports.ColumnMenuForm = function (props) {
     return (React.createElement("div", { className: "k-columnmenu-item-content" },
         React.createElement(kendo_react_animation_1.Reveal, { style: { position: 'relative', display: 'block' } }, props.show && (React.createElement("div", { className: "kendo-grid-filter-menu-container" },
@@ -29,6 +30,6 @@ exports.ColumnMenuForm = function (props) {
 exports.ColumnMenuFilterForm = function (props) {
     var localization = kendo_react_intl_1.useLocalization();
     return (React.createElement(exports.ColumnMenuForm, __assign({}, props, { actions: (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "k-button", type: "reset" }, localization.toLanguageString(messages_1.columnMenuFilterClearButton, messages_1.messages[messages_1.columnMenuFilterClearButton])),
-            React.createElement("button", { className: "k-button k-primary" }, localization.toLanguageString(messages_1.columnMenuFilterSubmitButton, messages_1.messages[messages_1.columnMenuFilterSubmitButton])))) })));
+            React.createElement(kendo_react_buttons_1.Button, { type: "reset" }, localization.toLanguageString(messages_1.columnMenuFilterClearButton, messages_1.messages[messages_1.columnMenuFilterClearButton])),
+            React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary' }, localization.toLanguageString(messages_1.columnMenuFilterSubmitButton, messages_1.messages[messages_1.columnMenuFilterSubmitButton])))) })));
 };

package/dist/npm/columnmenu/ColumnMenuFilters.js

@@ -45,7 +45,7 @@ exports.ColumnMenuBooleanFilter = function (props) {
     return (React.createElement(kendo_react_inputs_1.Checkbox, { onChange: inputChange, checked: filter.value, label: kendo_react_intl_1.useLocalization().toLanguageString(isTrue, messages_1.messages[isTrue]), labelPlacement: "after" }));
 };
 exports.ColumnMenuTextFilter = function (props) {
-    var input = React.useCallback(function (pr) { return React.createElement("input", __assign({}, pr, { value: pr.value || '', className: "k-textbox" })); }, []);
+    var input = React.useCallback(function (pr) { return React.createElement(kendo_react_inputs_1.Input, __assign({}, pr, { value: pr.value || '' })); }, []);
     var operators = React.useRef(ColumnMenuOperators_1.ColumnMenuOperators.text);
     var initialFilter = React.useRef({ operator: '', value: '' });
     return (React.createElement(ColumnMenuFilter, __assign({ initialFilter: initialFilter.current, input: input, operators: props.operators || operators.current }, props)));

package/dist/npm/filter/Expression.js

@@ -123,7 +123,7 @@ var Expression = /** @class */ (function (_super) {
                     React.createElement(kendo_react_dropdowns_1.DropDownList, { data: operators, textField: "text", value: operators.find(function (o) { return o.operator === filter.operator; }), onChange: this.onOperatorChange })),
                 React.createElement(kendo_react_buttons_1.ToolbarItem, { className: "k-filter-value" }, field && React.createElement(field.filter, { filter: filter, onFilterChange: this.onInputChange })),
                 React.createElement(kendo_react_buttons_1.ToolbarItem, null,
-                    React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterClose, messages_1.messages[messages_1.filterClose]), icon: "close", look: "flat", type: "button", onClick: this.onFilterRemove })))));
+                    React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterClose, messages_1.messages[messages_1.filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
     };
     Expression.propTypes = {
         filter: PropTypes.object.isRequired,

package/dist/npm/filter/Group.js

@@ -118,7 +118,7 @@ var Group = /** @class */ (function (_super) {
                     React.createElement(kendo_react_buttons_1.ToolbarItem, null,
                         React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterAddGroup, messages_1.messages[messages_1.filterAddGroup]), icon: "filter-add-group", type: "button", onClick: this.onAddGroup })),
                     React.createElement(kendo_react_buttons_1.ToolbarItem, null,
-                        React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterClose, messages_1.messages[messages_1.filterClose]), icon: "close", look: "flat", type: "button", onClick: this.onGroupRemove })))),
+                        React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterClose, messages_1.messages[messages_1.filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onGroupRemove })))),
             filter.filters.length > 0 && (React.createElement("ul", { className: "k-filter-lines" }, filter.filters.map(function (f, idx) {
                 return (React.createElement("li", { key: idx, className: "k-filter-item" }, kendo_data_query_1.isCompositeFilterDescriptor(f) ?
                     React.createElement(Group, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove, defaultGroupFilter: _this.props.defaultGroupFilter })

package/dist/npm/filteringCells/FilterComponent.js

@@ -25,6 +25,8 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -77,7 +79,8 @@ exports.createFilterComponent = function (settings) {
             return _this;
         }
         FilterComponent.prototype.render = function () {
-            var _a = this.props, _b = _a.clearButtonTitle, clearButtonTitle = _b === void 0 ? '' : _b, _c = _a.operators, operators = _c === void 0 ? [] : _c;
+            var _a;
+            var _b = this.props, _c = _b.clearButtonTitle, clearButtonTitle = _c === void 0 ? '' : _c, _d = _b.operators, operators = _d === void 0 ? [] : _d;
             var filter = this.findCellFilter() || __assign({}, settings.emptyFilter, { operator: '' });
             var operator = filter.operator, value = filter.value;
             var operatorComponentProps = {
@@ -91,16 +94,12 @@ exports.createFilterComponent = function (settings) {
                 components: this.props.components
             };
             return (React.createElement("div", { className: "k-filtercell" },
-                React.createElement("div", { className: "k-filtercell-wrapper" },
+                React.createElement("span", null,
                     settings.inputComponent({ value: value, onChange: this.inputChange, components: this.props.components }),
-                    React.createElement("div", { className: "k-filtercell-operator" },
-                        settings.operatorComponent(operatorComponentProps, this.props),
-                        React.createElement("button", { className: 
-                            /* button is always visible if there is either value or operator */
-                            (!(value === null || value === '') || operator) ?
-                                'k-button k-button-icon k-clear-button-visible' :
-                                'k-button k-button-icon', title: clearButtonTitle, type: "button", onClick: this.clearButtonClick },
-                            React.createElement("span", { className: "k-icon k-i-filter-clear" }))))));
+                    React.createElement("div", { className: "k-filtercell-operator" }, settings.operatorComponent(operatorComponentProps, this.props)),
+                    React.createElement(kendo_react_buttons_1.Button, { className: kendo_react_common_1.classNames((_a = {},
+                            _a['k-clear-button-visible'] = (!(value === null || value === '') || operator),
+                            _a)), title: clearButtonTitle, type: "button", onClick: this.clearButtonClick, icon: "filter-clear" }))));
         };
         return FilterComponent;
     }(React.Component));

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-data-tools',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642516407,
+    publishDate: 1642537079,
     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/pager/PagerInput.js

@@ -50,7 +50,7 @@ var PagerInput = /** @class */ (function (_super) {
             ({ messageKey: messages_1.pagerTotalPages, defaultMessage: messages_1.messages[messages_1.pagerTotalPages] });
         return (React.createElement("span", { className: "k-pager-input k-label" },
             localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage),
-            React.createElement("input", { className: "k-textbox", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange }), localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage) + " " + intlService
+            React.createElement("input", { className: "k-input", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange }), localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage) + " " + intlService
             .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
             this.props.totalPages
         ])));