@progress/kendo-react-data-tools 5.12.0-dev.202302271006 → 5.12.0-dev.202303130940

package/dist/es/filter/Expression.js

@@ -118,8 +118,8 @@ var Expression = /** @class */ (function (_super) {
         var field = fields.find(function (f) { return f.name === filter.field; });
         var operators = ((field && field.operators) || [])
             .map(function (o) { return (__assign(__assign({}, o), { text: locService.toLanguageString(o.text, messages[o.text] || o.text) })); });
-        return (React.createElement("div", { className: "k-filter-toolbar", role: "group", "aria-label": ariaLabel },
-            React.createElement(Toolbar, { keyboardNavigation: false, role: "" },
+        return (React.createElement("div", { className: "k-filter-toolbar" },
+            React.createElement(Toolbar, { keyboardNavigation: false, role: "toolbar", ariaLabel: ariaLabel },
                 React.createElement(ToolbarItem, { className: "k-filter-field" },
                     React.createElement(DropDownList, { className: "k-filter-dropdown", data: fields, textField: "label", value: fields.find(function (f) { return f.name === filter.field; }), onChange: this.onFieldChange, ariaLabel: locService.toLanguageString(filterExpressionDropdownAriaLabel, messages[filterExpressionDropdownAriaLabel]) })),
                 React.createElement(ToolbarItem, { className: "k-filter-operator" },

package/dist/es/filter/Filter.d.ts

@@ -32,6 +32,10 @@ export interface FilterProps {
      * The composite filter descriptor value.
      */
     value: CompositeFilterDescriptor;
+    /**
+     * Represents the aria-label prop of the Filter's container component.
+     */
+    ariaLabel?: string;
     /**
      * Represents the aria-label prop of the Filter's underlying Group component.
      */

package/dist/es/filter/Filter.js

@@ -62,8 +62,8 @@ var Filter = /** @class */ (function (_super) {
      */
     Filter.prototype.render = function () {
         return (React.createElement("div", { className: 'k-widget k-filter' + (this.props.className ? ' ' + this.props.className : ''), style: this.props.style },
-            React.createElement("ul", { className: "k-filter-container" },
-                React.createElement("li", { className: "k-filter-group-main" },
+            React.createElement("ul", { role: 'tree', className: "k-filter-container", "aria-label": this.props.ariaLabel },
+                React.createElement("li", { role: 'treeitem', className: "k-filter-group-main" },
                     React.createElement(Group, { filter: this.props.value, fields: this.props.fields, ariaLabel: this.props.ariaLabelGroup, ariaLabelExpression: this.props.ariaLabelExpression, onChange: this.onFilterChange, onRemove: this.onGroupRemove, defaultGroupFilter: this.props.defaultGroupFilter || { logic: 'and', filters: [] } })))));
     };
     /**

package/dist/es/filter/Group.js

@@ -133,8 +133,8 @@ var Group = /** @class */ (function (_super) {
         var locService = provideLocalizationService(this);
         var _a = this.props, fields = _a.fields, filter = _a.filter, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? locService.toLanguageString(filterGroupAriaLabel, messages[filterGroupAriaLabel]) : _b;
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "k-filter-toolbar", role: "toolbar", "aria-label": ariaLabel },
-                React.createElement(Toolbar, { keyboardNavigation: false, role: "" },
+            React.createElement("div", { className: "k-filter-toolbar" },
+                React.createElement(Toolbar, { keyboardNavigation: false, role: "toolbar", ariaLabel: ariaLabel },
                     React.createElement(ToolbarItem, null,
                         React.createElement(ButtonGroup, null,
                             React.createElement(Button, { togglable: true, onClick: this.onLogicAnd, selected: filter.logic === 'and', type: "button" }, locService.toLanguageString(filterAndLogic, messages[filterAndLogic])),
@@ -145,8 +145,8 @@ var Group = /** @class */ (function (_super) {
                         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: "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) ?
+            filter.filters.length > 0 && (React.createElement("ul", { role: 'group', className: "k-filter-lines" }, filter.filters.map(function (f, idx) {
+                return (React.createElement("li", { role: 'treeitem', 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 })
                     :
                         React.createElement(Expression, { filter: f, fields: fields, ariaLabel: _this.props.ariaLabelExpression, onChange: _this.onChange, onRemove: _this.onRemove })));

package/dist/es/main.d.ts

@@ -1,4 +1,4 @@
-export { Pager, PagerProps, PageChangeEvent, BasePageChangeEvent } from './pager/Pager';
+export { Pager, PagerProps, PageChangeEvent, BasePageChangeEvent, PagerTargetEvent } from './pager/Pager';
 export * from './filteringCells';
 export * from './header';
 export * from './virtualization';

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: 1677490912,
+    publishDate: 1678699292,
     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

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+/**
+ * A Pager target event.
+ */
+export interface PagerTargetEvent {
+    [key: string]: any;
+    /**
+     * An event target.
+     */
+    target?: any;
+    /**
+     * An event value.
+     */
+    value?: any;
+}
 /**
  * Represents the base object of the `onPageChange` event. It is usually used
  * in custom pager scenarios in cases when we don't need any of the events or the target.
@@ -21,6 +35,10 @@ export interface BasePageChangeEvent {
      * A native DOM event.
      */
     nativeEvent?: any;
+    /**
+     * A target change event.
+     */
+    targetEvent?: PagerTargetEvent;
 }
 /**
  * Represents the object of the `onPageChange` event.
@@ -38,6 +56,10 @@ export interface PageChangeEvent extends BasePageChangeEvent {
      * A native DOM event.
      */
     nativeEvent: any;
+    /**
+     * A target change event.
+     */
+    targetEvent: PagerTargetEvent;
 }
 export interface PagerProps {
     /**
@@ -77,7 +99,12 @@ export interface PagerProps {
     /**
      * Displays a menu for selecting the page size.
      */
-    pageSizes?: Array<number>;
+    pageSizes?: Array<number> | Array<number | string>;
+    /**
+     * Sets the selected value of the page size Dropdownlist.
+     * It is useful when the selected value could also be a string not only a number.
+     */
+    pageSizeValue?: string | number;
     /**
      * Toggles the **Previous** and **Next** buttons.
      */
@@ -123,7 +150,7 @@ export declare class Pager extends React.Component<PagerProps> {
         buttonCount: PropTypes.Requireable<number>;
         info: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        pageSizes: PropTypes.Requireable<(number | null | undefined)[]>;
+        pageSizes: PropTypes.Requireable<(NonNullable<string | number | null | undefined> | null | undefined)[]>;
         previousNext: PropTypes.Requireable<boolean>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         messagesMap: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/pager/Pager.js

@@ -49,8 +49,8 @@ var Pager = /** @class */ (function (_super) {
     function Pager(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
-        _this.onPageChange = function (eventData, syntheticEvent) {
-            var event = __assign({ target: _this, syntheticEvent: syntheticEvent, nativeEvent: syntheticEvent.nativeEvent }, eventData);
+        _this.onPageChange = function (eventData, targetEvent) {
+            var event = __assign({ target: _this, syntheticEvent: targetEvent.syntheticEvent, nativeEvent: targetEvent.nativeEvent, targetEvent: targetEvent }, eventData);
             if (_this.props.onPageChange) {
                 _this.props.onPageChange.call(undefined, event);
             }
@@ -62,7 +62,8 @@ var Pager = /** @class */ (function (_super) {
                     skip: (page - 1) * _this.props.take,
                     take: _this.props.take,
                     syntheticEvent: event,
-                    nativeEvent: event.nativeEvent
+                    nativeEvent: event.nativeEvent,
+                    targetEvent: event
                 });
             }
         };
@@ -117,7 +118,7 @@ var Pager = /** @class */ (function (_super) {
     Pager.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap;
+        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap, pageSizeValue = _b.pageSizeValue;
         var localizationService = provideLocalizationService(this);
         var intlService = provideIntlService(this);
         var currentPage = Math.floor(skip / take) + 1;
@@ -144,7 +145,7 @@ var Pager = /** @class */ (function (_super) {
             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 pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, value: pageSizeValue, messagesMap: messagesMap, size: this.props.size }));
         var info = this.props.info && (React.createElement("div", { className: "k-pager-info" }, intlService
             .format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [
             Math.min(skip + 1, total),
@@ -189,7 +190,10 @@ var Pager = /** @class */ (function (_super) {
         buttonCount: PropTypes.number,
         info: PropTypes.bool,
         type: PropTypes.oneOf(['numeric', 'input']),
-        pageSizes: PropTypes.arrayOf(PropTypes.number),
+        pageSizes: PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ])),
         previousNext: PropTypes.bool,
         onPageChange: PropTypes.func,
         messagesMap: PropTypes.func,

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
 /**
  * @hidden
  */
 export interface PagerPageSizesProps {
+    value?: number | string;
     pageSize: number;
-    pageSizes: number[];
+    pageSizes: number[] | Array<number | string>;
     size?: null | 'small' | 'medium' | 'large';
     pageChange?: (event: {
         skip: number;
         take: number;
-    }, e: React.SyntheticEvent<any>) => void;
+    }, e: DropDownListChangeEvent) => void;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
         defaultMessage: string;
@@ -19,6 +21,6 @@ export interface PagerPageSizesProps {
  * @hidden
  */
 export declare class PagerPageSizes extends React.Component<PagerPageSizesProps, {}> {
-    pageSizeChange: (e: any) => void;
+    pageSizeChange: (e: DropDownListChangeEvent) => void;
     render(): JSX.Element;
 }

package/dist/es/pager/PagerPageSizes.js

@@ -32,17 +32,17 @@ var PagerPageSizes = /** @class */ (function (_super) {
         return _this;
     }
     PagerPageSizes.prototype.render = function () {
-        var _this = this;
-        var sizes = this.props.pageSizes.slice();
-        if (sizes.filter(function (s) { return s === _this.props.pageSize; }).length === 0) {
-            sizes.unshift(this.props.pageSize);
+        var _a = this.props, value = _a.value, pageSizes = _a.pageSizes, pageSize = _a.pageSize, messagesMap = _a.messagesMap;
+        var sizes = pageSizes.slice();
+        if (value === undefined && sizes.filter(function (s) { return s === pageSize; }).length === 0) {
+            sizes.unshift(pageSize);
         }
-        var itemPerPageMessage = this.props.messagesMap ? this.props.messagesMap(pagerItemPerPage) :
+        var itemPerPageMessage = messagesMap ? messagesMap(pagerItemPerPage) :
             ({ messageKey: pagerItemPerPage, defaultMessage: messages[pagerItemPerPage] });
-        var pageSelectionMessage = this.props.messagesMap ? this.props.messagesMap(pagerPageSelection) :
+        var pageSelectionMessage = messagesMap ? messagesMap(pagerPageSelection) :
             ({ messageKey: pagerPageSelection, defaultMessage: messages[pagerPageSelection] });
         return (React.createElement("span", { className: "k-pager-sizes" },
-            React.createElement(DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: provideLocalizationService(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage), size: this.props.size }),
+            React.createElement(DropDownList, { value: value !== undefined ? value : 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/filter/Expression.js

@@ -121,8 +121,8 @@ var Expression = /** @class */ (function (_super) {
         var field = fields.find(function (f) { return f.name === filter.field; });
         var operators = ((field && field.operators) || [])
             .map(function (o) { return (__assign(__assign({}, o), { text: locService.toLanguageString(o.text, messages_1.messages[o.text] || o.text) })); });
-        return (React.createElement("div", { className: "k-filter-toolbar", role: "group", "aria-label": ariaLabel },
-            React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: false, role: "" },
+        return (React.createElement("div", { className: "k-filter-toolbar" },
+            React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: false, role: "toolbar", ariaLabel: ariaLabel },
                 React.createElement(kendo_react_buttons_1.ToolbarItem, { className: "k-filter-field" },
                     React.createElement(kendo_react_dropdowns_1.DropDownList, { className: "k-filter-dropdown", data: fields, textField: "label", value: fields.find(function (f) { return f.name === filter.field; }), onChange: this.onFieldChange, ariaLabel: locService.toLanguageString(messages_1.filterExpressionDropdownAriaLabel, messages_1.messages[messages_1.filterExpressionDropdownAriaLabel]) })),
                 React.createElement(kendo_react_buttons_1.ToolbarItem, { className: "k-filter-operator" },

package/dist/npm/filter/Filter.d.ts

@@ -32,6 +32,10 @@ export interface FilterProps {
      * The composite filter descriptor value.
      */
     value: CompositeFilterDescriptor;
+    /**
+     * Represents the aria-label prop of the Filter's container component.
+     */
+    ariaLabel?: string;
     /**
      * Represents the aria-label prop of the Filter's underlying Group component.
      */

package/dist/npm/filter/Filter.js

@@ -65,8 +65,8 @@ var Filter = /** @class */ (function (_super) {
      */
     Filter.prototype.render = function () {
         return (React.createElement("div", { className: 'k-widget k-filter' + (this.props.className ? ' ' + this.props.className : ''), style: this.props.style },
-            React.createElement("ul", { className: "k-filter-container" },
-                React.createElement("li", { className: "k-filter-group-main" },
+            React.createElement("ul", { role: 'tree', className: "k-filter-container", "aria-label": this.props.ariaLabel },
+                React.createElement("li", { role: 'treeitem', className: "k-filter-group-main" },
                     React.createElement(Group_1.Group, { filter: this.props.value, fields: this.props.fields, ariaLabel: this.props.ariaLabelGroup, ariaLabelExpression: this.props.ariaLabelExpression, onChange: this.onFilterChange, onRemove: this.onGroupRemove, defaultGroupFilter: this.props.defaultGroupFilter || { logic: 'and', filters: [] } })))));
     };
     /**

package/dist/npm/filter/Group.js

@@ -136,8 +136,8 @@ var Group = /** @class */ (function (_super) {
         var locService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var _a = this.props, fields = _a.fields, filter = _a.filter, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? locService.toLanguageString(messages_1.filterGroupAriaLabel, messages_1.messages[messages_1.filterGroupAriaLabel]) : _b;
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: "k-filter-toolbar", role: "toolbar", "aria-label": ariaLabel },
-                React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: false, role: "" },
+            React.createElement("div", { className: "k-filter-toolbar" },
+                React.createElement(kendo_react_buttons_1.Toolbar, { keyboardNavigation: false, role: "toolbar", ariaLabel: ariaLabel },
                     React.createElement(kendo_react_buttons_1.ToolbarItem, null,
                         React.createElement(kendo_react_buttons_1.ButtonGroup, null,
                             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])),
@@ -148,8 +148,8 @@ var Group = /** @class */ (function (_super) {
                         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: "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) ?
+            filter.filters.length > 0 && (React.createElement("ul", { role: 'group', className: "k-filter-lines" }, filter.filters.map(function (f, idx) {
+                return (React.createElement("li", { role: 'treeitem', 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 })
                     :
                         React.createElement(Expression_1.Expression, { filter: f, fields: fields, ariaLabel: _this.props.ariaLabelExpression, onChange: _this.onChange, onRemove: _this.onRemove })));

package/dist/npm/main.d.ts

@@ -1,4 +1,4 @@
-export { Pager, PagerProps, PageChangeEvent, BasePageChangeEvent } from './pager/Pager';
+export { Pager, PagerProps, PageChangeEvent, BasePageChangeEvent, PagerTargetEvent } from './pager/Pager';
 export * from './filteringCells';
 export * from './header';
 export * from './virtualization';

package/dist/npm/package-metadata.js

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

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+/**
+ * A Pager target event.
+ */
+export interface PagerTargetEvent {
+    [key: string]: any;
+    /**
+     * An event target.
+     */
+    target?: any;
+    /**
+     * An event value.
+     */
+    value?: any;
+}
 /**
  * Represents the base object of the `onPageChange` event. It is usually used
  * in custom pager scenarios in cases when we don't need any of the events or the target.
@@ -21,6 +35,10 @@ export interface BasePageChangeEvent {
      * A native DOM event.
      */
     nativeEvent?: any;
+    /**
+     * A target change event.
+     */
+    targetEvent?: PagerTargetEvent;
 }
 /**
  * Represents the object of the `onPageChange` event.
@@ -38,6 +56,10 @@ export interface PageChangeEvent extends BasePageChangeEvent {
      * A native DOM event.
      */
     nativeEvent: any;
+    /**
+     * A target change event.
+     */
+    targetEvent: PagerTargetEvent;
 }
 export interface PagerProps {
     /**
@@ -77,7 +99,12 @@ export interface PagerProps {
     /**
      * Displays a menu for selecting the page size.
      */
-    pageSizes?: Array<number>;
+    pageSizes?: Array<number> | Array<number | string>;
+    /**
+     * Sets the selected value of the page size Dropdownlist.
+     * It is useful when the selected value could also be a string not only a number.
+     */
+    pageSizeValue?: string | number;
     /**
      * Toggles the **Previous** and **Next** buttons.
      */
@@ -123,7 +150,7 @@ export declare class Pager extends React.Component<PagerProps> {
         buttonCount: PropTypes.Requireable<number>;
         info: PropTypes.Requireable<boolean>;
         type: PropTypes.Requireable<string>;
-        pageSizes: PropTypes.Requireable<(number | null | undefined)[]>;
+        pageSizes: PropTypes.Requireable<(NonNullable<string | number | null | undefined> | null | undefined)[]>;
         previousNext: PropTypes.Requireable<boolean>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         messagesMap: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/pager/Pager.js

@@ -52,8 +52,8 @@ var Pager = /** @class */ (function (_super) {
     function Pager(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
-        _this.onPageChange = function (eventData, syntheticEvent) {
-            var event = __assign({ target: _this, syntheticEvent: syntheticEvent, nativeEvent: syntheticEvent.nativeEvent }, eventData);
+        _this.onPageChange = function (eventData, targetEvent) {
+            var event = __assign({ target: _this, syntheticEvent: targetEvent.syntheticEvent, nativeEvent: targetEvent.nativeEvent, targetEvent: targetEvent }, eventData);
             if (_this.props.onPageChange) {
                 _this.props.onPageChange.call(undefined, event);
             }
@@ -65,7 +65,8 @@ var Pager = /** @class */ (function (_super) {
                     skip: (page - 1) * _this.props.take,
                     take: _this.props.take,
                     syntheticEvent: event,
-                    nativeEvent: event.nativeEvent
+                    nativeEvent: event.nativeEvent,
+                    targetEvent: event
                 });
             }
         };
@@ -120,7 +121,7 @@ var Pager = /** @class */ (function (_super) {
     Pager.prototype.render = function () {
         var _a;
         var _this = this;
-        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap;
+        var _b = this.props, skip = _b.skip, take = _b.take, total = _b.total, pageSizes = _b.pageSizes, size = _b.size, messagesMap = _b.messagesMap, pageSizeValue = _b.pageSizeValue;
         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;
@@ -147,7 +148,7 @@ var Pager = /** @class */ (function (_super) {
             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 pagerPageSizes = pageSizes && (React.createElement(PagerPageSizes_1.PagerPageSizes, { pageChange: this.onPageChange, pageSize: take, pageSizes: pageSizes, value: pageSizeValue, messagesMap: messagesMap, size: this.props.size }));
         var info = this.props.info && (React.createElement("div", { className: "k-pager-info" }, intlService
             .format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [
             Math.min(skip + 1, total),
@@ -192,7 +193,10 @@ var Pager = /** @class */ (function (_super) {
         buttonCount: PropTypes.number,
         info: PropTypes.bool,
         type: PropTypes.oneOf(['numeric', 'input']),
-        pageSizes: PropTypes.arrayOf(PropTypes.number),
+        pageSizes: PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ])),
         previousNext: PropTypes.bool,
         onPageChange: PropTypes.func,
         messagesMap: PropTypes.func,

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
+import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
 /**
  * @hidden
  */
 export interface PagerPageSizesProps {
+    value?: number | string;
     pageSize: number;
-    pageSizes: number[];
+    pageSizes: number[] | Array<number | string>;
     size?: null | 'small' | 'medium' | 'large';
     pageChange?: (event: {
         skip: number;
         take: number;
-    }, e: React.SyntheticEvent<any>) => void;
+    }, e: DropDownListChangeEvent) => void;
     messagesMap?: (messageKey: string) => ({
         messageKey: string;
         defaultMessage: string;
@@ -19,6 +21,6 @@ export interface PagerPageSizesProps {
  * @hidden
  */
 export declare class PagerPageSizes extends React.Component<PagerPageSizesProps, {}> {
-    pageSizeChange: (e: any) => void;
+    pageSizeChange: (e: DropDownListChangeEvent) => void;
     render(): JSX.Element;
 }

package/dist/npm/pager/PagerPageSizes.js

@@ -35,17 +35,17 @@ var PagerPageSizes = /** @class */ (function (_super) {
         return _this;
     }
     PagerPageSizes.prototype.render = function () {
-        var _this = this;
-        var sizes = this.props.pageSizes.slice();
-        if (sizes.filter(function (s) { return s === _this.props.pageSize; }).length === 0) {
-            sizes.unshift(this.props.pageSize);
+        var _a = this.props, value = _a.value, pageSizes = _a.pageSizes, pageSize = _a.pageSize, messagesMap = _a.messagesMap;
+        var sizes = pageSizes.slice();
+        if (value === undefined && sizes.filter(function (s) { return s === pageSize; }).length === 0) {
+            sizes.unshift(pageSize);
         }
-        var itemPerPageMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerItemPerPage) :
+        var itemPerPageMessage = messagesMap ? messagesMap(messages_1.pagerItemPerPage) :
             ({ messageKey: messages_1.pagerItemPerPage, defaultMessage: messages_1.messages[messages_1.pagerItemPerPage] });
-        var pageSelectionMessage = this.props.messagesMap ? this.props.messagesMap(messages_1.pagerPageSelection) :
+        var pageSelectionMessage = messagesMap ? messagesMap(messages_1.pagerPageSelection) :
             ({ messageKey: messages_1.pagerPageSelection, defaultMessage: messages_1.messages[messages_1.pagerPageSelection] });
         return (React.createElement("span", { className: "k-pager-sizes" },
-            React.createElement(kendo_react_dropdowns_1.DropDownList, { value: this.props.pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage), size: this.props.size }),
+            React.createElement(kendo_react_dropdowns_1.DropDownList, { value: value !== undefined ? value : pageSize, data: sizes, onChange: this.pageSizeChange, ariaLabel: (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(pageSelectionMessage.messageKey, pageSelectionMessage.defaultMessage), size: this.props.size }),
             (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(itemPerPageMessage.messageKey, itemPerPageMessage.defaultMessage)));
     };
     return PagerPageSizes;