@progress/kendo-react-data-tools 11.0.0-develop.2 → 11.0.0-develop.20

package/pager/Pager.mjs

@@ -7,227 +7,262 @@
  */
 "use client";
 import * as n from "react";
-import s from "prop-types";
-import { PagerNumericButtons as ze } from "./PagerNumericButtons.mjs";
-import { PagerInput as De } from "./PagerInput.mjs";
-import { PagerPageSizes as ke } 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 { classNames as J, kendoThemeMaps as Ve, Keys as l, focusFirstFocusableChild as Ge, enableNavigatableContainer as He, disableNavigatableContainer as We, keepFocusInContainer as je, TABBABLE_ELEMENTS as Ue } from "@progress/kendo-react-common";
-import { getL10NMessage as u, translateMessage as S, getFirstButtonProps as Je, getPrevButtonProps as Qe, getNextButtonProps as Xe, getLastButtonProps as Ye } from "./utils.mjs";
-const Q = 600, Ze = 768, X = n.forwardRef((g, Y) => {
+import a from "prop-types";
+import { PagerNumericButtons as Le } from "./PagerNumericButtons.mjs";
+import { PagerInput as Be } from "./PagerInput.mjs";
+import { PagerPageSizes as Oe } from "./PagerPageSizes.mjs";
+import { Button as We } from "@progress/kendo-react-buttons";
+import { pagerFirstPage as qe, pagerPreviousPage as Ae, pagerNextPage as Fe, pagerLastPage as $e, pagerInfo as He, pagerAriaKeyshortcuts as _e, pagerPage as je, pagerOf as Ge, pagerTotalPages as Ue } from "../messages/index.mjs";
+import { useLocalization as Ve, useInternationalization as Je } from "@progress/kendo-react-intl";
+import { classNames as Z, kendoThemeMaps as Qe, Keys as c, focusFirstFocusableChild as Xe, enableNavigatableContainer as Ye, disableNavigatableContainer as Ze, keepFocusInContainer as et, TABBABLE_ELEMENTS as tt } from "@progress/kendo-react-common";
+import { getL10NMessage as f, translateMessage as T, getFirstButtonProps as st, getPrevButtonProps as at, getNextButtonProps as nt, getLastButtonProps as rt } from "./utils.mjs";
+const ee = n.forwardRef((u, te) => {
   const {
-    buttonCount: x = P.buttonCount,
-    info: Z = P.info,
-    type: ee = P.type,
-    size: f = 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(), z = $e(), p = n.useRef({ element: null, props: g }), h = n.useRef(null);
+    buttonCount: B = R.buttonCount,
+    info: se = R.info,
+    type: ae = R.type,
+    size: p = R.size,
+    disabled: C = R.disabled,
+    total: E,
+    skip: x,
+    take: k,
+    className: ne,
+    style: re,
+    pageSizes: O,
+    pageSizeValue: oe,
+    previousNext: ie,
+    responsive: w = R.responsive,
+    messagesMap: o,
+    dir: W,
+    navigatable: h,
+    adaptive: le,
+    adaptiveTitle: ce
+  } = u, l = Ve(), K = Je(), v = n.useRef({ element: null, props: u }), P = n.useRef(null), L = n.useRef(0), q = n.useRef(null), A = n.useRef(null), F = n.useRef(null), $ = n.useRef(null), H = n.useRef(null), ue = n.useRef(null), d = n.useRef([
+    q,
+    A,
+    F,
+    $,
+    H
+  ]), z = n.useRef([]), [ot, ge] = n.useReducer((e) => e + 1, 0);
   n.useImperativeHandle(
-    p,
+    v,
     () => ({
       get element() {
-        return re();
+        return fe();
       },
-      props: g
+      props: u
     })
-  ), n.useImperativeHandle(Y, () => p.current);
-  const re = () => h.current, [T, D] = n.useState(!0), [oe, q] = n.useState(!0);
-  n.useEffect(() => (window.addEventListener("resize", k), k(), () => {
-    window.removeEventListener("resize", k);
-  }), []);
-  const y = O === "rtl", o = Math.floor(N / v) + 1, c = Math.ceil((C || 0) / v), d = (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
+  ), n.useImperativeHandle(te, () => v.current);
+  const fe = () => P.current;
+  n.useEffect(() => {
+    const e = P.current;
+    if (!e)
+      return;
+    _();
+    const t = window.ResizeObserver, s = t && new t(_);
+    return s && s.observe(e), () => {
+      s && s.disconnect();
+    };
+  }, []);
+  const N = W === "rtl", i = Math.floor(x / k) + 1, m = Math.ceil((E || 0) / k), b = (e, t) => {
+    u.onPageChange && e > 0 && e <= m && u.onPageChange({
+      target: v.current,
+      skip: (e - 1) * u.take,
+      take: u.take,
+      syntheticEvent: t,
+      nativeEvent: t.nativeEvent,
+      targetEvent: t
     });
-  }, ie = (t) => {
-    const e = h.current, a = t.keyCode;
-    !e || !m || ((a === l.home || t.metaKey && a === l.left) && d(1, t), (a === l.end || t.metaKey && a === l.right) && d(c, t), document.activeElement === e ? (a === l.enter && (Ge(e), He(e)), (a === l.left || a === l.up) && d(o - 1, t), (a === l.right || a === l.down) && d(o + 1, t)) : (a === l.esc && (e.focus(), We(e)), je(t, e, Ue)));
-  }, k = () => {
-    const t = h.current;
-    if (!t || !M)
+  }, de = (e) => {
+    const t = P.current, s = e.keyCode;
+    !t || !h || ((s === c.home || e.metaKey && s === c.left) && b(1, e), (s === c.end || e.metaKey && s === c.right) && b(m, e), document.activeElement === t ? (s === c.enter && (Xe(t), Ye(t)), (s === c.left || s === c.up) && b(i - 1, e), (s === c.right || s === c.down) && b(i + 1, e)) : (s === c.esc && (t.focus(), Ze(t)), et(e, t, tt)));
+  }, _ = () => {
+    const e = P.current;
+    if (!e)
       return;
-    const e = t.offsetWidth;
-    e < Q ? D(!1) : e >= Q && e < Ze ? (q(!1), D(!0)) : (q(!0), D(!0));
-  }, le = (t, e) => {
-    const a = {
-      target: p == null ? void 0 : p.current,
-      syntheticEvent: e.syntheticEvent,
-      nativeEvent: e.nativeEvent,
-      targetEvent: e,
-      ...t
+    let t = 0;
+    const s = e.clientWidth || 0, y = parseInt(window.getComputedStyle(e).gap || "0", 10), M = Array.from(e.children).reduce((r, g) => (r += Math.ceil(g.clientWidth || 0), r), 0), I = Array.from(e.children).length;
+    if (t = M + (I - 1) * y, w && t > s) {
+      const r = [...d.current], g = r.shift();
+      L.current = t, d.current = r, g && (z.current = [g, ...z.current]);
+    } else if (w && s > L.current) {
+      const r = [...z.current], g = r.shift();
+      z.current = r, g && (d.current = [...d.current, g]), L.current = t;
+    }
+    ge();
+  }, me = (e, t) => {
+    const s = {
+      target: v == null ? void 0 : v.current,
+      syntheticEvent: t.syntheticEvent,
+      nativeEvent: t.nativeEvent,
+      targetEvent: t,
+      ...e
     };
-    g.onPageChange && g.onPageChange(a);
-  }, ge = u(we, r), ue = u(Ke, r), ce = u(xe, r), fe = u(Be, r), A = u(Oe, r), _ = u(Te, r), F = u(qe, r), $ = u(Ae, r), E = u(_e, r), de = `${i.toLanguageString(
-    F.messageKey,
-    F.defaultMessage
-  )} ${z.format(i.toLanguageString(E.messageKey, E.defaultMessage), [
-    o
-  ])} ${i.toLanguageString($.messageKey, $.defaultMessage)} ${z.format(
-    i.toLanguageString(E.messageKey, E.defaultMessage),
-    [c]
-  )}`, I = (t, e, a, L, w, K) => /* @__PURE__ */ n.createElement(
-    Le,
+    u.onPageChange && u.onPageChange(s);
+  }, pe = f(qe, o), be = f(Ae, o), he = f(Fe, o), ve = f($e, o), j = f(He, o), G = f(_e, o), U = f(je, o), V = f(Ge, o), D = f(Ue, o), Re = `${l.toLanguageString(
+    U.messageKey,
+    U.defaultMessage
+  )} ${K.format(l.toLanguageString(D.messageKey, D.defaultMessage), [
+    i
+  ])} ${l.toLanguageString(V.messageKey, V.defaultMessage)} ${K.format(
+    l.toLanguageString(D.messageKey, D.defaultMessage),
+    [m]
+  )}`, S = (e, t, s, y, M, I) => /* @__PURE__ */ n.createElement(
+    We,
     {
       fillMode: "flat",
       themeColor: "base",
-      size: f,
+      size: p,
       rounded: null,
-      className: e,
-      icon: L,
-      svgIcon: w,
-      title: a,
+      className: t,
+      icon: y,
+      svgIcon: M,
+      title: s,
       role: "button",
-      "aria-disabled": K,
-      tabIndex: m ? -1 : void 0,
-      onClick: (R) => {
-        R.preventDefault(), d(t, R);
+      "aria-disabled": I,
+      tabIndex: h ? -1 : void 0,
+      onClick: (r) => {
+        r.preventDefault(), b(e, r);
       }
     }
-  ), V = B && /* @__PURE__ */ n.createElement(
-    ke,
+  ), Ce = O && /* @__PURE__ */ n.createElement(
+    Oe,
     {
-      pageChange: le,
-      pageSize: v,
-      pageSizes: B,
-      value: ae,
-      messagesMap: r,
-      size: f,
-      navigatable: m
+      pageChange: me,
+      pageSize: k,
+      pageSizes: O,
+      value: oe,
+      messagesMap: o,
+      size: p,
+      navigatable: h,
+      pagerSizesRef: H,
+      pagerSizesTitleRef: $,
+      visibleElementsRef: d,
+      adaptive: le,
+      adaptiveTitle: ce
     }
-  ), G = Z && /* @__PURE__ */ n.createElement("span", { className: "k-pager-info" }, z.format(i.toLanguageString(A.messageKey, A.defaultMessage), [
-    Math.min(N + 1, C),
-    Math.min(N + v, C),
-    C
-  ])), me = ee === "numeric" ? /* @__PURE__ */ n.createElement(
-    ze,
+  ), Pe = se && d.current.length >= 4 && /* @__PURE__ */ n.createElement("span", { className: "k-pager-info", ref: A }, K.format(l.toLanguageString(j.messageKey, j.defaultMessage), [
+    Math.min(x + 1, E),
+    Math.min(x + k, E),
+    E
+  ])), ye = ae === "numeric" && d.current.length === 5 ? /* @__PURE__ */ n.createElement(
+    Le,
     {
-      type: M && !T ? "dropdown" : "numbers",
-      buttonCount: x || 0,
-      totalPages: c,
-      currentPage: o,
-      pageChange: d,
-      messagesMap: r,
-      size: f,
-      navigatable: m
+      buttonCount: B || 0,
+      totalPages: m,
+      currentPage: i,
+      pageChange: b,
+      messagesMap: o,
+      size: p,
+      navigatable: h,
+      pagerNumericButtonsRef: q
     }
   ) : /* @__PURE__ */ n.createElement(
-    De,
+    Be,
     {
-      buttonCount: x || 0,
-      totalPages: c,
-      currentPage: o,
-      pageChange: d,
-      messagesMap: r,
-      size: f,
-      navigatable: m
+      buttonCount: B || 0,
+      totalPages: m,
+      currentPage: i,
+      pageChange: b,
+      messagesMap: o,
+      size: p,
+      navigatable: h,
+      pagerInputTitleRef: F,
+      visibleElementsRef: d
     }
   );
-  let H, W, j, U;
-  if (ne) {
-    const t = S(i, ge), {
-      rtlClass: e,
-      rtlIcon: a,
-      isDisabledClass: L,
-      isDisabled: w
-    } = Je(y, o, b);
-    H = I(1, L, t, e, a, w);
-    const K = S(i, ue), {
-      rtlClass: R,
-      rtlIcon: pe,
-      isDisabledClass: be,
-      isDisabled: Pe
-    } = Qe(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
-    } = Xe(y, o, c, b);
-    j = I(o + 1, he, Ce, ve, Me, ye);
-    const Ee = S(i, fe), {
-      rtlClass: Ie,
-      rtlIcon: Re,
-      isDisabledClass: Se,
-      isDisabled: Ne
-    } = Ye(y, o, c, b);
-    U = I(c, Se, Ee, Ie, Re, Ne);
+  let J, Q, X, Y;
+  if (ie) {
+    const e = T(l, pe), {
+      rtlClass: t,
+      rtlIcon: s,
+      isDisabledClass: y,
+      isDisabled: M
+    } = st(N, i, C);
+    J = S(1, y, e, t, s, M);
+    const I = T(l, be), {
+      rtlClass: r,
+      rtlIcon: g,
+      isDisabledClass: Me,
+      isDisabled: Ie
+    } = at(N, i, C);
+    Q = S(i - 1, Me, I, r, g, Ie);
+    const Ee = T(l, he), {
+      rtlClass: ke,
+      rtlIcon: ze,
+      isDisabledClass: Ne,
+      isDisabled: De
+    } = nt(N, i, m, C);
+    X = S(i + 1, Ne, Ee, ke, ze, De);
+    const Se = T(l, ve), {
+      rtlClass: Te,
+      rtlIcon: xe,
+      isDisabledClass: we,
+      isDisabled: Ke
+    } = rt(N, i, m, C);
+    Y = S(m, we, Se, Te, xe, Ke);
   }
   return /* @__PURE__ */ n.createElement(
     "div",
     {
-      ref: h,
-      className: J(
+      ref: P,
+      className: Z(
         "k-pager",
         {
-          [`k-pager-${Ve.sizeMap[f] || f}`]: f,
-          "k-disabled": b
+          [`k-pager-${Qe.sizeMap[p] || p}`]: p,
+          "k-pager-responsive": w,
+          "k-disabled": C
         },
-        te
+        ne
       ),
-      style: se,
+      style: re,
       role: "application",
       "aria-roledescription": "pager",
-      dir: O,
-      "aria-keyshortcuts": i.toLanguageString(
-        _.messageKey,
-        _.defaultMessage
+      dir: W,
+      "aria-keyshortcuts": l.toLanguageString(
+        G.messageKey,
+        G.defaultMessage
       ),
-      "aria-label": de,
-      tabIndex: m ? 0 : void 0,
-      onKeyDown: ie
+      "aria-label": Re,
+      tabIndex: h ? 0 : void 0,
+      onKeyDown: de
     },
-    /* @__PURE__ */ n.createElement("div", { className: J("k-pager-numbers-wrap") }, H, W, me, j, U),
-    M ? T && V : V,
-    M ? oe && G : G
+    /* @__PURE__ */ n.createElement("div", { className: Z("k-pager-numbers-wrap"), ref: ue }, J, Q, ye, X, Y),
+    Ce,
+    Pe
   );
-}), P = {
+}), R = {
   buttonCount: 10,
   info: !0,
   type: "numeric",
   size: "medium",
-  disabled: !1
+  disabled: !1,
+  responsive: !0
 };
-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)
+ee.displayName = "Pager";
+ee.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.oneOfType([
+    a.arrayOf(a.number.isRequired),
+    a.arrayOf(a.oneOfType([a.number.isRequired, a.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
+  previousNext: a.bool,
+  onPageChange: a.func,
+  messagesMap: a.func,
+  size: a.oneOf([null, "small", "medium", "large"]),
+  dir: a.string,
+  disabled: a.bool,
+  responsive: a.bool,
+  adaptive: a.bool,
+  adaptiveTitle: a.string
 };
 export {
-  X as Pager
+  ee as Pager
 };

package/pager/PagerInput.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),o=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)},u=o.useInternationalization(),r=o.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)} ${u.format(a.translateMessage(r,M),[e.totalPages])}`))};exports.PagerInput=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=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(b),v=e=>{const[n,t]=s.useState(e.currentPage),g=l=>{t(l.target.value),l.target.value&&e.pageChange(l.target.value,l)},i=u.useInternationalization(),r=u.useLocalization(),o=a.getL10NMessage(c.pagerPage,e.messagesMap),m=a.getL10NMessage(c.pagerOf,e.messagesMap),f=a.getL10NMessage(c.pagerTotalPages,e.messagesMap),M=a.getL10NMessage(c.pagerPageNumberLabel,e.messagesMap);return s.createElement("span",{className:"k-pager-input"},e.visibleElementsRef.current.length>=3&&s.createElement("span",{ref:e.pagerInputTitleRef},a.translateMessage(r,o)),s.createElement(d.NumericTextBox,{value:e.currentPage!==void 0?e.currentPage:n,onChange:g,min:1,spinners:!1,ariaLabel:a.translateMessage(r,M),tabIndex:e.navigatable?-1:void 0}),s.createElement("span",null,`${a.translateMessage(r,m)} ${i.format(a.translateMessage(r,f),[e.totalPages])}`))};exports.PagerInput=v;

package/pager/PagerInput.mjs

@@ -8,18 +8,18 @@
 "use client";
 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 { pagerPage as b, pagerOf as v, pagerTotalPages as h, pagerPageNumberLabel as p } from "../messages/index.mjs";
+import { NumericTextBox as E } 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) => {
+const I = (e) => {
+  const [r, l] = a.useState(e.currentPage), i = (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,
+  }, m = M(), t = P(), o = s(b, e.messagesMap), c = s(v, e.messagesMap), u = s(h, e.messagesMap), f = s(p, e.messagesMap);
+  return /* @__PURE__ */ a.createElement("span", { className: "k-pager-input" }, e.visibleElementsRef.current.length >= 3 && /* @__PURE__ */ a.createElement("span", { ref: e.pagerInputTitleRef }, g(t, o)), /* @__PURE__ */ a.createElement(
+    E,
     {
       value: e.currentPage !== void 0 ? e.currentPage : r,
-      onChange: o,
+      onChange: i,
       min: 1,
       spinners: !1,
       ariaLabel: g(t, f),
@@ -31,5 +31,5 @@ const z = (e) => {
   )}`));
 };
 export {
-  z as PagerInput
+  I as PagerInput
 };

package/pager/PagerNumericButtons.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),D=require("@progress/kendo-react-common"),P=require("@progress/kendo-react-buttons"),C=require("../messages/index.js"),O=require("@progress/kendo-react-intl"),l=require("./utils.js");function R(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const g=R(q),j="...",x=t=>{const o=O.useLocalization(),{messagesMap:n,size:r,totalPages:N,navigatable:d,pagerNumericButtonsRef:k}=t,v=l.getL10NMessage(C.pagerPage,n),p=l.getL10NMessage(C.pagerMoreButtonLabel,n),m=l.translateMessage(o,p),b=(e,c)=>{e.preventDefault(),t.pageChange(c,e)},f=(e,c)=>g.createElement(P.Button,{fillMode:"flat",themeColor:"primary",size:r,rounded:null,role:"button","aria-label":c,onClick:L=>b(L,e),tabIndex:d?-1:void 0},j);let s=1;const a=t.currentPage,u=t.buttonCount;if(a>u){const e=a%u;s=e===0?a-u+1:a-e+1}const i=Math.min(s+t.buttonCount-1,t.totalPages),y=s>1&&f(s-1,m),B=i<N&&f(i+1,m),M=[];for(let e=s;e<=i;e++)M.push(e);const h=M.map(e=>g.createElement(P.Button,{className:D.classNames({"k-selected":a===e}),key:e,fillMode:"flat",themeColor:"primary",size:r,rounded:null,role:"button","aria-label":l.translateMessage(o,v)+" "+e,"aria-current":a===e?!0:void 0,onClick:c=>b(c,e),tabIndex:d?-1:void 0},e));return g.createElement("div",{className:"k-pager-numbers",ref:k},y,h,B)};exports.PagerNumericButtons=x;

package/pager/PagerNumericButtons.mjs

@@ -6,74 +6,57 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { classNames as C, kendoThemeMaps as A } from "@progress/kendo-react-common";
-import { Button as y } from "@progress/kendo-react-buttons";
-import { pagerMobileSelect as F, pagerPage as R, pagerMoreButtonLabel as T } from "../messages/index.mjs";
-import { useLocalization as $ } from "@progress/kendo-react-intl";
-import { getL10NMessage as d, translateMessage as g } from "./utils.mjs";
-const P = "...", K = (o) => {
-  const i = $(), { messagesMap: c, size: r, totalPages: p, type: b, navigatable: k } = o, D = d(F, c), E = d(R, c), N = d(T, c), f = g(i, N), M = (e, l) => {
-    e.preventDefault(), o.pageChange(l, e);
-  }, x = (e) => {
-    e.preventDefault(), o.pageChange(e.target.value, e);
-  }, h = (e, l) => /* @__PURE__ */ t.createElement(
-    y,
+import * as l from "react";
+import { classNames as D } from "@progress/kendo-react-common";
+import { Button as M } from "@progress/kendo-react-buttons";
+import { pagerPage as y, pagerMoreButtonLabel as z } from "../messages/index.mjs";
+import { useLocalization as E } from "@progress/kendo-react-intl";
+import { getL10NMessage as C, translateMessage as p } from "./utils.mjs";
+const I = "...", F = (t) => {
+  const c = E(), { messagesMap: i, size: u, totalPages: P, navigatable: m, pagerNumericButtonsRef: h } = t, v = C(y, i), N = C(z, i), g = p(c, N), d = (e, n) => {
+    e.preventDefault(), t.pageChange(n, e);
+  }, b = (e, n) => /* @__PURE__ */ l.createElement(
+    M,
     {
       fillMode: "flat",
       themeColor: "primary",
-      size: r,
+      size: u,
       rounded: null,
       role: "button",
-      "aria-label": l,
-      onClick: (I) => M(I, e),
-      tabIndex: k ? -1 : void 0
+      "aria-label": n,
+      onClick: (x) => d(x, e),
+      tabIndex: m ? -1 : void 0
     },
-    P
-  ), v = (e) => /* @__PURE__ */ t.createElement("option", { value: e }, P);
-  let n = 1;
-  const a = o.currentPage, m = o.buttonCount;
-  if (a > m) {
-    const e = a % m;
-    n = e === 0 ? a - m + 1 : a - e + 1;
+    I
+  );
+  let a = 1;
+  const o = t.currentPage, r = t.buttonCount;
+  if (o > r) {
+    const e = o % r;
+    a = e === 0 ? o - r + 1 : o - e + 1;
   }
-  const s = Math.min(n + o.buttonCount - 1, o.totalPages), L = n > 1 && h(n - 1, f), w = s < p && h(s + 1, f), z = n > 1 && v(n - 1), B = s < p && v(s + 1), u = [];
-  for (let e = n; e <= s; e++)
-    u.push(e);
-  const O = u.map((e) => /* @__PURE__ */ t.createElement(
-    y,
+  const s = Math.min(a + t.buttonCount - 1, t.totalPages), L = a > 1 && b(a - 1, g), k = s < P && b(s + 1, g), f = [];
+  for (let e = a; e <= s; e++)
+    f.push(e);
+  const B = f.map((e) => /* @__PURE__ */ l.createElement(
+    M,
     {
-      className: C({ "k-selected": a === e }),
+      className: D({ "k-selected": o === e }),
       key: e,
       fillMode: "flat",
       themeColor: "primary",
-      size: r,
+      size: u,
       rounded: null,
       role: "button",
-      "aria-label": g(i, E) + " " + e,
-      "aria-current": a === e ? !0 : void 0,
-      onClick: (l) => M(l, e),
-      tabIndex: k ? -1 : void 0
+      "aria-label": p(c, v) + " " + e,
+      "aria-current": o === e ? !0 : void 0,
+      onClick: (n) => d(n, e),
+      tabIndex: m ? -1 : void 0
     },
     e
-  )), S = u.map((e) => /* @__PURE__ */ t.createElement("option", { key: e }, e));
-  return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-    "select",
-    {
-      style: { width: "5em", margin: "0px 1em", display: "inline-flex" },
-      className: C("k-picker k-dropdown-list k-dropdown k-rounded-md k-picker-solid", {
-        [`k-picker-${A.sizeMap[r] || r}`]: r,
-        "k-hidden": b !== "dropdown"
-      }),
-      "aria-label": g(i, D),
-      value: a,
-      onChange: (e) => x(e)
-    },
-    z,
-    S,
-    B
-  ), /* @__PURE__ */ t.createElement("div", { className: "k-pager-numbers", style: { display: b === "numbers" ? "" : "none" } }, L, O, w));
+  ));
+  return /* @__PURE__ */ l.createElement("div", { className: "k-pager-numbers", ref: h }, L, B, k);
 };
 export {
-  K as PagerNumericButtons
+  F as PagerNumericButtons
 };