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

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: 1672914463,
+    publishDate: 1673259211,
     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.d.ts

@@ -72,6 +72,18 @@ export interface PagerProps {
      * Defines if the pager will be responsive. Defaults to `true`.
      */
     responsive?: boolean;
+    /**
+     * Configures the `size` of the Pager.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
     /**
      * Fires when the page of the Pager is changed. You have to handle the event yourself and page the data.
      */
@@ -101,6 +113,7 @@ export declare class Pager extends React.Component<PagerProps> {
         previousNext: PropTypes.Requireable<boolean>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         messagesMap: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string | null>;
     };
     /**
      * @hidden
@@ -109,6 +122,7 @@ export declare class Pager extends React.Component<PagerProps> {
         buttonCount: number;
         info: boolean;
         type: string;
+        size: string;
     };
     private _element;
     /**

package/dist/es/pager/Pager.js

@@ -29,9 +29,10 @@ import * as PropTypes from 'prop-types';
 import { PagerNumericButtons } from './PagerNumericButtons';
 import { PagerInput } from './PagerInput';
 import { PagerPageSizes } from './PagerPageSizes';
+import { Button } from '@progress/kendo-react-buttons';
 import { messages, pagerFirstPage, pagerLastPage, pagerNextPage, pagerPreviousPage, pagerInfo, pagerAriaKeyshortcuts, pagerAriaLabel } from '../messages';
 import { registerForIntl, registerForLocalization, provideLocalizationService, provideIntlService } from '@progress/kendo-react-intl';
-import { classNames, Icon } from '@progress/kendo-react-common';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 /**
@@ -113,13 +114,14 @@ var Pager = /** @class */ (function (_super) {
      * @hidden
      */
     Pager.prototype.render = function () {
+        var _a;
         var _this = this;
-        var _a = this.props, skip = _a.skip, take = _a.take, total = _a.total, pageSizes = _a.pageSizes, messagesMap = _a.messagesMap;
+        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap;
         var localizationService = provideLocalizationService(this);
         var intlService = provideIntlService(this);
         var currentPage = Math.floor(skip / take) + 1;
         var changer = this.props.type === 'numeric' ?
-            (React.createElement(PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap })) : (React.createElement(PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
+            (React.createElement(PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput, { buttonCount: this.props.buttonCount || 0, currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
         var firstPageMessage = messagesMap ? messagesMap(pagerFirstPage) :
             ({ messageKey: pagerFirstPage, defaultMessage: messages[pagerFirstPage] });
         var previousPageMessage = messagesMap ? messagesMap(pagerPreviousPage) :
@@ -136,34 +138,36 @@ var Pager = /** @class */ (function (_super) {
             ({ messageKey: pagerAriaLabel, defaultMessage: messages[pagerAriaLabel] });
         var first, prev, next, last;
         if (this.props.previousNext) {
-            first = this.renderButton(1, 'k-link 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-link 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-link 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-link 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', (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));
         }
-        var pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, messagesMap: messagesMap }));
+        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
             .format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [
             Math.min(skip + 1, total),
             Math.min(skip + take, total),
             total
         ])));
-        return (React.createElement("div", { className: classNames('k-pager k-widget', this.props.className), style: this.props.style, role: "application", "aria-roledescription": "pager", "aria-keyshortcuts": localizationService.toLanguageString(ariaKeyshortcutsMessage.messageKey, ariaKeyshortcutsMessage.defaultMessage), "aria-label": localizationService.toLanguageString(ariaLabelMessage.messageKey, ariaLabelMessage.defaultMessage), ref: function (element) { return _this._element = element; } },
-            first,
-            prev,
-            changer,
-            next,
-            last,
+        return (React.createElement("div", { className: classNames('k-pager', (_a = {},
+                _a["k-pager-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a), this.props.className), style: this.props.style, role: "application", "aria-roledescription": "pager", "aria-keyshortcuts": localizationService.toLanguageString(ariaKeyshortcutsMessage.messageKey, ariaKeyshortcutsMessage.defaultMessage), "aria-label": localizationService.toLanguageString(ariaLabelMessage.messageKey, ariaLabelMessage.defaultMessage), ref: function (element) { return _this._element = element; } },
+            React.createElement("div", { className: classNames('k-pager-numbers-wrap', this.props.className) },
+                first,
+                prev,
+                changer,
+                next,
+                last),
             pagerPageSizes,
             info));
     };
     Pager.prototype.renderButton = function (page, className, title, icon, isDisabled) {
         var _this = this;
-        return (React.createElement("a", { onClick: function (e) {
+        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) {
                 e.preventDefault();
                 _this.changePage(page, e);
-            }, href: "#", className: className, title: title, role: "button", "aria-disabled": isDisabled },
-            React.createElement(Icon, { name: icon })));
+            } }));
     };
     Object.defineProperty(Pager.prototype, "totalPages", {
         get: function () {
@@ -187,7 +191,8 @@ var Pager = /** @class */ (function (_super) {
         pageSizes: PropTypes.arrayOf(PropTypes.number),
         previousNext: PropTypes.bool,
         onPageChange: PropTypes.func,
-        messagesMap: PropTypes.func
+        messagesMap: PropTypes.func,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large'])
     };
     /**
      * @hidden
@@ -195,7 +200,8 @@ var Pager = /** @class */ (function (_super) {
     Pager.defaultProps = {
         buttonCount: 10,
         info: true,
-        type: 'numeric'
+        type: 'numeric',
+        size: 'medium'
     };
     return Pager;
 }(React.Component));

package/dist/es/pager/PagerInput.d.ts

@@ -3,8 +3,10 @@ import * as React from 'react';
  * @hidden
  */
 export interface PagerInputProps {
+    buttonCount: number;
     totalPages: number;
     currentPage: number;
+    size?: null | 'small' | 'medium' | 'large';
     pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
@@ -19,4 +21,6 @@ export declare class PagerInput extends React.Component<PagerInputProps> {
     onChange: (e: any) => void;
     value: () => string;
     render(): JSX.Element;
+    private get end();
+    private get start();
 }

package/dist/es/pager/PagerInput.js

@@ -14,8 +14,9 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
 import { registerForLocalization, provideLocalizationService, provideIntlService } from '@progress/kendo-react-intl';
-import { messages, pagerOf, pagerPage, pagerTotalPages } from './../messages';
+import { messages, pagerOf, pagerPage, pagerTotalPages, pagerMobileSelect } from './../messages';
 /**
  * @hidden
  */
@@ -39,6 +40,7 @@ var PagerInput = /** @class */ (function (_super) {
         return _this;
     }
     PagerInput.prototype.render = function () {
+        var _a;
         var _this = this;
         var intlService = provideIntlService(this);
         var localizationService = provideLocalizationService(this);
@@ -48,14 +50,45 @@ var PagerInput = /** @class */ (function (_super) {
             ({ messageKey: pagerOf, defaultMessage: messages[pagerOf] });
         var totalPagesMessage = this.props.messagesMap ? this.props.messagesMap(pagerTotalPages) :
             ({ messageKey: pagerTotalPages, defaultMessage: messages[pagerTotalPages] });
-        return (React.createElement("span", { className: "k-pager-input k-label" },
-            localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage),
-            React.createElement("span", { className: 'k-textbox k-input k-input-md k-rounded-md k-input-solid' },
-                React.createElement("input", { className: "k-input-inner", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange })), "".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService
-            .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
-            this.props.totalPages
-        ]))));
+        var mobileSelectMessage = this.props.messagesMap ? this.props.messagesMap(pagerMobileSelect) :
+            ({ messageKey: pagerMobileSelect, defaultMessage: messages[pagerMobileSelect] });
+        var buttons = [];
+        for (var idx = this.start; idx <= this.end; idx++) {
+            buttons.push(idx);
+        }
+        var options = buttons.map(function (page) { return (React.createElement("option", { key: page }, page)); });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("select", { className: classNames('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
+                    _a["k-picker-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a)), "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: this.onChange }, options),
+            React.createElement("span", { className: "k-pager-input k-label" },
+                localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage),
+                React.createElement("span", { className: 'k-textbox k-input k-input-md k-rounded-md k-input-solid' },
+                    React.createElement("input", { className: "k-input-inner", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange })), "".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService
+                .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
+                this.props.totalPages
+            ])))));
     };
+    Object.defineProperty(PagerInput.prototype, "end", {
+        get: function () {
+            return Math.min((this.start + this.props.buttonCount) - 1, this.props.totalPages);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PagerInput.prototype, "start", {
+        get: function () {
+            var page = this.props.currentPage;
+            var buttonCount = this.props.buttonCount;
+            if (page > buttonCount) {
+                var reminder = (page % buttonCount);
+                return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+            }
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return PagerInput;
 }(React.Component));
 export { PagerInput };

package/dist/es/pager/PagerNumericButtons.d.ts

@@ -6,6 +6,7 @@ export interface PagerNumericButtonsProps {
     buttonCount: number;
     totalPages: number;
     currentPage: number;
+    size?: null | 'small' | 'medium' | 'large';
     pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
@@ -17,8 +18,6 @@ export interface PagerNumericButtonsProps {
  */
 export declare class PagerNumericButtons extends React.Component<PagerNumericButtonsProps> {
     render(): JSX.Element;
-    private renderDots;
-    private renderOptionDots;
     private handlePageChange;
     private handleSelectPageChange;
     private get end();

package/dist/es/pager/PagerNumericButtons.js

@@ -14,10 +14,10 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { classNames, kendoThemeMaps } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 import { messages, pagerMobileSelect, pagerPageNumberLabel } from '../messages';
 import { provideLocalizationService } from '@progress/kendo-react-intl';
-var dots = '...';
 /**
  * @hidden
  */
@@ -36,12 +36,9 @@ var PagerNumericButtons = /** @class */ (function (_super) {
         return _this;
     }
     PagerNumericButtons.prototype.render = function () {
+        var _a;
         var _this = this;
         var localizationService = provideLocalizationService(this);
-        var prevDots = this.start > 1 && this.renderDots(this.start - 1);
-        var postDots = this.end < this.props.totalPages && this.renderDots(this.end + 1);
-        var prevOptionDots = this.start > 1 && this.renderOptionDots(this.start - 1);
-        var postOptionDots = this.end < this.props.totalPages && this.renderOptionDots(this.end + 1);
         var mobileSelectMessage = this.props.messagesMap ? this.props.messagesMap(pagerMobileSelect) :
             ({ messageKey: pagerMobileSelect, defaultMessage: messages[pagerMobileSelect] });
         var pageNumberLabelMessage = this.props.messagesMap ? this.props.messagesMap(pagerPageNumberLabel) :
@@ -50,28 +47,13 @@ var PagerNumericButtons = /** @class */ (function (_super) {
         for (var idx = this.start; idx <= this.end; idx++) {
             buttons.push(idx);
         }
-        var numerics = buttons.map(function (page) { return (React.createElement("li", { key: page },
-            React.createElement("a", { role: "button", "aria-label": localizationService.toLanguageString(pageNumberLabelMessage.messageKey, pageNumberLabelMessage.defaultMessage) + ' ' + page, "aria-current": _this.props.currentPage === page ? true : undefined, href: "#", onClick: function (e) { return _this.handlePageChange(e, page); }, className: classNames('k-link', {
-                    'k-selected': _this.props.currentPage === page
-                }) }, page))); });
-        var options = buttons.map(function (page) { return (React.createElement("option", { key: page, className: classNames('k-link') }, page)); });
-        return (React.createElement("div", { className: "k-pager-numbers-wrap" },
-            React.createElement("select", { className: "k-dropdown", "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } },
-                prevOptionDots,
-                options,
-                postOptionDots),
-            React.createElement("ul", { className: "k-pager-numbers" },
-                prevDots,
-                numerics,
-                postDots)));
-    };
-    PagerNumericButtons.prototype.renderDots = function (page) {
-        var _this = this;
-        return (React.createElement("li", null,
-            React.createElement("a", { className: "k-link", onClick: function (e) { return _this.handlePageChange(e, page); }, href: "#" }, dots)));
-    };
-    PagerNumericButtons.prototype.renderOptionDots = function (page) {
-        return (React.createElement("option", { className: "k-link", value: page }, dots));
+        var numerics = buttons.map(function (page) { return (React.createElement(Button, { className: classNames({ 'k-selected': _this.props.currentPage === page }), key: page, fillMode: 'flat', themeColor: 'primary', size: _this.props.size, rounded: null, role: "button", "aria-label": localizationService.toLanguageString(pageNumberLabelMessage.messageKey, pageNumberLabelMessage.defaultMessage) + ' ' + page, "aria-current": _this.props.currentPage === page ? true : undefined, onClick: function (e) { return _this.handlePageChange(e, page); } }, page)); });
+        var options = buttons.map(function (page) { return (React.createElement("option", { key: page }, page)); });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("select", { className: classNames('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
+                    _a["k-picker-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a)), "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: function (e) { return _this.handleSelectPageChange(e); } }, options),
+            React.createElement("div", { className: "k-pager-numbers" }, numerics)));
     };
     Object.defineProperty(PagerNumericButtons.prototype, "end", {
         get: function () {

package/dist/es/pager/PagerPageSizes.d.ts

@@ -4,11 +4,12 @@ import * as React from 'react';
  */
 export interface PagerPageSizesProps {
     pageSize: number;
+    pageSizes: number[];
+    size?: null | 'small' | 'medium' | 'large';
     pageChange?: (event: {
         skip: number;
         take: number;
     }, e: React.SyntheticEvent<any>) => void;
-    pageSizes: number[];
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
         defaultMessage: string;

package/dist/es/pager/PagerPageSizes.js

@@ -42,7 +42,7 @@ var PagerPageSizes = /** @class */ (function (_super) {
         var pageSelectionMessage = this.props.messagesMap ? this.props.messagesMap(pagerPageSelection) :
             ({ messageKey: pagerPageSelection, defaultMessage: messages[pagerPageSelection] });
         return (React.createElement("span", { className: "k-pager-sizes k-label" },
-            React.createElement(DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: provideLocalizationService(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage) }),
+            React.createElement(DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: provideLocalizationService(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage), size: this.props.size }),
             provideLocalizationService(this).toLanguageString(itemPerPageMessage.messageKey, itemPerPageMessage.defaultMessage)));
     };
     return PagerPageSizes;

package/dist/npm/package-metadata.js

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

@@ -72,6 +72,18 @@ export interface PagerProps {
      * Defines if the pager will be responsive. Defaults to `true`.
      */
     responsive?: boolean;
+    /**
+     * Configures the `size` of the Pager.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
     /**
      * Fires when the page of the Pager is changed. You have to handle the event yourself and page the data.
      */
@@ -101,6 +113,7 @@ export declare class Pager extends React.Component<PagerProps> {
         previousNext: PropTypes.Requireable<boolean>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         messagesMap: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string | null>;
     };
     /**
      * @hidden
@@ -109,6 +122,7 @@ export declare class Pager extends React.Component<PagerProps> {
         buttonCount: number;
         info: boolean;
         type: string;
+        size: string;
     };
     private _element;
     /**

package/dist/npm/pager/Pager.js

@@ -32,6 +32,7 @@ var PropTypes = require("prop-types");
 var PagerNumericButtons_1 = require("./PagerNumericButtons");
 var PagerInput_1 = require("./PagerInput");
 var PagerPageSizes_1 = require("./PagerPageSizes");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 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");
@@ -116,13 +117,14 @@ var Pager = /** @class */ (function (_super) {
      * @hidden
      */
     Pager.prototype.render = function () {
+        var _a;
         var _this = this;
-        var _a = this.props, skip = _a.skip, take = _a.take, total = _a.total, pageSizes = _a.pageSizes, messagesMap = _a.messagesMap;
+        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap;
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var intlService = (0, kendo_react_intl_1.provideIntlService)(this);
         var currentPage = Math.floor(skip / take) + 1;
         var changer = this.props.type === 'numeric' ?
-            (React.createElement(PagerNumericButtons_1.PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap })) : (React.createElement(PagerInput_1.PagerInput, { currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap }));
+            (React.createElement(PagerNumericButtons_1.PagerNumericButtons, { buttonCount: this.props.buttonCount || 0, totalPages: this.totalPages, currentPage: currentPage, pageChange: this.changePage, messagesMap: this.props.messagesMap, size: this.props.size })) : (React.createElement(PagerInput_1.PagerInput, { buttonCount: this.props.buttonCount || 0, currentPage: currentPage, totalPages: this.totalPages, pageChange: this.changePage, messagesMap: messagesMap, size: this.props.size }));
         var firstPageMessage = messagesMap ? messagesMap(messages_1.pagerFirstPage) :
             ({ messageKey: messages_1.pagerFirstPage, defaultMessage: messages_1.messages[messages_1.pagerFirstPage] });
         var previousPageMessage = messagesMap ? messagesMap(messages_1.pagerPreviousPage) :
@@ -139,34 +141,36 @@ 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-link 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-link 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-link 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-link 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', (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));
         }
-        var pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes_1.PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, messagesMap: messagesMap }));
+        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
             .format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [
             Math.min(skip + 1, total),
             Math.min(skip + take, total),
             total
         ])));
-        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-pager k-widget', this.props.className), style: this.props.style, role: "application", "aria-roledescription": "pager", "aria-keyshortcuts": localizationService.toLanguageString(ariaKeyshortcutsMessage.messageKey, ariaKeyshortcutsMessage.defaultMessage), "aria-label": localizationService.toLanguageString(ariaLabelMessage.messageKey, ariaLabelMessage.defaultMessage), ref: function (element) { return _this._element = element; } },
-            first,
-            prev,
-            changer,
-            next,
-            last,
+        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-pager', (_a = {},
+                _a["k-pager-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                _a), this.props.className), style: this.props.style, role: "application", "aria-roledescription": "pager", "aria-keyshortcuts": localizationService.toLanguageString(ariaKeyshortcutsMessage.messageKey, ariaKeyshortcutsMessage.defaultMessage), "aria-label": localizationService.toLanguageString(ariaLabelMessage.messageKey, ariaLabelMessage.defaultMessage), ref: function (element) { return _this._element = element; } },
+            React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-pager-numbers-wrap', this.props.className) },
+                first,
+                prev,
+                changer,
+                next,
+                last),
             pagerPageSizes,
             info));
     };
     Pager.prototype.renderButton = function (page, className, title, icon, isDisabled) {
         var _this = this;
-        return (React.createElement("a", { 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, title: title, role: "button", "aria-disabled": isDisabled, onClick: function (e) {
                 e.preventDefault();
                 _this.changePage(page, e);
-            }, href: "#", className: className, title: title, role: "button", "aria-disabled": isDisabled },
-            React.createElement(kendo_react_common_1.Icon, { name: icon })));
+            } }));
     };
     Object.defineProperty(Pager.prototype, "totalPages", {
         get: function () {
@@ -190,7 +194,8 @@ var Pager = /** @class */ (function (_super) {
         pageSizes: PropTypes.arrayOf(PropTypes.number),
         previousNext: PropTypes.bool,
         onPageChange: PropTypes.func,
-        messagesMap: PropTypes.func
+        messagesMap: PropTypes.func,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large'])
     };
     /**
      * @hidden
@@ -198,7 +203,8 @@ var Pager = /** @class */ (function (_super) {
     Pager.defaultProps = {
         buttonCount: 10,
         info: true,
-        type: 'numeric'
+        type: 'numeric',
+        size: 'medium'
     };
     return Pager;
 }(React.Component));

package/dist/npm/pager/PagerInput.d.ts

@@ -3,8 +3,10 @@ import * as React from 'react';
  * @hidden
  */
 export interface PagerInputProps {
+    buttonCount: number;
     totalPages: number;
     currentPage: number;
+    size?: null | 'small' | 'medium' | 'large';
     pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
@@ -19,4 +21,6 @@ export declare class PagerInput extends React.Component<PagerInputProps> {
     onChange: (e: any) => void;
     value: () => string;
     render(): JSX.Element;
+    private get end();
+    private get start();
 }

package/dist/npm/pager/PagerInput.js

@@ -17,6 +17,7 @@ var __extends = (this && this.__extends) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PagerInput = void 0;
 var React = require("react");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./../messages");
 /**
@@ -42,6 +43,7 @@ var PagerInput = /** @class */ (function (_super) {
         return _this;
     }
     PagerInput.prototype.render = function () {
+        var _a;
         var _this = this;
         var intlService = (0, kendo_react_intl_1.provideIntlService)(this);
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
@@ -51,14 +53,45 @@ var PagerInput = /** @class */ (function (_super) {
             ({ messageKey: messages_1.pagerOf, defaultMessage: messages_1.messages[messages_1.pagerOf] });
         var totalPagesMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerTotalPages) :
             ({ 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("span", { className: 'k-textbox k-input k-input-md k-rounded-md k-input-solid' },
-                React.createElement("input", { className: "k-input-inner", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange })), "".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService
-            .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
-            this.props.totalPages
-        ]))));
+        var mobileSelectMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerMobileSelect) :
+            ({ messageKey: messages_1.pagerMobileSelect, defaultMessage: messages_1.messages[messages_1.pagerMobileSelect] });
+        var buttons = [];
+        for (var idx = this.start; idx <= this.end; idx++) {
+            buttons.push(idx);
+        }
+        var options = buttons.map(function (page) { return (React.createElement("option", { key: page }, page)); });
+        return (React.createElement(React.Fragment, null,
+            React.createElement("select", { className: (0, kendo_react_common_1.classNames)('k-picker k-dropdown-list k-dropdown k-rounded-md', (_a = {},
+                    _a["k-picker-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
+                    _a)), "aria-label": localizationService.toLanguageString(mobileSelectMessage.messageKey, mobileSelectMessage.defaultMessage), value: this.props.currentPage, onChange: this.onChange }, options),
+            React.createElement("span", { className: "k-pager-input k-label" },
+                localizationService.toLanguageString(pageMessage.messageKey, pageMessage.defaultMessage),
+                React.createElement("span", { className: 'k-textbox k-input k-input-md k-rounded-md k-input-solid' },
+                    React.createElement("input", { className: "k-input-inner", value: this.value(), onBlur: function () { return _this.forceUpdate(); }, onChange: this.onChange })), "".concat(localizationService.toLanguageString(ofMessage.messageKey, ofMessage.defaultMessage), " ").concat(intlService
+                .format(localizationService.toLanguageString(totalPagesMessage.messageKey, totalPagesMessage.defaultMessage), [
+                this.props.totalPages
+            ])))));
     };
+    Object.defineProperty(PagerInput.prototype, "end", {
+        get: function () {
+            return Math.min((this.start + this.props.buttonCount) - 1, this.props.totalPages);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(PagerInput.prototype, "start", {
+        get: function () {
+            var page = this.props.currentPage;
+            var buttonCount = this.props.buttonCount;
+            if (page > buttonCount) {
+                var reminder = (page % buttonCount);
+                return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+            }
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return PagerInput;
 }(React.Component));
 exports.PagerInput = PagerInput;

package/dist/npm/pager/PagerNumericButtons.d.ts

@@ -6,6 +6,7 @@ export interface PagerNumericButtonsProps {
     buttonCount: number;
     totalPages: number;
     currentPage: number;
+    size?: null | 'small' | 'medium' | 'large';
     pageChange: (page: number, e: React.SyntheticEvent<any>) => any;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
@@ -17,8 +18,6 @@ export interface PagerNumericButtonsProps {
  */
 export declare class PagerNumericButtons extends React.Component<PagerNumericButtonsProps> {
     render(): JSX.Element;
-    private renderDots;
-    private renderOptionDots;
     private handlePageChange;
     private handleSelectPageChange;
     private get end();