@progress/kendo-react-grid 5.10.0-dev.202301092204 → 5.10.0-dev.202301111405

package/dist/es/Grid.js

@@ -633,19 +633,20 @@ var Grid = /** @class */ (function (_super) {
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
                     React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
-                        React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                _this.vs.table = table;
-                                _this.tableElement = table;
-                            } },
-                            React.createElement("table", { className: classNames('k-table k-grid-table', (_c = {
-                                        'k-grid-md': !this.props.size
-                                    },
-                                    _c["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                    _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                colGroups,
-                                React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
-                                        _this.vs.tableBody = tableBody;
-                                    }, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body))),
+                        React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
+                            React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
+                                    _this.vs.table = table;
+                                    _this.tableElement = table;
+                                } },
+                                React.createElement("table", { className: classNames('k-table k-grid-table', (_c = {
+                                            'k-grid-md': !this.props.size
+                                        },
+                                        _c["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                        _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                    colGroups,
+                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
+                                            _this.vs.tableBody = tableBody;
+                                        }, role: 'rowgroup' }, tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),

package/dist/es/VirtualScroll.js

@@ -34,7 +34,11 @@ var VirtualScroll = /** @class */ (function () {
             for (var i = 0; i < topItemsCount; i++) {
                 topItemsHeight += heights[i].line + heights[i].acc;
             }
-            return { topItemsCount: topItemsCount, topItemsHeight: topItemsHeight };
+            return {
+                topItemsCount: topItemsCount,
+                topItemsHeight: topItemsHeight,
+                itemsNeededOnScreen: itemsOnScreen + itemsOnScreen / 2
+            };
         };
         this.horizontalScrollbarHeight = function () {
             if (!_this.container) {
@@ -117,9 +121,9 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
-        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight, itemsNeededOnScreen = _a.itemsNeededOnScreen;
         var additionalOnTop = scrollTop - targetTranslate;
-        if (additionalOnTop > topItemsHeight) {
+        if ((additionalOnTop > topItemsHeight) || heights.length <= itemsNeededOnScreen) {
             return;
         }
         while ((rowsCount < this.topCacheCount + this.attendedSkip - this.realSkip + topItemsCount)
@@ -161,13 +165,13 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
-        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight, itemsNeededOnScreen = _a.itemsNeededOnScreen;
         while (rowsCount < heights.length - this.topCacheCount &&
             !(targetTranslate + heights[rowsCount].line + heights[rowsCount].acc > scrollTop)) {
             targetTranslate += heights[rowsCount].line + heights[rowsCount].acc;
             rowsCount++;
         }
-        if (topItemsCount > this.propsSkip + rowsCount) {
+        if ((topItemsCount > this.propsSkip + rowsCount) || heights.length <= itemsNeededOnScreen) {
             return;
         }
         if (rowsCount >= heights.length - this.topCacheCount && this.propsSkip + rowsCount >= this.total) {

package/dist/es/cells/GridFilterCell.js

@@ -20,6 +20,7 @@ import { NumericTextBox, TextBox } 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 { filterClearIcon, filterIcon } from '@progress/kendo-svg-icons';
 import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon';
 import { classNames } from '@progress/kendo-react-common';
 var GridFilterCell = /** @class */ (function (_super) {
@@ -31,7 +32,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 return;
             }
             var value = _this.props.operators.find(function (item) { return item.operator === _this.props.operator; }) || null;
-            return (React.createElement(DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(filterChooseOperator, messages[filterChooseOperator]), popupSettings: {
+            return (React.createElement(DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", svgIcon: filterIcon, data: _this.props.operators, textField: "text", title: localization.toLanguageString(filterChooseOperator, messages[filterChooseOperator]), popupSettings: {
                     width: ''
                 } }));
         };
@@ -53,7 +54,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-filtercell-operator" },
                     this.renderOperatorEditor(localizationService),
                     "\u00A0",
-                    React.createElement(Button, { size: this.props.size, icon: 'filter-clear', className: classNames((_a = {},
+                    React.createElement(Button, { size: this.props.size, icon: 'filter-clear', svgIcon: filterClearIcon, 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) {

package/dist/es/cells/GridGroupCell.js

@@ -9,9 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { classNames, Keys } from '@progress/kendo-react-common';
+import { classNames, IconWrap, Keys } from '@progress/kendo-react-common';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
 import { useLocalization } from '@progress/kendo-react-intl';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as React from 'react';
 import { messages, groupCollapse, groupExpand } from '../messages';
 /**
@@ -54,7 +55,8 @@ export var GridGroupCell = function (props) {
                                 value: !expanded
                             });
                         }
-                    }, href: "#", tabIndex: -1, "aria-label": message, className: expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon' }),
+                    }, href: "#", tabIndex: -1, "aria-label": message },
+                    React.createElement(IconWrap, { name: expanded ? 'caret-alt-down' : 'caret-alt-right', icon: expanded ? caretAltDownIcon : caretAltRightIcon })),
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));

package/dist/es/cells/GridHierarchyCell.js

@@ -13,8 +13,9 @@ import * as React from 'react';
 import { getNestedValue } from './../utils';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
 import { useLocalization } from '@progress/kendo-react-intl';
-import { Keys } from '@progress/kendo-react-common';
+import { IconWrap, Keys } from '@progress/kendo-react-common';
 import { detailCollapse, detailExpand, messages } from '../messages';
+import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -43,7 +44,6 @@ export var GridHierarchyCell = function (props) {
             React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
     }
     else if (props.rowType !== 'groupHeader') {
-        var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
         var baseMessage = expanded ? detailCollapse : detailExpand;
         var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
@@ -58,7 +58,8 @@ export var GridHierarchyCell = function (props) {
                             value: !expanded
                         });
                     }
-                }, "aria-label": message, className: className, href: "#", tabIndex: -1 })));
+                }, "aria-label": message, href: "#", tabIndex: -1 },
+                React.createElement(IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? minusIcon : plusIcon }))));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -41,9 +41,10 @@ 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 { clone, IconWrap } from '@progress/kendo-react-common';
 import { Button } from '@progress/kendo-react-buttons';
 import { getNestedValue } from '../utils';
+import { filterIcon, searchIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -292,12 +293,12 @@ 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 k-textbox k-input k-input-md k-input-solid" },
-                React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
+                React.createElement(IconWrap, { className: "k-input-icon", name: 'search', icon: searchIcon }),
                 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" })));
+                React.createElement(Button, { type: "button", rounded: null, className: "k-input-button", onClick: this.handleClear, icon: "x", svgIcon: xIcon })));
         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 }),
+            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: "k-i-filter", svgIcon: filterIcon, onClick: this.onFilterExpand }),
             React.createElement(GridColumnMenuItemContent, { show: !!expandState },
                 React.createElement("div", { className: "kendo-grid-filter-menu-container" },
                     React.createElement("form", { className: "k-filter-menu k-group k-reset k-state-border-up", onSubmit: this.submit, onReset: this.clear },

package/dist/es/columnMenu/GridColumnMenuFilter.js

@@ -43,6 +43,7 @@ import { operatorMap, getDefaultOperator, filterLogicList, defaultHideSecondFilt
 import { messages, filterClearButton, filterSubmitButton, filterTitle } from '../messages';
 import { GridColumnMenuFilterUI } from './GridColumnMenuFilterUI';
 import { Button } from '@progress/kendo-react-buttons';
+import { filterIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -349,7 +350,7 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
             IsUnaryFilter(filters[1].operator);
         var expandState = this.isControlled() ? this.props.expanded : this.state.expanded;
         return (React.createElement(GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: 'k-i-filter', onClick: this.onFilterExpand }),
+            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(filterTitle, messages[filterTitle]), iconClass: 'k-i-filter', svgIcon: filterIcon, onClick: this.onFilterExpand }),
             React.createElement(GridColumnMenuItemContent, { show: !!expandState },
                 React.createElement("div", { className: 'kendo-grid-filter-menu-container' },
                     React.createElement("form", { className: 'k-filter-menu k-group k-reset k-state-border-up', onSubmit: this.submit, onReset: this.clear, onKeyDown: function (e) { return e.stopPropagation(); } },

package/dist/es/columnMenu/GridColumnMenuGroup.js

@@ -18,6 +18,7 @@ import { provideLocalizationService, registerForIntl, registerForLocalization }
 import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
 import { GridColumnMenuItem } from './GridColumnMenuItem';
 import { groupColumn, ungroupColumn, messages } from '../messages';
+import { groupIcon, ungroupIcon } from '@progress/kendo-svg-icons';
 /**
  * @example
  * ```jsx-no-run
@@ -114,9 +115,8 @@ var GridColumnMenuGroup = /** @class */ (function (_super) {
         var localizationService = provideLocalizationService(this);
         var isGrouped = Boolean(group && column.field && group.find(function (currentGroup) { return currentGroup.field === column.field; }));
         var message = !isGrouped ? groupColumn : ungroupColumn;
-        var iconClass = !isGrouped ? 'k-i-group' : 'k-i-ungroup';
         return (React.createElement(GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(message, messages[message]), iconClass: iconClass, onClick: this.onGroupClick })));
+            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(message, messages[message]), iconClass: !isGrouped ? 'k-i-group' : 'k-i-ungroup', svgIcon: !isGrouped ? groupIcon : ungroupIcon, onClick: this.onGroupClick })));
     };
     return GridColumnMenuGroup;
 }(React.Component));

package/dist/es/columnMenu/GridColumnMenuItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * The props of the GridColumnMenuItem component.
  */
@@ -15,6 +16,10 @@ export interface GridColumnMenuItemProps {
      * The class of the icon that is rendered next to the title.
      */
     iconClass: string;
+    /**
+     * The SVG icon that is rendered next to the title.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The selected state of the component.
      */

package/dist/es/columnMenu/GridColumnMenuItem.js

@@ -14,6 +14,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
+import { IconWrap, toIconName } from '@progress/kendo-react-common';
 /**
  * The GridColumnMenuItem component that is used inside the Grid ColumnMenu.
  */
@@ -32,9 +33,9 @@ var GridColumnMenuItem = /** @class */ (function (_super) {
      * @hidden
      */
     GridColumnMenuItem.prototype.render = function () {
-        var _a = this.props, title = _a.title, iconClass = _a.iconClass, selected = _a.selected;
+        var _a = this.props, title = _a.title, iconClass = _a.iconClass, svgIcon = _a.svgIcon, selected = _a.selected;
         return (React.createElement("div", { onClick: this.onClick, className: "k-columnmenu-item ".concat(selected ? 'k-selected' : '') },
-            iconClass && React.createElement("span", { className: "k-icon ".concat(iconClass) }),
+            (iconClass || svgIcon) && React.createElement(IconWrap, { name: iconClass ? toIconName(iconClass) : iconClass, icon: svgIcon }),
             title));
     };
     return GridColumnMenuItem;

package/dist/es/columnMenu/GridColumnMenuSort.js

@@ -19,6 +19,7 @@ import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
 import { normalize } from '../interfaces/GridSortSettings';
 import { provideLocalizationService, registerForIntl, registerForLocalization } from '@progress/kendo-react-intl';
 import { messages, sortAscending, sortDescending } from '../messages';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -169,8 +170,8 @@ var GridColumnMenuSort = /** @class */ (function (_super) {
         var currentSortIndex = sortIndex(column.field, sort);
         var localizationService = provideLocalizationService(this);
         return (React.createElement(GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(sortAscending, messages[sortAscending]), iconClass: 'k-i-sort-asc-sm', selected: sortedAsc(currentSortIndex, sort), onClick: this.onAscClick }),
-            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(sortDescending, messages[sortDescending]), iconClass: 'k-i-sort-desc-sm', selected: sortedDesc(currentSortIndex, sort), onClick: this.onDescClick })));
+            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(sortAscending, messages[sortAscending]), iconClass: 'k-i-sort-asc-sm', svgIcon: sortAscSmallIcon, selected: sortedAsc(currentSortIndex, sort), onClick: this.onAscClick }),
+            React.createElement(GridColumnMenuItem, { title: localizationService.toLanguageString(sortDescending, messages[sortDescending]), iconClass: 'k-i-sort-desc-sm', svgIcon: sortDescSmallIcon, selected: sortedDesc(currentSortIndex, sort), onClick: this.onDescClick })));
     };
     /* eslint-disable max-len */
     /**

package/dist/es/columnMenu/GridColumnMenuWrapper.js

@@ -37,6 +37,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { Popup } from '@progress/kendo-react-popup';
+import { IconWrap } from '@progress/kendo-react-common';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 /**
  * The GridColumnMenuWrapper component.
  */
@@ -88,7 +90,7 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
         var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
         return (React.createElement(React.Fragment, null,
             React.createElement("a", { className: 'k-grid-header-menu k-grid-column-menu', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick, onMouseDown: this.onAnchorMouseDown, href: "#" },
-                React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
+                React.createElement(IconWrap, { name: 'more-vertical', icon: moreVerticalIcon })),
             React.createElement(Popup, { anchor: this._anchor, show: this.state.show },
                 React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));
     };

package/dist/es/drag/GroupingIndicator.js

@@ -14,10 +14,11 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { Draggable } from '@progress/kendo-react-common';
+import { Draggable, IconWrap } from '@progress/kendo-react-common';
 import { Button } from '@progress/kendo-react-buttons';
 import { ungroupColumn, messages } from '../messages';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { sortAscSmallIcon, sortDescSmallIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -71,13 +72,14 @@ var GroupingIndicator = /** @class */ (function (_super) {
     GroupingIndicator.prototype.render = function () {
         var _this = this;
         var localizationService = provideLocalizationService(this);
+        var dir = this.props.dir;
         return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
             React.createElement("div", { className: "k-indicator-container", style: { touchAction: 'none' } },
                 React.createElement("div", { className: "k-group-indicator", role: "button" },
                     React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
-                        React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.dir + '-small' }),
+                        React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon }),
                         this.props.title),
-                    React.createElement(Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'close', "aria-label": localizationService.toLanguageString(ungroupColumn, messages[ungroupColumn]) })))));
+                    React.createElement(Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'x', svgIcon: xIcon, "aria-label": localizationService.toLanguageString(ungroupColumn, messages[ungroupColumn]) })))));
     };
     return GroupingIndicator;
 }(React.Component));

package/dist/es/header/HeaderRow.js

@@ -29,10 +29,11 @@ import { normalize } from '../interfaces/GridSortSettings';
 import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
 import { GridHeaderCell } from './GridHeaderCell';
-import { classNames, Keys } from '@progress/kendo-react-common';
+import { classNames, IconWrap, Keys } from '@progress/kendo-react-common';
 import { HeaderThElement } from '@progress/kendo-react-data-tools';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
 import { messages, sortAriaLabel } from '../messages';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -147,7 +148,7 @@ var HeaderRow = /** @class */ (function (_super) {
         }
         return sortIndex >= 0 && [
             React.createElement("span", { key: 1, className: 'k-sort-icon' },
-                React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.sort[sortIndex].dir + '-small' })),
+                React.createElement(IconWrap, { name: 'sort-' + this.props.sort[sortIndex].dir + '-small', icon: this.props.sort[sortIndex].dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon })),
             this.props.sort.length > 1 &&
                 React.createElement("span", { key: 2, className: 'k-sort-icon' },
                     React.createElement("span", { className: "k-sort-order" }, sortIndex + 1))

package/dist/es/package-metadata.js

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

@@ -636,19 +636,20 @@ var Grid = /** @class */ (function (_super) {
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
                     React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
-                        React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
-                                _this.vs.table = table;
-                                _this.tableElement = table;
-                            } },
-                            React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
-                                        'k-grid-md': !this.props.size
-                                    },
-                                    _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
-                                    _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
-                                colGroups,
-                                React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
-                                        _this.vs.tableBody = tableBody;
-                                    }, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body))),
+                        React.createElement("div", { className: 'k-grid-table-wrap', role: "presentation" },
+                            React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
+                                    _this.vs.table = table;
+                                    _this.tableElement = table;
+                                } },
+                                React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
+                                            'k-grid-md': !this.props.size
+                                        },
+                                        _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                                        _c), this.props.className), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },
+                                    colGroups,
+                                    React.createElement("tbody", __assign({ className: 'k-table-tbody', ref: function (tableBody) {
+                                            _this.vs.tableBody = tableBody;
+                                        }, role: 'rowgroup' }, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes), body)))),
                         React.createElement("div", { className: "k-height-container", role: "presentation" },
                             React.createElement("div", { style: this.props.scrollable === 'virtual' ?
                                     { 'height': (this.vs.containerHeight) + 'px' } : {} })))),

package/dist/npm/VirtualScroll.js

@@ -37,7 +37,11 @@ var VirtualScroll = /** @class */ (function () {
             for (var i = 0; i < topItemsCount; i++) {
                 topItemsHeight += heights[i].line + heights[i].acc;
             }
-            return { topItemsCount: topItemsCount, topItemsHeight: topItemsHeight };
+            return {
+                topItemsCount: topItemsCount,
+                topItemsHeight: topItemsHeight,
+                itemsNeededOnScreen: itemsOnScreen + itemsOnScreen / 2
+            };
         };
         this.horizontalScrollbarHeight = function () {
             if (!_this.container) {
@@ -120,9 +124,9 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
-        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight, itemsNeededOnScreen = _a.itemsNeededOnScreen;
         var additionalOnTop = scrollTop - targetTranslate;
-        if (additionalOnTop > topItemsHeight) {
+        if ((additionalOnTop > topItemsHeight) || heights.length <= itemsNeededOnScreen) {
             return;
         }
         while ((rowsCount < this.topCacheCount + this.attendedSkip - this.realSkip + topItemsCount)
@@ -164,13 +168,13 @@ var VirtualScroll = /** @class */ (function () {
         var scrollTop = this.container.scrollTop;
         var targetTranslate = this.tableTranslate;
         var rowsCount = 0;
-        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight;
+        var _a = this.topItems(heights, Boolean(this.topCacheCount)), topItemsCount = _a.topItemsCount, topItemsHeight = _a.topItemsHeight, itemsNeededOnScreen = _a.itemsNeededOnScreen;
         while (rowsCount < heights.length - this.topCacheCount &&
             !(targetTranslate + heights[rowsCount].line + heights[rowsCount].acc > scrollTop)) {
             targetTranslate += heights[rowsCount].line + heights[rowsCount].acc;
             rowsCount++;
         }
-        if (topItemsCount > this.propsSkip + rowsCount) {
+        if ((topItemsCount > this.propsSkip + rowsCount) || heights.length <= itemsNeededOnScreen) {
             return;
         }
         if (rowsCount >= heights.length - this.topCacheCount && this.propsSkip + rowsCount >= this.total) {

package/dist/npm/cells/GridFilterCell.js

@@ -23,6 +23,7 @@ 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 kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var filterCommon_1 = require("../filterCommon");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var GridFilterCell = /** @class */ (function (_super) {
@@ -34,7 +35,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 return;
             }
             var value = _this.props.operators.find(function (item) { return item.operator === _this.props.operator; }) || null;
-            return (React.createElement(kendo_react_dropdowns_1.DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", data: _this.props.operators, textField: "text", title: localization.toLanguageString(messages_1.filterChooseOperator, messages_1.messages[messages_1.filterChooseOperator]), popupSettings: {
+            return (React.createElement(kendo_react_dropdowns_1.DropDownList, { size: _this.props.size, value: value, onChange: _this.operatorChange, className: "k-dropdown-operator", iconClassName: "k-i-filter k-icon", svgIcon: kendo_svg_icons_1.filterIcon, data: _this.props.operators, textField: "text", title: localization.toLanguageString(messages_1.filterChooseOperator, messages_1.messages[messages_1.filterChooseOperator]), popupSettings: {
                     width: ''
                 } }));
         };
@@ -56,7 +57,7 @@ var GridFilterCell = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-filtercell-operator" },
                     this.renderOperatorEditor(localizationService),
                     "\u00A0",
-                    React.createElement(kendo_react_buttons_1.Button, { size: this.props.size, icon: 'filter-clear', className: (0, kendo_react_common_1.classNames)((_a = {},
+                    React.createElement(kendo_react_buttons_1.Button, { size: this.props.size, icon: 'filter-clear', svgIcon: kendo_svg_icons_1.filterClearIcon, className: (0, 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) {

package/dist/npm/cells/GridGroupCell.js

@@ -15,6 +15,7 @@ exports.GridGroupCell = void 0;
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var React = require("react");
 var messages_1 = require("../messages");
 /**
@@ -57,7 +58,8 @@ var GridGroupCell = function (props) {
                                 value: !expanded
                             });
                         }
-                    }, href: "#", tabIndex: -1, "aria-label": message, className: expanded ? 'k-i-caret-alt-down k-icon' : 'k-i-caret-alt-right k-icon' }),
+                    }, href: "#", tabIndex: -1, "aria-label": message },
+                    React.createElement(kendo_react_common_1.IconWrap, { name: expanded ? 'caret-alt-down' : 'caret-alt-right', icon: expanded ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltRightIcon })),
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));

package/dist/npm/cells/GridHierarchyCell.js

@@ -18,6 +18,7 @@ var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var messages_1 = require("../messages");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -46,7 +47,6 @@ var GridHierarchyCell = function (props) {
             React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
     }
     else if (props.rowType !== 'groupHeader') {
-        var className = expanded ? 'k-icon k-i-minus' : 'k-icon k-i-plus';
         var baseMessage = expanded ? messages_1.detailCollapse : messages_1.detailExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
         defaultRendering = (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
@@ -61,7 +61,8 @@ var GridHierarchyCell = function (props) {
                             value: !expanded
                         });
                     }
-                }, "aria-label": message, className: className, href: "#", tabIndex: -1 })));
+                }, "aria-label": message, href: "#", tabIndex: -1 },
+                React.createElement(kendo_react_common_1.IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.plusIcon }))));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/npm/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -47,6 +47,7 @@ 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");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -295,12 +296,12 @@ 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 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_common_1.IconWrap, { className: "k-input-icon", name: 'search', icon: kendo_svg_icons_1.searchIcon }),
                 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" })));
+                React.createElement(kendo_react_buttons_1.Button, { type: "button", rounded: null, className: "k-input-button", onClick: this.handleClear, icon: "x", svgIcon: kendo_svg_icons_1.xIcon })));
         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 }),
+            React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(messages_1.filterTitle, messages_1.messages[messages_1.filterTitle]), iconClass: "k-i-filter", svgIcon: kendo_svg_icons_1.filterIcon, onClick: this.onFilterExpand }),
             React.createElement(GridColumnMenuItemContent_1.GridColumnMenuItemContent, { show: !!expandState },
                 React.createElement("div", { className: "kendo-grid-filter-menu-container" },
                     React.createElement("form", { className: "k-filter-menu k-group k-reset k-state-border-up", onSubmit: this.submit, onReset: this.clear },

package/dist/npm/columnMenu/GridColumnMenuFilter.js

@@ -46,6 +46,7 @@ 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");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -354,7 +355,7 @@ var GridColumnMenuFilter = /** @class */ (function (_super) {
             (0, filterCommon_1.IsUnaryFilter)(filters[1].operator);
         var expandState = this.isControlled() ? this.props.expanded : this.state.expanded;
         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 }),
+            React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(messages_1.filterTitle, messages_1.messages[messages_1.filterTitle]), iconClass: 'k-i-filter', svgIcon: kendo_svg_icons_1.filterIcon, onClick: this.onFilterExpand }),
             React.createElement(GridColumnMenuItemContent_1.GridColumnMenuItemContent, { show: !!expandState },
                 React.createElement("div", { className: 'kendo-grid-filter-menu-container' },
                     React.createElement("form", { className: 'k-filter-menu k-group k-reset k-state-border-up', onSubmit: this.submit, onReset: this.clear, onKeyDown: function (e) { return e.stopPropagation(); } },

package/dist/npm/columnMenu/GridColumnMenuGroup.js

@@ -21,6 +21,7 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var GridColumnMenuItemGroup_1 = require("./GridColumnMenuItemGroup");
 var GridColumnMenuItem_1 = require("./GridColumnMenuItem");
 var messages_1 = require("../messages");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @example
  * ```jsx-no-run
@@ -117,9 +118,8 @@ var GridColumnMenuGroup = /** @class */ (function (_super) {
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var isGrouped = Boolean(group && column.field && group.find(function (currentGroup) { return currentGroup.field === column.field; }));
         var message = !isGrouped ? messages_1.groupColumn : messages_1.ungroupColumn;
-        var iconClass = !isGrouped ? 'k-i-group' : 'k-i-ungroup';
         return (React.createElement(GridColumnMenuItemGroup_1.GridColumnMenuItemGroup, null,
-            React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(message, messages_1.messages[message]), iconClass: iconClass, onClick: this.onGroupClick })));
+            React.createElement(GridColumnMenuItem_1.GridColumnMenuItem, { title: localizationService.toLanguageString(message, messages_1.messages[message]), iconClass: !isGrouped ? 'k-i-group' : 'k-i-ungroup', svgIcon: !isGrouped ? kendo_svg_icons_1.groupIcon : kendo_svg_icons_1.ungroupIcon, onClick: this.onGroupClick })));
     };
     return GridColumnMenuGroup;
 }(React.Component));

package/dist/npm/columnMenu/GridColumnMenuItem.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * The props of the GridColumnMenuItem component.
  */
@@ -15,6 +16,10 @@ export interface GridColumnMenuItemProps {
      * The class of the icon that is rendered next to the title.
      */
     iconClass: string;
+    /**
+     * The SVG icon that is rendered next to the title.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The selected state of the component.
      */