@progress/kendo-react-data-tools 7.3.0 → 7.4.0-develop.10

package/pager/Pager.mjs

@@ -6,48 +6,54 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as g from "react";
-import s from "prop-types";
-import { PagerNumericButtons as X } from "./PagerNumericButtons.mjs";
-import { PagerInput as Y } from "./PagerInput.mjs";
-import { PagerPageSizes as Z } from "./PagerPageSizes.mjs";
-import { Button as ee } from "@progress/kendo-react-buttons";
-import { pagerFirstPage as M, messages as n, pagerPreviousPage as v, pagerNextPage as y, pagerLastPage as S, pagerInfo as k, pagerAriaKeyshortcuts as z, pagerPage as b, pagerOf as R, pagerTotalPages as E } from "../messages/index.mjs";
-import { provideLocalizationService as te, provideIntlService as se, registerForIntl as ae, registerForLocalization as ie } from "@progress/kendo-react-intl";
-import { validatePackage as re, classNames as q, kendoThemeMaps as oe } from "@progress/kendo-react-common";
-import { caretAltToRightIcon as D, caretAltToLeftIcon as F, caretAltRightIcon as V, caretAltLeftIcon as U } from "@progress/kendo-svg-icons";
-import { packageMetadata as ne } from "../package-metadata.mjs";
-const j = 600, ge = 768, f = class f extends g.Component {
+import * as h from "react";
+import i from "prop-types";
+import { PagerNumericButtons as ae } from "./PagerNumericButtons.mjs";
+import { PagerInput as ie } from "./PagerInput.mjs";
+import { PagerPageSizes as re } from "./PagerPageSizes.mjs";
+import { Button as oe } from "@progress/kendo-react-buttons";
+import { pagerFirstPage as y, messages as l, pagerPreviousPage as b, pagerNextPage as S, pagerLastPage as k, pagerInfo as K, pagerAriaKeyshortcuts as E, pagerPage as z, pagerOf as w, pagerTotalPages as C } from "../messages/index.mjs";
+import { provideLocalizationService as ne, provideIntlService as ge, registerForIntl as le, registerForLocalization as he } from "@progress/kendo-react-intl";
+import { Keys as n, focusFirstFocusableChild as pe, enableNavigatableContainer as ue, disableNavigatableContainer as ce, keepFocusInContainer as me, TABBABLE_ELEMENTS as fe, validatePackage as de, classNames as q, kendoThemeMaps as Pe } from "@progress/kendo-react-common";
+import { caretAltToRightIcon as V, caretAltToLeftIcon as U, caretAltRightIcon as j, caretAltLeftIcon as G } from "@progress/kendo-svg-icons";
+import { packageMetadata as Me } from "../package-metadata.mjs";
+const H = 600, ve = 768, P = class P extends h.Component {
   constructor(p) {
-    super(p), this._element = null, this.onPageChange = (i, t) => {
-      const l = {
+    super(p), this._element = null, this.onPageChange = (t, e) => {
+      const a = {
         target: this,
-        syntheticEvent: t.syntheticEvent,
-        nativeEvent: t.nativeEvent,
-        targetEvent: t,
-        ...i
+        syntheticEvent: e.syntheticEvent,
+        nativeEvent: e.nativeEvent,
+        targetEvent: e,
+        ...t
       };
-      this.props.onPageChange && this.props.onPageChange.call(void 0, l);
-    }, this.changePage = (i, t) => {
-      this.props.onPageChange && i > 0 && i <= this.totalPages && this.props.onPageChange({
+      this.props.onPageChange && this.props.onPageChange.call(void 0, a);
+    }, this.changePage = (t, e) => {
+      this.props.onPageChange && t > 0 && t <= this.totalPages && this.props.onPageChange({
         target: this,
-        skip: (i - 1) * this.props.take,
+        skip: (t - 1) * this.props.take,
         take: this.props.take,
-        syntheticEvent: t,
-        nativeEvent: t.nativeEvent,
-        targetEvent: t
+        syntheticEvent: e,
+        nativeEvent: e.nativeEvent,
+        targetEvent: e
       });
     }, this.onWindowResize = () => {
-      const i = this.element;
-      if (!i || !this.props.responsive)
+      const t = this.element;
+      if (!t || !this.props.responsive)
         return;
-      const t = i.offsetWidth;
-      t < j ? this.setState({ showPagerSizes: !1 }) : t >= j && t < ge ? this.setState({ showPagerInfo: !1, showPagerSizes: !0 }) : this.setState({ showPagerInfo: !0, showPagerSizes: !0 });
-    }, re(ne), this.state = { showPagerSizes: !0, showPagerInfo: !0 };
+      const e = t.offsetWidth;
+      e < H ? this.setState({ showPagerSizes: !1 }) : e >= H && e < ve ? this.setState({ showPagerInfo: !1, showPagerSizes: !0 }) : this.setState({ showPagerInfo: !0, showPagerSizes: !0 });
+    }, this.onKeyDown = (t) => {
+      const e = this.element, a = t.keyCode;
+      !e || !this.props.navigatable || ((a === n.home || t.metaKey && a === n.left) && this.changePage(1, t), (a === n.end || t.metaKey && a === n.right) && this.changePage(this.totalPages, t), document.activeElement === e ? (a === n.enter && (pe(e), ue(e)), (a === n.left || a === n.up) && this.changePage(this.currentPage - 1, t), (a === n.right || a === n.down) && this.changePage(this.currentPage + 1, t)) : (a === n.esc && (e.focus(), ce(e)), me(t, e, fe)));
+    }, de(Me), this.state = { showPagerSizes: !0, showPagerInfo: !0, innerNavigateActive: !1 };
   }
   get isRtl() {
     return this.props.dir === "rtl";
   }
+  get currentPage() {
+    return Math.floor(this.props.skip / this.props.take) + 1;
+  }
   /**
    * Returns the HTML element of the Pager component.
    */
@@ -70,130 +76,150 @@ const j = 600, ge = 768, f = class f extends g.Component {
    * @hidden
    */
   render() {
-    const { showPagerSizes: p, showPagerInfo: i } = this.state, { skip: t, take: l, total: h, pageSizes: u, size: o, responsive: d, messagesMap: e, pageSizeValue: G } = this.props, r = te(this), P = se(this), a = Math.floor(t / l) + 1, H = this.props.type === "numeric" ? /* @__PURE__ */ g.createElement(
-      X,
+    const { showPagerSizes: p, showPagerInfo: t } = this.state, {
+      skip: e,
+      take: a,
+      total: u,
+      pageSizes: c,
+      size: g,
+      responsive: M,
+      messagesMap: s,
+      dir: J,
+      style: Q,
+      pageSizeValue: X,
+      previousNext: Y,
+      className: Z,
+      navigatable: m
+    } = this.props, o = ne(this), v = ge(this), r = this.currentPage, ee = this.props.type === "numeric" ? /* @__PURE__ */ h.createElement(
+      ae,
       {
-        type: d && !p ? "dropdown" : "numbers",
+        type: M && !p ? "dropdown" : "numbers",
         buttonCount: this.props.buttonCount || 0,
         totalPages: this.totalPages,
-        currentPage: a,
+        currentPage: this.currentPage,
         pageChange: this.changePage,
         messagesMap: this.props.messagesMap,
-        size: o
+        size: g,
+        navigatable: m
       }
-    ) : /* @__PURE__ */ g.createElement(
-      Y,
+    ) : /* @__PURE__ */ h.createElement(
+      ie,
       {
         buttonCount: this.props.buttonCount || 0,
         totalPages: this.totalPages,
-        currentPage: a,
+        currentPage: r,
         pageChange: this.changePage,
-        messagesMap: e,
-        size: o
+        messagesMap: s,
+        size: g,
+        navigatable: m
       }
-    ), K = e ? e(M) : { messageKey: M, defaultMessage: n[M] }, w = e ? e(v) : { messageKey: v, defaultMessage: n[v] }, C = e ? e(y) : { messageKey: y, defaultMessage: n[y] }, L = e ? e(S) : { messageKey: S, defaultMessage: n[S] }, I = e ? e(k) : { messageKey: k, defaultMessage: n[k] }, N = e ? e(z) : { messageKey: z, defaultMessage: n[z] }, A = e ? e(b) : { messageKey: b, defaultMessage: n[b] }, B = e ? e(R) : { messageKey: R, defaultMessage: n[R] }, c = e ? e(E) : { messageKey: E, defaultMessage: n[E] }, J = `${r.toLanguageString(
-      A.messageKey,
-      A.defaultMessage
-    )} ${P.format(
-      r.toLanguageString(
-        c.messageKey,
-        c.defaultMessage
+    ), R = s ? s(y) : { messageKey: y, defaultMessage: l[y] }, L = s ? s(b) : { messageKey: b, defaultMessage: l[b] }, I = s ? s(S) : { messageKey: S, defaultMessage: l[S] }, N = s ? s(k) : { messageKey: k, defaultMessage: l[k] }, A = s ? s(K) : { messageKey: K, defaultMessage: l[K] }, B = s ? s(E) : { messageKey: E, defaultMessage: l[E] }, T = s ? s(z) : { messageKey: z, defaultMessage: l[z] }, x = s ? s(w) : { messageKey: w, defaultMessage: l[w] }, f = s ? s(C) : { messageKey: C, defaultMessage: l[C] }, te = `${o.toLanguageString(
+      T.messageKey,
+      T.defaultMessage
+    )} ${v.format(
+      o.toLanguageString(
+        f.messageKey,
+        f.defaultMessage
       ),
-      [a]
-    )} ${r.toLanguageString(
-      B.messageKey,
-      B.defaultMessage
-    )} ${P.format(
-      r.toLanguageString(
-        c.messageKey,
-        c.defaultMessage
+      [r]
+    )} ${o.toLanguageString(
+      x.messageKey,
+      x.defaultMessage
+    )} ${v.format(
+      o.toLanguageString(
+        f.messageKey,
+        f.defaultMessage
       ),
       [this.totalPages]
     )}`;
-    let O, T, x, W;
-    this.props.previousNext && (O = this.renderButton(
+    let O, D, F, W;
+    Y && (O = this.renderButton(
       1,
-      "k-pager-nav k-pager-first" + (a === 1 ? " k-disabled" : ""),
-      r.toLanguageString(K.messageKey, K.defaultMessage),
+      "k-pager-nav k-pager-first" + (r === 1 ? " k-disabled" : ""),
+      o.toLanguageString(R.messageKey, R.defaultMessage),
       this.isRtl ? "caret-alt-to-right" : "caret-alt-to-left",
-      this.isRtl ? D : F,
-      a === 1 ? !0 : void 0
-    ), T = this.renderButton(
-      a - 1,
-      "k-pager-nav" + (a === 1 ? " k-disabled" : ""),
-      r.toLanguageString(w.messageKey, w.defaultMessage),
-      this.isRtl ? "caret-alt-right" : "caret-alt-left",
       this.isRtl ? V : U,
-      a === 1 ? !0 : void 0
-    ), x = this.renderButton(
-      a + 1,
-      "k-pager-nav" + (a >= this.totalPages ? " k-disabled" : ""),
-      r.toLanguageString(C.messageKey, C.defaultMessage),
+      r === 1 ? !0 : void 0
+    ), D = this.renderButton(
+      r - 1,
+      "k-pager-nav" + (r === 1 ? " k-disabled" : ""),
+      o.toLanguageString(L.messageKey, L.defaultMessage),
+      this.isRtl ? "caret-alt-right" : "caret-alt-left",
+      this.isRtl ? j : G,
+      r === 1 ? !0 : void 0
+    ), F = this.renderButton(
+      r + 1,
+      "k-pager-nav" + (r >= this.totalPages ? " k-disabled" : ""),
+      o.toLanguageString(I.messageKey, I.defaultMessage),
       this.isRtl ? "caret-alt-left" : "caret-alt-right",
-      this.isRtl ? U : V,
-      a >= this.totalPages ? !0 : void 0
+      this.isRtl ? G : j,
+      r >= this.totalPages ? !0 : void 0
     ), W = this.renderButton(
       this.totalPages,
-      "k-pager-nav k-pager-last" + (a >= this.totalPages ? " k-disabled" : ""),
-      r.toLanguageString(L.messageKey, L.defaultMessage),
+      "k-pager-nav k-pager-last" + (r >= this.totalPages ? " k-disabled" : ""),
+      o.toLanguageString(N.messageKey, N.defaultMessage),
       this.isRtl ? "caret-alt-to-left" : "caret-alt-to-right",
-      this.isRtl ? F : D,
-      a >= this.totalPages ? !0 : void 0
+      this.isRtl ? U : V,
+      r >= this.totalPages ? !0 : void 0
     ));
-    const _ = u && /* @__PURE__ */ g.createElement(
-      Z,
+    const _ = c && /* @__PURE__ */ h.createElement(
+      re,
       {
         pageChange: this.onPageChange,
-        pageSize: l,
-        pageSizes: u,
-        value: G,
-        messagesMap: e,
-        size: o
+        pageSize: a,
+        pageSizes: c,
+        value: X,
+        messagesMap: s,
+        size: g,
+        navigatable: m
       }
-    ), $ = this.props.info && /* @__PURE__ */ g.createElement("span", { className: "k-pager-info" }, P.format(r.toLanguageString(I.messageKey, I.defaultMessage), [
-      Math.min(t + 1, h),
-      Math.min(t + l, h),
-      h
+    ), $ = this.props.info && /* @__PURE__ */ h.createElement("span", { className: "k-pager-info" }, v.format(o.toLanguageString(A.messageKey, A.defaultMessage), [
+      Math.min(e + 1, u),
+      Math.min(e + a, u),
+      u
     ]));
-    return /* @__PURE__ */ g.createElement(
+    return /* @__PURE__ */ h.createElement(
       "div",
       {
         className: q(
           "k-pager",
           {
-            [`k-pager-${oe.sizeMap[o] || o}`]: o
+            [`k-pager-${Pe.sizeMap[g] || g}`]: g
           },
-          this.props.className
+          Z
         ),
-        style: this.props.style,
+        style: Q,
         role: "application",
         "aria-roledescription": "pager",
-        dir: this.props.dir,
-        "aria-keyshortcuts": r.toLanguageString(N.messageKey, N.defaultMessage),
-        "aria-label": J,
-        ref: (Q) => this._element = Q
+        dir: J,
+        "aria-keyshortcuts": o.toLanguageString(B.messageKey, B.defaultMessage),
+        "aria-label": te,
+        ref: (se) => this._element = se,
+        tabIndex: m ? 0 : void 0,
+        onKeyDown: this.onKeyDown
       },
-      /* @__PURE__ */ g.createElement("div", { className: q("k-pager-numbers-wrap") }, O, T, H, x, W),
-      d ? p && _ : _,
-      d ? i && $ : $
+      /* @__PURE__ */ h.createElement("div", { className: q("k-pager-numbers-wrap") }, O, D, ee, F, W),
+      M ? p && _ : _,
+      M ? t && $ : $
     );
   }
-  renderButton(p, i, t, l, h, u) {
-    return /* @__PURE__ */ g.createElement(
-      ee,
+  renderButton(p, t, e, a, u, c) {
+    return /* @__PURE__ */ h.createElement(
+      oe,
       {
         fillMode: "flat",
         themeColor: "base",
         size: this.props.size,
         rounded: null,
-        className: i,
-        icon: l,
-        svgIcon: h,
-        title: t,
+        className: t,
+        icon: a,
+        svgIcon: u,
+        title: e,
         role: "button",
-        "aria-disabled": u,
-        onClick: (o) => {
-          o.preventDefault(), this.changePage(p, o);
+        "aria-disabled": c,
+        tabIndex: this.props.navigatable ? -1 : void 0,
+        onClick: (g) => {
+          g.preventDefault(), this.changePage(p, g);
         }
       }
     );
@@ -202,33 +228,33 @@ const j = 600, ge = 768, f = class f extends g.Component {
     return Math.ceil((this.props.total || 0) / this.props.take);
   }
 };
-f.propTypes = {
-  className: s.string,
-  style: s.object,
-  total: s.number.isRequired,
-  skip: s.number.isRequired,
-  take: s.number.isRequired,
-  buttonCount: s.number,
-  info: s.bool,
-  type: s.oneOf(["numeric", "input"]),
-  pageSizes: s.arrayOf(s.oneOfType([
-    s.string,
-    s.number
+P.propTypes = {
+  className: i.string,
+  style: i.object,
+  total: i.number.isRequired,
+  skip: i.number.isRequired,
+  take: i.number.isRequired,
+  buttonCount: i.number,
+  info: i.bool,
+  type: i.oneOf(["numeric", "input"]),
+  pageSizes: i.arrayOf(i.oneOfType([
+    i.string,
+    i.number
   ])),
-  previousNext: s.bool,
-  onPageChange: s.func,
-  messagesMap: s.func,
-  size: s.oneOf([null, "small", "medium", "large"]),
-  dir: s.string
-}, f.defaultProps = {
+  previousNext: i.bool,
+  onPageChange: i.func,
+  messagesMap: i.func,
+  size: i.oneOf([null, "small", "medium", "large"]),
+  dir: i.string
+}, P.defaultProps = {
   buttonCount: 10,
   info: !0,
   type: "numeric",
   size: "medium"
 };
-let m = f;
-ae(m);
-ie(m);
+let d = P;
+le(d);
+he(d);
 export {
-  m as Pager
+  d as Pager
 };

package/pager/PagerInput.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),n=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),c=require("@progress/kendo-react-inputs");function m(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,r.get?r:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const g=m(u);class l extends g.Component{constructor(){super(...arguments),this.state={page:this.props.currentPage},this.handleOnChange=a=>{this.setState({page:a.target.value}),a.target.value&&this.props.pageChange(a.target.value,a)}}render(){const a=n.provideIntlService(this),s=n.provideLocalizationService(this),r=this.props.messagesMap?this.props.messagesMap(e.pagerPage):{messageKey:e.pagerPage,defaultMessage:e.messages[e.pagerPage]},p=this.props.messagesMap?this.props.messagesMap(e.pagerOf):{messageKey:e.pagerOf,defaultMessage:e.messages[e.pagerOf]},o=this.props.messagesMap?this.props.messagesMap(e.pagerTotalPages):{messageKey:e.pagerTotalPages,defaultMessage:e.messages[e.pagerTotalPages]},i=this.props.messagesMap?this.props.messagesMap(e.pagerTotalPages):{messageKey:e.pagerPageNumberLabel,defaultMessage:e.messages[e.pagerPageNumberLabel]};return g.createElement("span",{className:"k-pager-input"},g.createElement("span",null,s.toLanguageString(r.messageKey,r.defaultMessage)),g.createElement(c.NumericTextBox,{value:this.props.currentPage!==void 0?this.props.currentPage:this.state.page,onChange:this.handleOnChange,min:1,spinners:!1,ariaLabel:s.toLanguageString(i.messageKey,i.defaultMessage)}),g.createElement("span",null,`${s.toLanguageString(p.messageKey,p.defaultMessage)} ${a.format(s.toLanguageString(o.messageKey,o.defaultMessage),[this.props.totalPages])}`))}}n.registerForLocalization(l);exports.PagerInput=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),n=require("@progress/kendo-react-intl"),e=require("../messages/index.js"),c=require("@progress/kendo-react-inputs");function m(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(a,s,r.get?r:{enumerable:!0,get:()=>t[s]})}}return a.default=t,Object.freeze(a)}const g=m(u);class l extends g.Component{constructor(){super(...arguments),this.state={page:this.props.currentPage},this.handleOnChange=a=>{this.setState({page:a.target.value}),a.target.value&&this.props.pageChange(a.target.value,a)}}render(){const a=n.provideIntlService(this),s=n.provideLocalizationService(this),r=this.props.messagesMap?this.props.messagesMap(e.pagerPage):{messageKey:e.pagerPage,defaultMessage:e.messages[e.pagerPage]},p=this.props.messagesMap?this.props.messagesMap(e.pagerOf):{messageKey:e.pagerOf,defaultMessage:e.messages[e.pagerOf]},o=this.props.messagesMap?this.props.messagesMap(e.pagerTotalPages):{messageKey:e.pagerTotalPages,defaultMessage:e.messages[e.pagerTotalPages]},i=this.props.messagesMap?this.props.messagesMap(e.pagerTotalPages):{messageKey:e.pagerPageNumberLabel,defaultMessage:e.messages[e.pagerPageNumberLabel]};return g.createElement("span",{className:"k-pager-input"},g.createElement("span",null,s.toLanguageString(r.messageKey,r.defaultMessage)),g.createElement(c.NumericTextBox,{value:this.props.currentPage!==void 0?this.props.currentPage:this.state.page,onChange:this.handleOnChange,min:1,spinners:!1,ariaLabel:s.toLanguageString(i.messageKey,i.defaultMessage),tabIndex:this.props.navigatable?-1:void 0}),g.createElement("span",null,`${s.toLanguageString(p.messageKey,p.defaultMessage)} ${a.format(s.toLanguageString(o.messageKey,o.defaultMessage),[this.props.totalPages])}`))}}n.registerForLocalization(l);exports.PagerInput=l;

package/pager/PagerInput.mjs

@@ -10,7 +10,7 @@ import * as s from "react";
 import { provideIntlService as u, provideLocalizationService as c, registerForLocalization as h } from "@progress/kendo-react-intl";
 import { pagerPage as r, messages as t, pagerOf as p, pagerTotalPages as g, pagerPageNumberLabel as m } from "../messages/index.mjs";
 import { NumericTextBox as M } from "@progress/kendo-react-inputs";
-class f extends s.Component {
+class d extends s.Component {
   constructor() {
     super(...arguments), this.state = { page: this.props.currentPage }, this.handleOnChange = (e) => {
       this.setState({ page: e.target.value }), e.target.value && this.props.pageChange(e.target.value, e);
@@ -25,14 +25,15 @@ class f extends s.Component {
         onChange: this.handleOnChange,
         min: 1,
         spinners: !1,
-        ariaLabel: a.toLanguageString(l.messageKey, l.defaultMessage)
+        ariaLabel: a.toLanguageString(l.messageKey, l.defaultMessage),
+        tabIndex: this.props.navigatable ? -1 : void 0
       }
     ), /* @__PURE__ */ s.createElement("span", null, `${a.toLanguageString(o.messageKey, o.defaultMessage)} ${e.format(a.toLanguageString(i.messageKey, i.defaultMessage), [
       this.props.totalPages
     ])}`));
   }
 }
-h(f);
+h(d);
 export {
-  f as PagerInput
+  d as PagerInput
 };

package/pager/PagerNumericButtons.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react"),p=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-buttons"),a=require("../messages/index.js"),k=require("@progress/kendo-react-intl");function C(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,r.get?r:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const o=C(P),u="...";class S extends o.Component{constructor(){super(...arguments),this.handlePageChange=(e,t)=>{e.preventDefault(),this.props.pageChange(t,e)},this.handleSelectPageChange=e=>{e.preventDefault(),this.props.pageChange(e.target.value,e)}}render(){const e=k.provideLocalizationService(this),t=this.props.messagesMap?this.props.messagesMap(a.pagerMobileSelect):{messageKey:a.pagerMobileSelect,defaultMessage:a.messages[a.pagerMobileSelect]},r=this.props.messagesMap?this.props.messagesMap(a.pagerPage):{messageKey:a.pagerPage,defaultMessage:a.messages[a.pagerPage]},l=this.props.messagesMap?this.props.messagesMap(a.pagerMoreButtonLabel):{messageKey:a.pagerMoreButtonLabel,defaultMessage:a.messages[a.pagerMoreButtonLabel]},g=e.toLanguageString(l.messageKey,l.defaultMessage),h=this.start>1&&this.renderDots(this.start-1,g),d=this.end<this.props.totalPages&&this.renderDots(this.end+1,g),m=this.start>1&&this.renderOptionDots(this.start-1),b=this.end<this.props.totalPages&&this.renderOptionDots(this.end+1),i=[];for(let s=this.start;s<=this.end;s++)i.push(s);const M=i.map(s=>o.createElement(c.Button,{className:p.classNames({"k-selected":this.props.currentPage===s}),key:s,fillMode:"flat",themeColor:"primary",size:this.props.size,rounded:null,role:"button","aria-label":e.toLanguageString(r.messageKey,r.defaultMessage)+" "+s,"aria-current":this.props.currentPage===s?!0:void 0,onClick:y=>this.handlePageChange(y,s)},s)),f=i.map(s=>o.createElement("option",{key:s},s));return o.createElement(o.Fragment,null,o.createElement("select",{style:{width:"5em",margin:"0px 1em",display:this.props.type==="dropdown"?"inline-flex":"none"},className:p.classNames("k-picker k-dropdown-list k-dropdown k-rounded-md",{[`k-picker-${p.kendoThemeMaps.sizeMap[this.props.size]||this.props.size}`]:this.props.size}),"aria-label":e.toLanguageString(t.messageKey,t.defaultMessage),value:this.props.currentPage,onChange:s=>this.handleSelectPageChange(s)},m,f,b),o.createElement("div",{className:"k-pager-numbers",style:{display:this.props.type==="numbers"?"":"none"}},h,M,d))}get end(){return Math.min(this.start+this.props.buttonCount-1,this.props.totalPages)}get start(){const e=this.props.currentPage,t=this.props.buttonCount;if(e>t){const r=e%t;return r===0?e-t+1:e-r+1}return 1}renderDots(e,t){return o.createElement(c.Button,{fillMode:"flat",themeColor:"primary",size:this.props.size,rounded:null,role:"button","aria-label":t,onClick:r=>this.handlePageChange(r,e)},u)}renderOptionDots(e){return o.createElement("option",{value:e},u)}}exports.PagerNumericButtons=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),c=require("@progress/kendo-react-common"),b=require("@progress/kendo-react-buttons"),n=require("../messages/index.js"),L=require("@progress/kendo-react-intl");function B(o){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const t in o)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(e,t,a.get?a:{enumerable:!0,get:()=>o[t]})}}return e.default=o,Object.freeze(e)}const r=B(O),f="...";class N extends r.Component{constructor(){super(...arguments),this.handlePageChange=(e,t)=>{e.preventDefault(),this.props.pageChange(t,e)},this.handleSelectPageChange=e=>{e.preventDefault(),this.props.pageChange(e.target.value,e)}}render(){const e=L.provideLocalizationService(this),{messagesMap:t,size:a,totalPages:u,currentPage:i,type:g,navigatable:M}=this.props,p=t?t(n.pagerMobileSelect):{messageKey:n.pagerMobileSelect,defaultMessage:n.messages[n.pagerMobileSelect]},d=t?t(n.pagerPage):{messageKey:n.pagerPage,defaultMessage:n.messages[n.pagerPage]},m=t?t(n.pagerMoreButtonLabel):{messageKey:n.pagerMoreButtonLabel,defaultMessage:n.messages[n.pagerMoreButtonLabel]},h=e.toLanguageString(m.messageKey,m.defaultMessage),y=this.start>1&&this.renderDots(this.start-1,h),k=this.end<u&&this.renderDots(this.end+1,h),v=this.start>1&&this.renderOptionDots(this.start-1),P=this.end<u&&this.renderOptionDots(this.end+1),l=[];for(let s=this.start;s<=this.end;s++)l.push(s);const C=l.map(s=>r.createElement(b.Button,{className:c.classNames({"k-selected":i===s}),key:s,fillMode:"flat",themeColor:"primary",size:a,rounded:null,role:"button","aria-label":e.toLanguageString(d.messageKey,d.defaultMessage)+" "+s,"aria-current":i===s?!0:void 0,onClick:D=>this.handlePageChange(D,s),tabIndex:M?-1:void 0},s)),S=l.map(s=>r.createElement("option",{key:s},s));return r.createElement(r.Fragment,null,r.createElement("select",{style:{width:"5em",margin:"0px 1em",display:g==="dropdown"?"inline-flex":"none"},className:c.classNames("k-picker k-dropdown-list k-dropdown k-rounded-md",{[`k-picker-${c.kendoThemeMaps.sizeMap[a]||a}`]:a}),"aria-label":e.toLanguageString(p.messageKey,p.defaultMessage),value:i,onChange:s=>this.handleSelectPageChange(s)},v,S,P),r.createElement("div",{className:"k-pager-numbers",style:{display:g==="numbers"?"":"none"}},y,C,k))}get end(){return Math.min(this.start+this.props.buttonCount-1,this.props.totalPages)}get start(){const e=this.props.currentPage,t=this.props.buttonCount;if(e>t){const a=e%t;return a===0?e-t+1:e-a+1}return 1}renderDots(e,t){return r.createElement(b.Button,{fillMode:"flat",themeColor:"primary",size:this.props.size,rounded:null,role:"button","aria-label":t,onClick:a=>this.handlePageChange(a,e),tabIndex:this.props.navigatable?-1:void 0},f)}renderOptionDots(e){return r.createElement("option",{value:e},f)}}exports.PagerNumericButtons=N;

package/pager/PagerNumericButtons.mjs

@@ -6,13 +6,13 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as r from "react";
-import { classNames as m, kendoThemeMaps as k } from "@progress/kendo-react-common";
-import { Button as u } from "@progress/kendo-react-buttons";
-import { pagerMobileSelect as n, messages as i, pagerPage as p, pagerMoreButtonLabel as l } from "../messages/index.mjs";
-import { provideLocalizationService as v } from "@progress/kendo-react-intl";
-const c = "...";
-class K extends r.Component {
+import * as n from "react";
+import { classNames as f, kendoThemeMaps as E } from "@progress/kendo-react-common";
+import { Button as M } from "@progress/kendo-react-buttons";
+import { pagerMobileSelect as i, messages as l, pagerPage as p, pagerMoreButtonLabel as g } from "../messages/index.mjs";
+import { provideLocalizationService as z } from "@progress/kendo-react-intl";
+const v = "...";
+class I extends n.Component {
   constructor() {
     super(...arguments), this.handlePageChange = (e, s) => {
       e.preventDefault(), this.props.pageChange(s, e);
@@ -21,51 +21,52 @@ class K extends r.Component {
     };
   }
   render() {
-    const e = v(this), s = this.props.messagesMap ? this.props.messagesMap(n) : { messageKey: n, defaultMessage: i[n] }, a = this.props.messagesMap ? this.props.messagesMap(p) : { messageKey: p, defaultMessage: i[p] }, g = this.props.messagesMap ? this.props.messagesMap(l) : { messageKey: l, defaultMessage: i[l] }, h = e.toLanguageString(g.messageKey, g.defaultMessage), d = this.start > 1 && this.renderDots(this.start - 1, h), M = this.end < this.props.totalPages && this.renderDots(this.end + 1, h), f = this.start > 1 && this.renderOptionDots(this.start - 1), b = this.end < this.props.totalPages && this.renderOptionDots(this.end + 1), o = [];
+    const e = z(this), { messagesMap: s, size: a, totalPages: d, currentPage: r, type: u, navigatable: C } = this.props, c = s ? s(i) : { messageKey: i, defaultMessage: l[i] }, m = s ? s(p) : { messageKey: p, defaultMessage: l[p] }, h = s ? s(g) : { messageKey: g, defaultMessage: l[g] }, b = e.toLanguageString(h.messageKey, h.defaultMessage), y = this.start > 1 && this.renderDots(this.start - 1, b), k = this.end < d && this.renderDots(this.end + 1, b), D = this.start > 1 && this.renderOptionDots(this.start - 1), P = this.end < d && this.renderOptionDots(this.end + 1), o = [];
     for (let t = this.start; t <= this.end; t++)
       o.push(t);
-    const y = o.map((t) => /* @__PURE__ */ r.createElement(
-      u,
+    const S = o.map((t) => /* @__PURE__ */ n.createElement(
+      M,
       {
-        className: m({ "k-selected": this.props.currentPage === t }),
+        className: f({ "k-selected": r === t }),
         key: t,
         fillMode: "flat",
         themeColor: "primary",
-        size: this.props.size,
+        size: a,
         rounded: null,
         role: "button",
-        "aria-label": e.toLanguageString(a.messageKey, a.defaultMessage) + " " + t,
-        "aria-current": this.props.currentPage === t ? !0 : void 0,
-        onClick: (P) => this.handlePageChange(P, t)
+        "aria-label": e.toLanguageString(m.messageKey, m.defaultMessage) + " " + t,
+        "aria-current": r === t ? !0 : void 0,
+        onClick: (x) => this.handlePageChange(x, t),
+        tabIndex: C ? -1 : void 0
       },
       t
-    )), C = o.map((t) => /* @__PURE__ */ r.createElement("option", { key: t }, t));
-    return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
+    )), L = o.map((t) => /* @__PURE__ */ n.createElement("option", { key: t }, t));
+    return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
       "select",
       {
-        style: { width: "5em", margin: "0px 1em", display: this.props.type === "dropdown" ? "inline-flex" : "none" },
-        className: m(
+        style: { width: "5em", margin: "0px 1em", display: u === "dropdown" ? "inline-flex" : "none" },
+        className: f(
           "k-picker k-dropdown-list k-dropdown k-rounded-md",
           {
-            [`k-picker-${k.sizeMap[this.props.size] || this.props.size}`]: this.props.size
+            [`k-picker-${E.sizeMap[a] || a}`]: a
           }
         ),
-        "aria-label": e.toLanguageString(s.messageKey, s.defaultMessage),
-        value: this.props.currentPage,
+        "aria-label": e.toLanguageString(c.messageKey, c.defaultMessage),
+        value: r,
         onChange: (t) => this.handleSelectPageChange(t)
       },
-      f,
-      C,
-      b
-    ), /* @__PURE__ */ r.createElement(
+      D,
+      L,
+      P
+    ), /* @__PURE__ */ n.createElement(
       "div",
       {
         className: "k-pager-numbers",
-        style: { display: this.props.type === "numbers" ? "" : "none" }
+        style: { display: u === "numbers" ? "" : "none" }
       },
-      d,
       y,
-      M
+      S,
+      k
     ));
   }
   get end() {
@@ -80,8 +81,8 @@ class K extends r.Component {
     return 1;
   }
   renderDots(e, s) {
-    return /* @__PURE__ */ r.createElement(
-      u,
+    return /* @__PURE__ */ n.createElement(
+      M,
       {
         fillMode: "flat",
         themeColor: "primary",
@@ -89,15 +90,16 @@ class K extends r.Component {
         rounded: null,
         role: "button",
         "aria-label": s,
-        onClick: (a) => this.handlePageChange(a, e)
+        onClick: (a) => this.handlePageChange(a, e),
+        tabIndex: this.props.navigatable ? -1 : void 0
       },
-      c
+      v
     );
   }
   renderOptionDots(e) {
-    return /* @__PURE__ */ r.createElement("option", { value: e }, c);
+    return /* @__PURE__ */ n.createElement("option", { value: e }, v);
   }
 }
 export {
-  K as PagerNumericButtons
+  I as PagerNumericButtons
 };

package/pager/PagerPageSizes.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),o=require("@progress/kendo-react-intl"),a=require("../messages/index.js"),m=require("@progress/kendo-react-dropdowns");function f(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,r.get?r:{enumerable:!0,get:()=>t[s]})}}return e.default=t,Object.freeze(e)}const n=f(d);class l extends n.Component{constructor(){super(...arguments),this.pageSizeChange=e=>{this.props.pageChange&&this.props.pageChange({skip:0,take:parseInt(e.target.value,10)},e)}}render(){const{value:e,pageSizes:s,pageSize:r,messagesMap:i}=this.props,g=s.slice();e===void 0&&g.filter(u=>u===r).length===0&&g.unshift(r);const c=i?i(a.pagerItemPerPage):{messageKey:a.pagerItemPerPage,defaultMessage:a.messages[a.pagerItemPerPage]},p=i?i(a.pagerPageSizeAriaLabel):{messageKey:a.pagerPageSizeAriaLabel,defaultMessage:a.messages[a.pagerPageSizeAriaLabel]};return n.createElement("span",{className:"k-pager-sizes"},n.createElement(m.DropDownList,{value:e!==void 0?e:r,data:g,onChange:this.pageSizeChange,ariaLabel:o.provideLocalizationService(this).toLanguageString(p.messageKey,p.defaultMessage),size:this.props.size}),n.createElement("span",null,o.provideLocalizationService(this).toLanguageString(c.messageKey,c.defaultMessage)))}}o.registerForLocalization(l);exports.PagerPageSizes=l;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),o=require("@progress/kendo-react-intl"),a=require("../messages/index.js"),P=require("@progress/kendo-react-dropdowns");function S(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const r=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,r.get?r:{enumerable:!0,get:()=>t[s]})}}return e.default=t,Object.freeze(e)}const n=S(f);class p extends n.Component{constructor(){super(...arguments),this.pageSizeChange=e=>{this.props.pageChange&&this.props.pageChange({skip:0,take:parseInt(e.target.value,10)},e)}}render(){const{value:e,pageSizes:s,pageSize:r,messagesMap:i,size:u,navigatable:d}=this.props,g=s.slice();e===void 0&&g.filter(m=>m===r).length===0&&g.unshift(r);const c=i?i(a.pagerItemPerPage):{messageKey:a.pagerItemPerPage,defaultMessage:a.messages[a.pagerItemPerPage]},l=i?i(a.pagerPageSizeAriaLabel):{messageKey:a.pagerPageSizeAriaLabel,defaultMessage:a.messages[a.pagerPageSizeAriaLabel]};return n.createElement("span",{className:"k-pager-sizes"},n.createElement(P.DropDownList,{value:e!==void 0?e:r,data:g,onChange:this.pageSizeChange,ariaLabel:o.provideLocalizationService(this).toLanguageString(l.messageKey,l.defaultMessage),size:u,tabIndex:d?-1:void 0}),n.createElement("span",null,o.provideLocalizationService(this).toLanguageString(c.messageKey,c.defaultMessage)))}}o.registerForLocalization(p);exports.PagerPageSizes=p;

package/pager/PagerPageSizes.mjs

@@ -7,32 +7,33 @@
  */
 "use client";
 import * as s from "react";
-import { provideLocalizationService as p, registerForLocalization as u } from "@progress/kendo-react-intl";
-import { pagerItemPerPage as r, messages as l, pagerPageSizeAriaLabel as g } from "../messages/index.mjs";
-import { DropDownList as h } from "@progress/kendo-react-dropdowns";
-class f extends s.Component {
+import { provideLocalizationService as p, registerForLocalization as d } from "@progress/kendo-react-intl";
+import { pagerItemPerPage as g, messages as l, pagerPageSizeAriaLabel as r } from "../messages/index.mjs";
+import { DropDownList as f } from "@progress/kendo-react-dropdowns";
+class z extends s.Component {
   constructor() {
     super(...arguments), this.pageSizeChange = (e) => {
       this.props.pageChange && this.props.pageChange({ skip: 0, take: parseInt(e.target.value, 10) }, e);
     };
   }
   render() {
-    const { value: e, pageSizes: m, pageSize: t, messagesMap: a } = this.props, i = m.slice();
-    e === void 0 && i.filter((c) => c === t).length === 0 && i.unshift(t);
-    const n = a ? a(r) : { messageKey: r, defaultMessage: l[r] }, o = a ? a(g) : { messageKey: g, defaultMessage: l[g] };
+    const { value: e, pageSizes: m, pageSize: t, messagesMap: a, size: c, navigatable: u } = this.props, i = m.slice();
+    e === void 0 && i.filter((h) => h === t).length === 0 && i.unshift(t);
+    const n = a ? a(g) : { messageKey: g, defaultMessage: l[g] }, o = a ? a(r) : { messageKey: r, defaultMessage: l[r] };
     return /* @__PURE__ */ s.createElement("span", { className: "k-pager-sizes" }, /* @__PURE__ */ s.createElement(
-      h,
+      f,
       {
         value: e !== void 0 ? e : t,
         data: i,
         onChange: this.pageSizeChange,
         ariaLabel: p(this).toLanguageString(o.messageKey, o.defaultMessage),
-        size: this.props.size
+        size: c,
+        tabIndex: u ? -1 : void 0
       }
     ), /* @__PURE__ */ s.createElement("span", null, p(this).toLanguageString(n.messageKey, n.defaultMessage)));
   }
 }
-u(f);
+d(z);
 export {
-  f as PagerPageSizes
+  z as PagerPageSizes
 };