@progress/kendo-react-data-tools 9.0.0-develop.3 → 9.0.0-develop.4

package/pager/Pager.mjs

@@ -6,252 +6,230 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as h from "react";
-import a from "prop-types";
-import { PagerNumericButtons as ie } from "./PagerNumericButtons.mjs";
-import { PagerInput as re } from "./PagerInput.mjs";
-import { PagerPageSizes as oe } from "./PagerPageSizes.mjs";
-import { Button as ne } from "@progress/kendo-react-buttons";
-import { pagerFirstPage as b, messages as l, pagerPreviousPage as k, pagerNextPage as S, pagerLastPage as K, pagerInfo as E, pagerAriaKeyshortcuts as z, pagerPage as w, pagerOf as C, pagerTotalPages as R } from "../messages/index.mjs";
-import { provideLocalizationService as ge, provideIntlService as le, registerForIntl as he, registerForLocalization as pe } from "@progress/kendo-react-intl";
-import { Keys as n, focusFirstFocusableChild as ue, enableNavigatableContainer as ce, disableNavigatableContainer as me, keepFocusInContainer as de, TABBABLE_ELEMENTS as fe, validatePackage as Pe, classNames as V, kendoThemeMaps as Me } from "@progress/kendo-react-common";
-import { caretAltToRightIcon as U, caretAltToLeftIcon as j, caretAltRightIcon as G, caretAltLeftIcon as H } from "@progress/kendo-svg-icons";
-import { packageMetadata as ve } from "../package-metadata.mjs";
-const J = 600, ye = 768, M = class M extends h.Component {
-  constructor(p) {
-    super(p), this._element = null, this.onPageChange = (t, e) => {
-      const i = {
-        target: this,
-        syntheticEvent: e.syntheticEvent,
-        nativeEvent: e.nativeEvent,
-        targetEvent: e,
-        ...t
-      };
-      this.props.onPageChange && this.props.onPageChange.call(void 0, i);
-    }, this.changePage = (t, e) => {
-      this.props.onPageChange && t > 0 && t <= this.totalPages && this.props.onPageChange({
-        target: this,
-        skip: (t - 1) * this.props.take,
-        take: this.props.take,
-        syntheticEvent: e,
-        nativeEvent: e.nativeEvent,
-        targetEvent: e
-      });
-    }, this.onWindowResize = () => {
-      const t = this.element;
-      if (!t || !this.props.responsive)
-        return;
-      const e = t.offsetWidth;
-      e < J ? this.setState({ showPagerSizes: !1 }) : e >= J && e < ye ? this.setState({ showPagerInfo: !1, showPagerSizes: !0 }) : this.setState({ showPagerInfo: !0, showPagerSizes: !0 });
-    }, this.onKeyDown = (t) => {
-      const e = this.element, i = t.keyCode;
-      !e || !this.props.navigatable || ((i === n.home || t.metaKey && i === n.left) && this.changePage(1, t), (i === n.end || t.metaKey && i === n.right) && this.changePage(this.totalPages, t), document.activeElement === e ? (i === n.enter && (ue(e), ce(e)), (i === n.left || i === n.up) && this.changePage(this.currentPage - 1, t), (i === n.right || i === n.down) && this.changePage(this.currentPage + 1, t)) : (i === n.esc && (e.focus(), me(e)), de(t, e, fe)));
-    }, Pe(ve), 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.
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    window.addEventListener("resize", this.onWindowResize), this.onWindowResize();
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.onWindowResize);
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { showPagerSizes: p, showPagerInfo: t } = this.state, {
-      skip: e,
-      take: i,
-      total: u,
-      pageSizes: m,
-      size: g,
-      responsive: v,
-      messagesMap: s,
-      dir: Q,
-      style: X,
-      pageSizeValue: Y,
-      previousNext: Z,
-      className: ee,
-      navigatable: d,
-      disabled: c
-    } = this.props, o = ge(this), y = le(this), r = this.currentPage, te = this.props.type === "numeric" ? /* @__PURE__ */ h.createElement(
-      ie,
-      {
-        type: v && !p ? "dropdown" : "numbers",
-        buttonCount: this.props.buttonCount || 0,
-        totalPages: this.totalPages,
-        currentPage: this.currentPage,
-        pageChange: this.changePage,
-        messagesMap: this.props.messagesMap,
-        size: g,
-        navigatable: d
-      }
-    ) : /* @__PURE__ */ h.createElement(
-      re,
-      {
-        buttonCount: this.props.buttonCount || 0,
-        totalPages: this.totalPages,
-        currentPage: r,
-        pageChange: this.changePage,
-        messagesMap: s,
-        size: g,
-        navigatable: d
-      }
-    ), L = s ? s(b) : { messageKey: b, defaultMessage: l[b] }, I = s ? s(k) : { messageKey: k, defaultMessage: l[k] }, N = s ? s(S) : { messageKey: S, defaultMessage: l[S] }, 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] }, O = s ? s(C) : { messageKey: C, defaultMessage: l[C] }, f = s ? s(R) : { messageKey: R, defaultMessage: l[R] }, se = `${o.toLanguageString(
-      x.messageKey,
-      x.defaultMessage
-    )} ${y.format(
-      o.toLanguageString(f.messageKey, f.defaultMessage),
-      [r]
-    )} ${o.toLanguageString(O.messageKey, O.defaultMessage)} ${y.format(
-      o.toLanguageString(f.messageKey, f.defaultMessage),
-      [this.totalPages]
-    )}`;
-    let D, F, W, _;
-    Z && (D = this.renderButton(
-      1,
-      "k-pager-nav k-pager-first" + (r === 1 && !c ? " k-disabled" : ""),
-      o.toLanguageString(L.messageKey, L.defaultMessage),
-      this.isRtl ? "caret-alt-to-right" : "caret-alt-to-left",
-      this.isRtl ? U : j,
-      r === 1 ? !0 : void 0
-    ), F = this.renderButton(
-      r - 1,
-      "k-pager-nav" + (r === 1 && !c ? " k-disabled" : ""),
-      o.toLanguageString(
-        I.messageKey,
-        I.defaultMessage
-      ),
-      this.isRtl ? "caret-alt-right" : "caret-alt-left",
-      this.isRtl ? G : H,
-      r === 1 ? !0 : void 0
-    ), W = this.renderButton(
-      r + 1,
-      "k-pager-nav" + (r >= this.totalPages && !c ? " k-disabled" : ""),
-      o.toLanguageString(N.messageKey, N.defaultMessage),
-      this.isRtl ? "caret-alt-left" : "caret-alt-right",
-      this.isRtl ? H : G,
-      r >= this.totalPages ? !0 : void 0
-    ), _ = this.renderButton(
-      this.totalPages,
-      "k-pager-nav k-pager-last" + (r >= this.totalPages && !c ? " k-disabled" : ""),
-      o.toLanguageString(A.messageKey, A.defaultMessage),
-      this.isRtl ? "caret-alt-to-left" : "caret-alt-to-right",
-      this.isRtl ? j : U,
-      r >= this.totalPages ? !0 : void 0
-    ));
-    const $ = m && /* @__PURE__ */ h.createElement(
-      oe,
-      {
-        pageChange: this.onPageChange,
-        pageSize: i,
-        pageSizes: m,
-        value: Y,
-        messagesMap: s,
-        size: g,
-        navigatable: d
-      }
-    ), q = this.props.info && /* @__PURE__ */ h.createElement("span", { className: "k-pager-info" }, y.format(
-      o.toLanguageString(B.messageKey, B.defaultMessage),
-      [Math.min(e + 1, u), Math.min(e + i, u), u]
-    ));
-    return /* @__PURE__ */ h.createElement(
-      "div",
-      {
-        className: V(
-          "k-pager",
-          {
-            [`k-pager-${Me.sizeMap[g] || g}`]: g,
-            "k-disabled": c
-          },
-          ee
-        ),
-        style: X,
-        role: "application",
-        "aria-roledescription": "pager",
-        dir: Q,
-        "aria-keyshortcuts": o.toLanguageString(
-          T.messageKey,
-          T.defaultMessage
-        ),
-        "aria-label": se,
-        ref: (ae) => this._element = ae,
-        tabIndex: d ? 0 : void 0,
-        onKeyDown: this.onKeyDown
+import * as n from "react";
+import s from "prop-types";
+import { PagerNumericButtons as ke } from "./PagerNumericButtons.mjs";
+import { PagerInput as ze } from "./PagerInput.mjs";
+import { PagerPageSizes as De } from "./PagerPageSizes.mjs";
+import { Button as Le } from "@progress/kendo-react-buttons";
+import { pagerFirstPage as we, pagerPreviousPage as Ke, pagerNextPage as xe, pagerLastPage as Be, pagerInfo as Oe, pagerAriaKeyshortcuts as Te, pagerPage as qe, pagerOf as Ae, pagerTotalPages as _e } from "../messages/index.mjs";
+import { useLocalization as Fe, useInternationalization as $e } from "@progress/kendo-react-intl";
+import { validatePackage as Ve, classNames as J, kendoThemeMaps as Ge, Keys as l, focusFirstFocusableChild as He, enableNavigatableContainer as We, disableNavigatableContainer as je, keepFocusInContainer as Ue, TABBABLE_ELEMENTS as Je } from "@progress/kendo-react-common";
+import { packageMetadata as Qe } from "../package-metadata.mjs";
+import { getL10NMessage as u, translateMessage as S, getFirstButtonProps as Xe, getPrevButtonProps as Ye, getNextButtonProps as Ze, getLastButtonProps as et } from "./utils.mjs";
+const Q = 600, tt = 768, X = n.forwardRef((g, Y) => {
+  Ve(Qe);
+  const {
+    buttonCount: x = P.buttonCount,
+    info: Z = P.info,
+    type: ee = P.type,
+    size: d = P.size,
+    disabled: b = P.disabled,
+    total: C,
+    skip: N,
+    take: v,
+    className: te,
+    style: se,
+    pageSizes: B,
+    pageSizeValue: ae,
+    previousNext: ne,
+    responsive: M,
+    messagesMap: r,
+    dir: O,
+    navigatable: m
+  } = g, i = Fe(), k = $e(), p = n.useRef({ element: null, props: g }), h = n.useRef(null);
+  n.useImperativeHandle(
+    p,
+    () => ({
+      get element() {
+        return re();
       },
-      /* @__PURE__ */ h.createElement("div", { className: V("k-pager-numbers-wrap") }, D, F, te, W, _),
-      v ? p && $ : $,
-      v ? t && q : q
-    );
-  }
-  renderButton(p, t, e, i, u, m) {
-    return /* @__PURE__ */ h.createElement(
-      ne,
-      {
-        fillMode: "flat",
-        themeColor: "base",
-        size: this.props.size,
-        rounded: null,
-        className: t,
-        icon: i,
-        svgIcon: u,
-        title: e,
-        role: "button",
-        "aria-disabled": m,
-        tabIndex: this.props.navigatable ? -1 : void 0,
-        onClick: (g) => {
-          g.preventDefault(), this.changePage(p, g);
-        }
+      props: g
+    })
+  ), n.useImperativeHandle(Y, () => p.current);
+  const re = () => h.current, [T, z] = n.useState(!0), [oe, q] = n.useState(!0);
+  n.useEffect(() => (window.addEventListener("resize", D), D(), () => {
+    window.removeEventListener("resize", D);
+  }), []);
+  const y = O === "rtl", o = Math.floor(N / v) + 1, c = Math.ceil((C || 0) / v), f = (t, e) => {
+    g.onPageChange && t > 0 && t <= c && g.onPageChange({
+      target: p.current,
+      skip: (t - 1) * g.take,
+      take: g.take,
+      syntheticEvent: e,
+      nativeEvent: e.nativeEvent,
+      targetEvent: e
+    });
+  }, ie = (t) => {
+    const e = h.current, a = t.keyCode;
+    !e || !m || ((a === l.home || t.metaKey && a === l.left) && f(1, t), (a === l.end || t.metaKey && a === l.right) && f(c, t), document.activeElement === e ? (a === l.enter && (He(e), We(e)), (a === l.left || a === l.up) && f(o - 1, t), (a === l.right || a === l.down) && f(o + 1, t)) : (a === l.esc && (e.focus(), je(e)), Ue(t, e, Je)));
+  }, D = () => {
+    const t = h.current;
+    if (!t || !M)
+      return;
+    const e = t.offsetWidth;
+    e < Q ? z(!1) : e >= Q && e < tt ? (q(!1), z(!0)) : (q(!0), z(!0));
+  }, le = (t, e) => {
+    const a = {
+      target: p == null ? void 0 : p.current,
+      syntheticEvent: e.syntheticEvent,
+      nativeEvent: e.nativeEvent,
+      targetEvent: e,
+      ...t
+    };
+    g.onPageChange && g.onPageChange(a);
+  }, ge = u(we, r), ue = u(Ke, r), ce = u(xe, r), de = u(Be, r), A = u(Oe, r), _ = u(Te, r), F = u(qe, r), $ = u(Ae, r), E = u(_e, r), fe = `${i.toLanguageString(
+    F.messageKey,
+    F.defaultMessage
+  )} ${k.format(i.toLanguageString(E.messageKey, E.defaultMessage), [
+    o
+  ])} ${i.toLanguageString($.messageKey, $.defaultMessage)} ${k.format(
+    i.toLanguageString(E.messageKey, E.defaultMessage),
+    [c]
+  )}`, I = (t, e, a, L, w, K) => /* @__PURE__ */ n.createElement(
+    Le,
+    {
+      fillMode: "flat",
+      themeColor: "base",
+      size: d,
+      rounded: null,
+      className: e,
+      icon: L,
+      svgIcon: w,
+      title: a,
+      role: "button",
+      "aria-disabled": K,
+      tabIndex: m ? -1 : void 0,
+      onClick: (R) => {
+        R.preventDefault(), f(t, R);
       }
-    );
-  }
-  get totalPages() {
-    return Math.ceil((this.props.total || 0) / this.props.take);
+    }
+  ), V = B && /* @__PURE__ */ n.createElement(
+    De,
+    {
+      pageChange: le,
+      pageSize: v,
+      pageSizes: B,
+      value: ae,
+      messagesMap: r,
+      size: d,
+      navigatable: m
+    }
+  ), G = Z && /* @__PURE__ */ n.createElement("span", { className: "k-pager-info" }, k.format(i.toLanguageString(A.messageKey, A.defaultMessage), [
+    Math.min(N + 1, C),
+    Math.min(N + v, C),
+    C
+  ])), me = ee === "numeric" ? /* @__PURE__ */ n.createElement(
+    ke,
+    {
+      type: M && !T ? "dropdown" : "numbers",
+      buttonCount: x || 0,
+      totalPages: c,
+      currentPage: o,
+      pageChange: f,
+      messagesMap: r,
+      size: d,
+      navigatable: m
+    }
+  ) : /* @__PURE__ */ n.createElement(
+    ze,
+    {
+      buttonCount: x || 0,
+      totalPages: c,
+      currentPage: o,
+      pageChange: f,
+      messagesMap: r,
+      size: d,
+      navigatable: m
+    }
+  );
+  let H, W, j, U;
+  if (ne) {
+    const t = S(i, ge), {
+      rtlClass: e,
+      rtlIcon: a,
+      isDisabledClass: L,
+      isDisabled: w
+    } = Xe(y, o, b);
+    H = I(1, L, t, e, a, w);
+    const K = S(i, ue), {
+      rtlClass: R,
+      rtlIcon: pe,
+      isDisabledClass: be,
+      isDisabled: Pe
+    } = Ye(y, o, b);
+    W = I(o - 1, be, K, R, pe, Pe);
+    const Ce = S(i, ce), {
+      rtlClass: ve,
+      rtlIcon: Me,
+      isDisabledClass: he,
+      isDisabled: ye
+    } = Ze(y, o, c, b);
+    j = I(o + 1, he, Ce, ve, Me, ye);
+    const Ee = S(i, de), {
+      rtlClass: Ie,
+      rtlIcon: Re,
+      isDisabledClass: Se,
+      isDisabled: Ne
+    } = et(y, o, c, b);
+    U = I(c, Se, Ee, Ie, Re, Ne);
   }
-};
-M.propTypes = {
-  className: a.string,
-  style: a.object,
-  total: a.number.isRequired,
-  skip: a.number.isRequired,
-  take: a.number.isRequired,
-  buttonCount: a.number,
-  info: a.bool,
-  type: a.oneOf(["numeric", "input"]),
-  pageSizes: a.arrayOf(a.oneOfType([a.string, a.number])),
-  previousNext: a.bool,
-  onPageChange: a.func,
-  messagesMap: a.func,
-  size: a.oneOf([null, "small", "medium", "large"]),
-  dir: a.string,
-  disabled: a.bool
-}, M.defaultProps = {
+  return /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      ref: h,
+      className: J(
+        "k-pager",
+        {
+          [`k-pager-${Ge.sizeMap[d] || d}`]: d,
+          "k-disabled": b
+        },
+        te
+      ),
+      style: se,
+      role: "application",
+      "aria-roledescription": "pager",
+      dir: O,
+      "aria-keyshortcuts": i.toLanguageString(
+        _.messageKey,
+        _.defaultMessage
+      ),
+      "aria-label": fe,
+      tabIndex: m ? 0 : void 0,
+      onKeyDown: ie
+    },
+    /* @__PURE__ */ n.createElement("div", { className: J("k-pager-numbers-wrap") }, H, W, me, j, U),
+    M ? T && V : V,
+    M ? oe && G : G
+  );
+}), P = {
   buttonCount: 10,
   info: !0,
   type: "numeric",
   size: "medium",
   disabled: !1
 };
-let P = M;
-he(P);
-pe(P);
+X.displayName = "Pager";
+X.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.oneOfType([
+    s.arrayOf(s.number.isRequired),
+    s.arrayOf(s.oneOfType([s.number.isRequired, s.string.isRequired]).isRequired)
+  ]),
+  previousNext: s.bool,
+  onPageChange: s.func,
+  messagesMap: s.func,
+  size: s.oneOf([null, "small", "medium", "large"]),
+  dir: s.string,
+  disabled: s.bool
+};
 export {
-  P as Pager
+  X 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),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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),u=require("@progress/kendo-react-intl"),c=require("../messages/index.js"),d=require("@progress/kendo-react-inputs"),a=require("./utils.js");function P(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const g=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,g.get?g:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const s=P(f),p=e=>{const[n,t]=s.useState(e.currentPage),g=l=>{t(l.target.value),l.target.value&&e.pageChange(l.target.value,l)},o=u.useInternationalization(),r=u.useLocalization(),i=a.getL10NMessage(c.pagerPage,e.messagesMap),m=a.getL10NMessage(c.pagerOf,e.messagesMap),M=a.getL10NMessage(c.pagerTotalPages,e.messagesMap),b=a.getL10NMessage(c.pagerPageNumberLabel,e.messagesMap);return s.createElement("span",{className:"k-pager-input"},s.createElement("span",null,a.translateMessage(r,i)),s.createElement(d.NumericTextBox,{value:e.currentPage!==void 0?e.currentPage:n,onChange:g,min:1,spinners:!1,ariaLabel:a.translateMessage(r,b),tabIndex:e.navigatable?-1:void 0}),s.createElement("span",null,`${a.translateMessage(r,m)} ${o.format(a.translateMessage(r,M),[e.totalPages])}`))};exports.PagerInput=p;

package/pager/PagerInput.mjs

@@ -6,44 +6,30 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-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 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);
-    };
-  }
-  render() {
-    const e = u(this), a = c(this), n = this.props.messagesMap ? this.props.messagesMap(r) : { messageKey: r, defaultMessage: t[r] }, o = this.props.messagesMap ? this.props.messagesMap(p) : { messageKey: p, defaultMessage: t[p] }, i = this.props.messagesMap ? this.props.messagesMap(g) : { messageKey: g, defaultMessage: t[g] }, l = this.props.messagesMap ? this.props.messagesMap(g) : { messageKey: m, defaultMessage: t[m] };
-    return /* @__PURE__ */ s.createElement("span", { className: "k-pager-input" }, /* @__PURE__ */ s.createElement("span", null, a.toLanguageString(n.messageKey, n.defaultMessage)), /* @__PURE__ */ s.createElement(
-      M,
-      {
-        value: this.props.currentPage !== void 0 ? this.props.currentPage : this.state.page,
-        onChange: this.handleOnChange,
-        min: 1,
-        spinners: !1,
-        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(d);
+import * as a from "react";
+import { useInternationalization as M, useLocalization as P } from "@progress/kendo-react-intl";
+import { pagerPage as b, pagerOf as p, pagerTotalPages as v, pagerPageNumberLabel as L } from "../messages/index.mjs";
+import { NumericTextBox as N } from "@progress/kendo-react-inputs";
+import { getL10NMessage as s, translateMessage as g } from "./utils.mjs";
+const z = (e) => {
+  const [r, l] = a.useState(e.currentPage), o = (n) => {
+    l(n.target.value), n.target.value && e.pageChange(n.target.value, n);
+  }, m = M(), t = P(), i = s(b, e.messagesMap), c = s(p, e.messagesMap), u = s(v, e.messagesMap), f = s(L, e.messagesMap);
+  return /* @__PURE__ */ a.createElement("span", { className: "k-pager-input" }, /* @__PURE__ */ a.createElement("span", null, g(t, i)), /* @__PURE__ */ a.createElement(
+    N,
+    {
+      value: e.currentPage !== void 0 ? e.currentPage : r,
+      onChange: o,
+      min: 1,
+      spinners: !1,
+      ariaLabel: g(t, f),
+      tabIndex: e.navigatable ? -1 : void 0
+    }
+  ), /* @__PURE__ */ a.createElement("span", null, `${g(t, c)} ${m.format(
+    g(t, u),
+    [e.totalPages]
+  )}`));
+};
 export {
-  d as PagerInput
+  z 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 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),k=this.start>1&&this.renderDots(this.start-1,h),y=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:"inline-flex"},className:c.classNames("k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-solid",{[`k-picker-${c.kendoThemeMaps.sizeMap[a]||a}`]:a,"k-hidden":g!=="dropdown"}),"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"}},k,C,y))}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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),m=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-buttons"),b=require("../messages/index.js"),R=require("@progress/kendo-react-intl"),c=require("./utils.js");function I(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(s,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return s.default=t,Object.freeze(s)}const o=I(z),P="...",T=t=>{const s=R.useLocalization(),{messagesMap:n,size:a,totalPages:p,type:k,navigatable:M}=t,N=c.getL10NMessage(b.pagerMobileSelect,n),D=c.getL10NMessage(b.pagerPage,n),O=c.getL10NMessage(b.pagerMoreButtonLabel,n),f=c.translateMessage(s,O),h=(e,u)=>{e.preventDefault(),t.pageChange(u,e)},L=e=>{e.preventDefault(),t.pageChange(e.target.value,e)},v=(e,u)=>o.createElement(C.Button,{fillMode:"flat",themeColor:"primary",size:a,rounded:null,role:"button","aria-label":u,onClick:w=>h(w,e),tabIndex:M?-1:void 0},P),y=e=>o.createElement("option",{value:e},P);let r=1;const l=t.currentPage,d=t.buttonCount;if(l>d){const e=l%d;r=e===0?l-d+1:l-e+1}const i=Math.min(r+t.buttonCount-1,t.totalPages),B=r>1&&v(r-1,f),E=i<p&&v(i+1,f),S=r>1&&y(r-1),q=i<p&&y(i+1),g=[];for(let e=r;e<=i;e++)g.push(e);const x=g.map(e=>o.createElement(C.Button,{className:m.classNames({"k-selected":l===e}),key:e,fillMode:"flat",themeColor:"primary",size:a,rounded:null,role:"button","aria-label":c.translateMessage(s,D)+" "+e,"aria-current":l===e?!0:void 0,onClick:u=>h(u,e),tabIndex:M?-1:void 0},e)),j=g.map(e=>o.createElement("option",{key:e},e));return o.createElement(o.Fragment,null,o.createElement("select",{style:{width:"5em",margin:"0px 1em",display:"inline-flex"},className:m.classNames("k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-solid",{[`k-picker-${m.kendoThemeMaps.sizeMap[a]||a}`]:a,"k-hidden":k!=="dropdown"}),"aria-label":c.translateMessage(s,N),value:l,onChange:e=>L(e)},S,j,q),o.createElement("div",{className:"k-pager-numbers",style:{display:k==="numbers"?"":"none"}},B,x,E))};exports.PagerNumericButtons=T;