@progress/kendo-react-data-tools/pager/Pager.mjs

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"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) => {
  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);
  n.useImperativeHandle(
    p,
    () => ({
      get element() {
        return re();
      },
      props: g
    })
  ), 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
    });
  }, 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)
      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
    };
    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,
    {
      fillMode: "flat",
      themeColor: "base",
      size: f,
      rounded: null,
      className: e,
      icon: L,
      svgIcon: w,
      title: a,
      role: "button",
      "aria-disabled": K,
      tabIndex: m ? -1 : void 0,
      onClick: (R) => {
        R.preventDefault(), d(t, R);
      }
    }
  ), V = B && /* @__PURE__ */ n.createElement(
    ke,
    {
      pageChange: le,
      pageSize: v,
      pageSizes: B,
      value: ae,
      messagesMap: r,
      size: f,
      navigatable: m
    }
  ), 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,
    {
      type: M && !T ? "dropdown" : "numbers",
      buttonCount: x || 0,
      totalPages: c,
      currentPage: o,
      pageChange: d,
      messagesMap: r,
      size: f,
      navigatable: m
    }
  ) : /* @__PURE__ */ n.createElement(
    De,
    {
      buttonCount: x || 0,
      totalPages: c,
      currentPage: o,
      pageChange: d,
      messagesMap: r,
      size: f,
      navigatable: m
    }
  );
  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);
  }
  return /* @__PURE__ */ n.createElement(
    "div",
    {
      ref: h,
      className: J(
        "k-pager",
        {
          [`k-pager-${Ve.sizeMap[f] || f}`]: f,
          "k-disabled": b
        },
        te
      ),
      style: se,
      role: "application",
      "aria-roledescription": "pager",
      dir: O,
      "aria-keyshortcuts": i.toLanguageString(
        _.messageKey,
        _.defaultMessage
      ),
      "aria-label": de,
      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
};
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 {
  X as Pager
};