@progress/kendo-react-data-tools 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

package/dist/es/columnmenu/ColumnMenu.js

@@ -40,6 +40,7 @@ import { ColumnMenuFilterForm } from './ColumnMenuFilterForm';
 import { messages, columnMenuFilterTitle, columnMenuSortAscending, columnMenuSortDescending } from '../messages';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 /** @hidden */
 var ColumnMenuWrapper = function (props) {
     validatePackage(packageMetadata);
@@ -150,9 +151,9 @@ var ColumnMenuWrapper = function (props) {
     var localization = useLocalization();
     var sorting = (sortAsc || sortDesc) ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "sorting" },
         sortAsc &&
-            (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortAscending, messages[columnMenuSortAscending]), iconClass: "k-i-sort-asc-sm", selected: currentSort.dir === 'asc', onClick: sortAscChange })),
+            (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortAscending, messages[columnMenuSortAscending]), iconClass: "k-i-sort-asc-small", svgIcon: sortAscSmallIcon, selected: currentSort.dir === 'asc', onClick: sortAscChange })),
         sortDesc &&
-            (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortDescending, messages[columnMenuSortDescending]), iconClass: "k-i-sort-desc-sm", selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
+            (React.createElement(ColumnMenuItem, { title: localization.toLanguageString(columnMenuSortDescending, messages[columnMenuSortDescending]), iconClass: "k-i-sort-desc-small", svgIcon: sortDescSmallIcon, selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
     // filter content empty when no field is supplied
     var filtering = currentFilter && filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
         React.createElement(ColumnMenuItem, { iconClass: "k-i-filter", title: localization.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]), onClick: filterItemClick }),

package/dist/es/columnmenu/ColumnMenuItem.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 export interface ColumnMenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     selected?: boolean;
     disabled?: boolean;
     iconClass?: string;
+    svgIcon?: SVGIcon;
     title: string;
 }
 export declare const ColumnMenuItem: React.FunctionComponent<ColumnMenuItemProps>;

package/dist/es/columnmenu/ColumnMenuItem.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, IconWrap, toIconName } from '@progress/kendo-react-common';
 export var ColumnMenuItem = function (props) {
     return (React.createElement("div", { onClick: props.onClick, className: classNames('k-columnmenu-item', { 'k-selected': props.selected }, { 'k-disabled': props.disabled }) },
-        props.iconClass && React.createElement("span", { className: "k-icon ".concat(props.iconClass) }),
+        (props.iconClass || props.svgIcon) && React.createElement(IconWrap, { name: props.iconClass ? toIconName(props.iconClass) : undefined, icon: props.svgIcon }),
         props.title));
 };

package/dist/es/drag/DragClue.js

@@ -15,7 +15,8 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { canUseDOM } from '@progress/kendo-react-common';
+import { canUseDOM, IconWrap } from '@progress/kendo-react-common';
+import { cancelIcon, plusIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -43,6 +44,7 @@ var DragClue = /** @class */ (function (_super) {
     });
     DragClue.prototype.render = function () {
         var hiddenElement = this.hiddenElementRef.current;
+        var status = this.state.status;
         var dragClue = this.state.visible && canUseDOM && createPortal((React.createElement("div", { ref: this.elementRef, className: "k-header k-drag-clue", style: {
                 display: 'block',
                 position: 'absolute',
@@ -51,8 +53,7 @@ var DragClue = /** @class */ (function (_super) {
                 top: this.state.top + 'px',
                 left: this.state.left + 'px'
             } },
-            React.createElement("span", { className: 'k-icon k-drag-status ' + this.state.status + ' k-icon-with-modifier' },
-                React.createElement("span", { className: "k-icon k-icon-modifier" })),
+            React.createElement(IconWrap, { className: 'k-drag-status k-icon-with-modifier', name: status, icon: status === 'k-i-cancel' ? cancelIcon : plusIcon }),
             this.state.innerText)), (hiddenElement && hiddenElement.ownerDocument ?
             hiddenElement.ownerDocument.body :
             document.body));

package/dist/es/filter/Expression.js

@@ -40,6 +40,7 @@ import * as PropTypes from 'prop-types';
 import { Button, Toolbar, ToolbarItem } from '@progress/kendo-react-buttons';
 import { DropDownList } from '@progress/kendo-react-dropdowns';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { xIcon } from '@progress/kendo-svg-icons';
 import { unaryOperator, stringOperator } from './operators';
 import { messages, filterClose, filterExpressionAriaLabel, filterExpressionDropdownAriaLabel, filterExpressionOperatorDropdownAriaLabel } from '../messages';
 var setInitialValue = function (filter) {
@@ -125,7 +126,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, ariaLabel: locService.toLanguageString(filterExpressionOperatorDropdownAriaLabel, messages[filterExpressionOperatorDropdownAriaLabel]) })),
                 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", fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
+                    React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "x", svgIcon: xIcon, fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
     };
     Expression.propTypes = {
         filter: PropTypes.object.isRequired,

package/dist/es/filter/Group.js

@@ -38,6 +38,7 @@ import * as PropTypes from 'prop-types';
 import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { Button, Toolbar, ToolbarItem, ButtonGroup } from '@progress/kendo-react-buttons';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { filterAddExpressionIcon, filterAddGroupIcon, xIcon } from '@progress/kendo-svg-icons';
 import { Expression } from './Expression';
 import { stringOperator } from './operators';
 import { messages, filterAndLogic, filterOrLogic, filterAddExpression, filterAddGroup, filterClose, filterGroupAriaLabel } from '../messages';
@@ -139,11 +140,11 @@ var Group = /** @class */ (function (_super) {
                             React.createElement(Button, { togglable: true, onClick: this.onLogicAnd, selected: filter.logic === 'and', type: "button" }, locService.toLanguageString(filterAndLogic, messages[filterAndLogic])),
                             React.createElement(Button, { togglable: true, onClick: this.onLogicOr, selected: filter.logic === 'or', type: "button" }, locService.toLanguageString(filterOrLogic, messages[filterOrLogic])))),
                     React.createElement(ToolbarItem, null,
-                        React.createElement(Button, { title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]), icon: "filter-add-expression", type: "button", onClick: this.onAddExpression })),
+                        React.createElement(Button, { title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]), icon: "filter-add-expression", svgIcon: filterAddExpressionIcon, type: "button", onClick: this.onAddExpression })),
                     React.createElement(ToolbarItem, null,
-                        React.createElement(Button, { title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]), icon: "filter-add-group", type: "button", onClick: this.onAddGroup })),
+                        React.createElement(Button, { title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]), icon: "filter-add-group", svgIcon: filterAddGroupIcon, type: "button", onClick: this.onAddGroup })),
                     React.createElement(ToolbarItem, null,
-                        React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "close", fillMode: "flat", type: "button", onClick: this.onGroupRemove })))),
+                        React.createElement(Button, { title: locService.toLanguageString(filterClose, messages[filterClose]), icon: "x", svgIcon: xIcon, 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, ariaLabel: _this.props.ariaLabel, ariaLabelExpression: _this.props.ariaLabelExpression })

package/dist/es/filteringCells/FilterComponent.js

@@ -36,6 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import * as React from 'react';
 import { Button } from '@progress/kendo-react-buttons';
 import { classNames } from '@progress/kendo-react-common';
+import { filterClearIcon, filterIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -97,7 +98,8 @@ export var createFilterComponent = function (settings) {
                 value: operators.find(function (item) { return item.operator === operator; }) || null,
                 onChange: this.operatorChange,
                 className: 'k-dropdown-operator',
-                iconClassName: 'k-i-filter k-icon',
+                iconClassName: 'k-i-filter',
+                svgIcon: filterIcon,
                 data: operators,
                 textField: 'text',
                 popupSettings: { width: '' },
@@ -116,7 +118,7 @@ export var createFilterComponent = function (settings) {
                         "\u00A0",
                         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", disabled: !(!(value === null || value === '') || operator) })))));
+                                _a)), title: clearButtonTitle, type: "button", onClick: this.clearButtonClick, icon: "filter-clear", svgIcon: filterClearIcon, disabled: !(!(value === null || value === '') || operator) })))));
         };
         return FilterComponent;
     }(React.Component));

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

@@ -30,7 +30,7 @@ export interface HeaderRowProps<C = CellProps, H = HeaderCellProps, F = FilterCe
 export declare class HeaderRow<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends React.Component<HeaderRowProps<C, H, F>, {}> {
     cellClick: (e: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
     cellKeyDown: (event: React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
-    sortIcon(sortIndex: number): false | (false | JSX.Element)[] | null;
+    sortIcon(sortIndex: number): (false | JSX.Element)[] | null;
     render(): JSX.Element[];
     private cells;
 }

package/dist/es/header/HeaderRow.js

@@ -30,8 +30,9 @@ import { normalize } from './SortSettings';
 import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
 import { HeaderThElement } from './HeaderThElement';
-import { classNames, Icon, Keys } from '@progress/kendo-react-common';
+import { classNames, IconWrap, Keys } from '@progress/kendo-react-common';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import { messages, sortAriaLabel } from '../messages';
 /**
  * @hidden
@@ -135,11 +136,15 @@ var HeaderRow = /** @class */ (function (_super) {
         return _this;
     }
     HeaderRow.prototype.sortIcon = function (sortIndex) {
-        if (!this.props.sort) {
+        if (!this.props.sort || sortIndex < 0) {
             return null;
         }
-        return sortIndex >= 0 && [
-            React.createElement(Icon, { key: 1, name: "sort-".concat(this.props.sort[sortIndex].dir, "-small") }),
+        var dir = this.props.sort[sortIndex].dir;
+        if (!dir) {
+            return null;
+        }
+        return [
+            React.createElement(IconWrap, { key: 1, name: "sort-".concat(dir, "-small"), icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon }),
             this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
         ];
     };

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: 1673259211,
+    publishDate: 1673444801,
     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/Pager.js

@@ -34,6 +34,7 @@ import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPa
 import { registerForIntl, registerForLocalization, provideLocalizationService, provideIntlService } from '@progress/kendo-react-intl';
 import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
+import { caretAltToLeftIcon, caretAltLeftIcon, caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
@@ -138,10 +139,10 @@ var Pager = /** @class */ (function (_super) {
             ({ messageKey: pagerAriaLabel, defaultMessage: messages[pagerAriaLabel] });
         var first, prev, next, last;
         if (this.props.previousNext) {
-            first = this.renderButton(1, 'k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'caret-alt-to-left', (currentPage === 1 ? true : undefined));
-            prev = this.renderButton(currentPage - 1, 'k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'caret-alt-left', (currentPage === 1 ? true : undefined));
-            next = this.renderButton(currentPage + 1, 'k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'caret-alt-right', (currentPage >= this.totalPages ? true : undefined));
-            last = this.renderButton(this.totalPages, 'k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'caret-alt-to-right', (currentPage >= this.totalPages ? true : undefined));
+            first = this.renderButton(1, 'k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'caret-alt-to-left', caretAltToLeftIcon, (currentPage === 1 ? true : undefined));
+            prev = this.renderButton(currentPage - 1, 'k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'caret-alt-left', caretAltLeftIcon, (currentPage === 1 ? true : undefined));
+            next = this.renderButton(currentPage + 1, 'k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'caret-alt-right', caretAltRightIcon, (currentPage >= this.totalPages ? true : undefined));
+            last = this.renderButton(this.totalPages, 'k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'caret-alt-to-right', caretAltToRightIcon, (currentPage >= this.totalPages ? true : undefined));
         }
         var pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, messagesMap: messagesMap, size: this.props.size }));
         var info = this.props.info && (React.createElement("div", { className: "k-pager-info k-label" }, intlService
@@ -162,9 +163,9 @@ var Pager = /** @class */ (function (_super) {
             pagerPageSizes,
             info));
     };
-    Pager.prototype.renderButton = function (page, className, title, icon, isDisabled) {
+    Pager.prototype.renderButton = function (page, className, title, icon, svgIcon, isDisabled) {
         var _this = this;
-        return (React.createElement(Button, { fillMode: 'flat', themeColor: 'base', size: this.props.size, rounded: null, className: className, icon: icon, title: title, role: "button", "aria-disabled": isDisabled, onClick: function (e) {
+        return (React.createElement(Button, { fillMode: 'flat', themeColor: 'base', size: this.props.size, rounded: null, className: className, icon: icon, svgIcon: svgIcon, title: title, role: "button", "aria-disabled": isDisabled, onClick: function (e) {
                 e.preventDefault();
                 _this.changePage(page, e);
             } }));

package/dist/npm/columnmenu/ColumnMenu.js

@@ -43,6 +43,7 @@ var ColumnMenuFilterForm_1 = require("./ColumnMenuFilterForm");
 var messages_1 = require("../messages");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /** @hidden */
 var ColumnMenuWrapper = function (props) {
     (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
@@ -153,9 +154,9 @@ var ColumnMenuWrapper = function (props) {
     var localization = (0, kendo_react_intl_1.useLocalization)();
     var sorting = (sortAsc || sortDesc) ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "sorting" },
         sortAsc &&
-            (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortAscending, messages_1.messages[messages_1.columnMenuSortAscending]), iconClass: "k-i-sort-asc-sm", selected: currentSort.dir === 'asc', onClick: sortAscChange })),
+            (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortAscending, messages_1.messages[messages_1.columnMenuSortAscending]), iconClass: "k-i-sort-asc-small", svgIcon: kendo_svg_icons_1.sortAscSmallIcon, selected: currentSort.dir === 'asc', onClick: sortAscChange })),
         sortDesc &&
-            (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortDescending, messages_1.messages[messages_1.columnMenuSortDescending]), iconClass: "k-i-sort-desc-sm", selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
+            (React.createElement(ColumnMenuItem_1.ColumnMenuItem, { title: localization.toLanguageString(messages_1.columnMenuSortDescending, messages_1.messages[messages_1.columnMenuSortDescending]), iconClass: "k-i-sort-desc-small", svgIcon: kendo_svg_icons_1.sortDescSmallIcon, selected: currentSort.dir === 'desc', onClick: sortDescChange })))) : null;
     // filter content empty when no field is supplied
     var filtering = currentFilter && filterContent.length > 0 ? (React.createElement("div", { className: "k-columnmenu-item-wrapper", key: "filtering" },
         React.createElement(ColumnMenuItem_1.ColumnMenuItem, { iconClass: "k-i-filter", title: localization.toLanguageString(messages_1.columnMenuFilterTitle, messages_1.messages[messages_1.columnMenuFilterTitle]), onClick: filterItemClick }),

package/dist/npm/columnmenu/ColumnMenuItem.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 export interface ColumnMenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     selected?: boolean;
     disabled?: boolean;
     iconClass?: string;
+    svgIcon?: SVGIcon;
     title: string;
 }
 export declare const ColumnMenuItem: React.FunctionComponent<ColumnMenuItemProps>;

package/dist/npm/columnmenu/ColumnMenuItem.js

@@ -5,7 +5,7 @@ var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var ColumnMenuItem = function (props) {
     return (React.createElement("div", { onClick: props.onClick, className: (0, kendo_react_common_1.classNames)('k-columnmenu-item', { 'k-selected': props.selected }, { 'k-disabled': props.disabled }) },
-        props.iconClass && React.createElement("span", { className: "k-icon ".concat(props.iconClass) }),
+        (props.iconClass || props.svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: props.iconClass ? (0, kendo_react_common_1.toIconName)(props.iconClass) : undefined, icon: props.svgIcon }),
         props.title));
 };
 exports.ColumnMenuItem = ColumnMenuItem;

package/dist/npm/drag/DragClue.js

@@ -19,6 +19,7 @@ exports.DragClue = void 0;
 var React = require("react");
 var react_dom_1 = require("react-dom");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -46,6 +47,7 @@ var DragClue = /** @class */ (function (_super) {
     });
     DragClue.prototype.render = function () {
         var hiddenElement = this.hiddenElementRef.current;
+        var status = this.state.status;
         var dragClue = this.state.visible && kendo_react_common_1.canUseDOM && (0, react_dom_1.createPortal)((React.createElement("div", { ref: this.elementRef, className: "k-header k-drag-clue", style: {
                 display: 'block',
                 position: 'absolute',
@@ -54,8 +56,7 @@ var DragClue = /** @class */ (function (_super) {
                 top: this.state.top + 'px',
                 left: this.state.left + 'px'
             } },
-            React.createElement("span", { className: 'k-icon k-drag-status ' + this.state.status + ' k-icon-with-modifier' },
-                React.createElement("span", { className: "k-icon k-icon-modifier" })),
+            React.createElement(kendo_react_common_1.IconWrap, { className: 'k-drag-status k-icon-with-modifier', name: status, icon: status === 'k-i-cancel' ? kendo_svg_icons_1.cancelIcon : kendo_svg_icons_1.plusIcon }),
             this.state.innerText)), (hiddenElement && hiddenElement.ownerDocument ?
             hiddenElement.ownerDocument.body :
             document.body));

package/dist/npm/filter/Expression.js

@@ -43,6 +43,7 @@ var PropTypes = require("prop-types");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var operators_1 = require("./operators");
 var messages_1 = require("../messages");
 var setInitialValue = function (filter) {
@@ -128,7 +129,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, ariaLabel: locService.toLanguageString(messages_1.filterExpressionOperatorDropdownAriaLabel, messages_1.messages[messages_1.filterExpressionOperatorDropdownAriaLabel]) })),
                 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", fillMode: "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: "x", svgIcon: kendo_svg_icons_1.xIcon, fillMode: "flat", type: "button", onClick: this.onFilterRemove })))));
     };
     Expression.propTypes = {
         filter: PropTypes.object.isRequired,

package/dist/npm/filter/Group.js

@@ -41,6 +41,7 @@ var PropTypes = require("prop-types");
 var kendo_data_query_1 = require("@progress/kendo-data-query");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var Expression_1 = require("./Expression");
 var operators_1 = require("./operators");
 var messages_1 = require("../messages");
@@ -142,11 +143,11 @@ var Group = /** @class */ (function (_super) {
                             React.createElement(kendo_react_buttons_1.Button, { togglable: true, onClick: this.onLogicAnd, selected: filter.logic === 'and', type: "button" }, locService.toLanguageString(messages_1.filterAndLogic, messages_1.messages[messages_1.filterAndLogic])),
                             React.createElement(kendo_react_buttons_1.Button, { togglable: true, onClick: this.onLogicOr, selected: filter.logic === 'or', type: "button" }, locService.toLanguageString(messages_1.filterOrLogic, messages_1.messages[messages_1.filterOrLogic])))),
                     React.createElement(kendo_react_buttons_1.ToolbarItem, null,
-                        React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterAddExpression, messages_1.messages[messages_1.filterAddExpression]), icon: "filter-add-expression", type: "button", onClick: this.onAddExpression })),
+                        React.createElement(kendo_react_buttons_1.Button, { title: locService.toLanguageString(messages_1.filterAddExpression, messages_1.messages[messages_1.filterAddExpression]), icon: "filter-add-expression", svgIcon: kendo_svg_icons_1.filterAddExpressionIcon, type: "button", onClick: this.onAddExpression })),
                     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.Button, { title: locService.toLanguageString(messages_1.filterAddGroup, messages_1.messages[messages_1.filterAddGroup]), icon: "filter-add-group", svgIcon: kendo_svg_icons_1.filterAddGroupIcon, 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", fillMode: "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: "x", svgIcon: kendo_svg_icons_1.xIcon, 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" }, (0, kendo_data_query_1.isCompositeFilterDescriptor)(f) ?
                     React.createElement(Group, { filter: f, fields: fields, onChange: _this.onChange, onRemove: _this.onRemove, defaultGroupFilter: _this.props.defaultGroupFilter, ariaLabel: _this.props.ariaLabel, ariaLabelExpression: _this.props.ariaLabelExpression })

package/dist/npm/filteringCells/FilterComponent.js

@@ -39,6 +39,7 @@ exports.createFilterComponent = void 0;
 var React = require("react");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -100,7 +101,8 @@ var createFilterComponent = function (settings) {
                 value: operators.find(function (item) { return item.operator === operator; }) || null,
                 onChange: this.operatorChange,
                 className: 'k-dropdown-operator',
-                iconClassName: 'k-i-filter k-icon',
+                iconClassName: 'k-i-filter',
+                svgIcon: kendo_svg_icons_1.filterIcon,
                 data: operators,
                 textField: 'text',
                 popupSettings: { width: '' },
@@ -119,7 +121,7 @@ var createFilterComponent = function (settings) {
                         "\u00A0",
                         React.createElement(kendo_react_buttons_1.Button, { className: (0, 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", disabled: !(!(value === null || value === '') || operator) })))));
+                                _a)), title: clearButtonTitle, type: "button", onClick: this.clearButtonClick, icon: "filter-clear", svgIcon: kendo_svg_icons_1.filterClearIcon, disabled: !(!(value === null || value === '') || operator) })))));
         };
         return FilterComponent;
     }(React.Component));

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

@@ -30,7 +30,7 @@ export interface HeaderRowProps<C = CellProps, H = HeaderCellProps, F = FilterCe
 export declare class HeaderRow<C = CellProps, H = HeaderCellProps, F = FilterCellProps> extends React.Component<HeaderRowProps<C, H, F>, {}> {
     cellClick: (e: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
     cellKeyDown: (event: React.KeyboardEvent<HTMLElement>, column: TreeColumnBaseProps<C, H, F>) => void;
-    sortIcon(sortIndex: number): false | (false | JSX.Element)[] | null;
+    sortIcon(sortIndex: number): (false | JSX.Element)[] | null;
     render(): JSX.Element[];
     private cells;
 }

package/dist/npm/header/HeaderRow.js

@@ -35,6 +35,7 @@ var ColumnDraggable_1 = require("../drag/ColumnDraggable");
 var HeaderThElement_1 = require("./HeaderThElement");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var messages_1 = require("../messages");
 /**
  * @hidden
@@ -138,11 +139,15 @@ var HeaderRow = /** @class */ (function (_super) {
         return _this;
     }
     HeaderRow.prototype.sortIcon = function (sortIndex) {
-        if (!this.props.sort) {
+        if (!this.props.sort || sortIndex < 0) {
             return null;
         }
-        return sortIndex >= 0 && [
-            React.createElement(kendo_react_common_1.Icon, { key: 1, name: "sort-".concat(this.props.sort[sortIndex].dir, "-small") }),
+        var dir = this.props.sort[sortIndex].dir;
+        if (!dir) {
+            return null;
+        }
+        return [
+            React.createElement(kendo_react_common_1.IconWrap, { key: 1, name: "sort-".concat(dir, "-small"), icon: dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon }),
             this.props.sort.length > 1 && React.createElement("span", { key: 2, className: "k-sort-order" }, sortIndex + 1)
         ];
     };

package/dist/npm/package-metadata.js

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

@@ -37,6 +37,7 @@ var messages_1 = require("../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var package_metadata_1 = require("../package-metadata");
 /**
  * @hidden
@@ -141,10 +142,10 @@ var Pager = /** @class */ (function (_super) {
             ({ messageKey: messages_1.pagerAriaLabel, defaultMessage: messages_1.messages[messages_1.pagerAriaLabel] });
         var first, prev, next, last;
         if (this.props.previousNext) {
-            first = this.renderButton(1, 'k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'caret-alt-to-left', (currentPage === 1 ? true : undefined));
-            prev = this.renderButton(currentPage - 1, 'k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'caret-alt-left', (currentPage === 1 ? true : undefined));
-            next = this.renderButton(currentPage + 1, 'k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'caret-alt-right', (currentPage >= this.totalPages ? true : undefined));
-            last = this.renderButton(this.totalPages, 'k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'caret-alt-to-right', (currentPage >= this.totalPages ? true : undefined));
+            first = this.renderButton(1, 'k-pager-nav k-pager-first' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(firstPageMessage.messageKey, firstPageMessage.defaultMessage), 'caret-alt-to-left', kendo_svg_icons_1.caretAltToLeftIcon, (currentPage === 1 ? true : undefined));
+            prev = this.renderButton(currentPage - 1, 'k-pager-nav' + (currentPage === 1 ? ' k-disabled' : ''), localizationService.toLanguageString(previousPageMessage.messageKey, previousPageMessage.defaultMessage), 'caret-alt-left', kendo_svg_icons_1.caretAltLeftIcon, (currentPage === 1 ? true : undefined));
+            next = this.renderButton(currentPage + 1, 'k-pager-nav' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(nextPageMessage.messageKey, nextPageMessage.defaultMessage), 'caret-alt-right', kendo_svg_icons_1.caretAltRightIcon, (currentPage >= this.totalPages ? true : undefined));
+            last = this.renderButton(this.totalPages, 'k-pager-nav k-pager-last' + (currentPage >= this.totalPages ? ' k-disabled' : ''), localizationService.toLanguageString(lastPageMessage.messageKey, lastPageMessage.defaultMessage), 'caret-alt-to-right', kendo_svg_icons_1.caretAltToRightIcon, (currentPage >= this.totalPages ? true : undefined));
         }
         var pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes_1.PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, messagesMap: messagesMap, size: this.props.size }));
         var info = this.props.info && (React.createElement("div", { className: "k-pager-info k-label" }, intlService
@@ -165,9 +166,9 @@ var Pager = /** @class */ (function (_super) {
             pagerPageSizes,
             info));
     };
-    Pager.prototype.renderButton = function (page, className, title, icon, isDisabled) {
+    Pager.prototype.renderButton = function (page, className, title, icon, svgIcon, isDisabled) {
         var _this = this;
-        return (React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', themeColor: 'base', size: this.props.size, rounded: null, className: className, icon: icon, title: title, role: "button", "aria-disabled": isDisabled, onClick: function (e) {
+        return (React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', themeColor: 'base', size: this.props.size, rounded: null, className: className, icon: icon, svgIcon: svgIcon, title: title, role: "button", "aria-disabled": isDisabled, onClick: function (e) {
                 e.preventDefault();
                 _this.changePage(page, e);
             } }));