welcome-ui/dist/Pagination.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsx as n, jsxs as M } from "react/jsx-runtime";
import { useMemo as y, forwardRef as z, useRef as h, useCallback as N } from "react";
import "./Icon-BisRi8B3.js";
import { L as B } from "./index-CWVOLBDY.js";
import { R as D } from "./index-Dcq5gh3E.js";
import { c as G } from "./index-PAaZGbyz.js";
const L = "_list_1jk7d_2", p = "_item_1jk7d_11", q = "_page_1jk7d_37", F = "_dots_1jk7d_44", J = {
  list: L,
  item: p,
  "disabled-arrow": "_disabled-arrow_1jk7d_32",
  page: q,
  dots: F
}, c = 5, K = 3;
function O({ page: i, pageCount: t, rangeDisplay: d }) {
  return y(() => {
    if (t <= d || t <= c + 1)
      return _(t, (s) => s + 1);
    const r = Q(i, t), a = r === "before" ? _(c, (s) => s + 1) : [1], o = r === "center" ? _(K, (s) => s + i - 1) : [], l = r === "after" ? _(c, (s) => s + t - c + 1) : [t];
    return S([a, o, l], "-");
  }, [i, t, d]);
}
function _(i, t) {
  return Array.from({ length: i }, (d, r) => t(r));
}
function Q(i, t) {
  return i < c ? "before" : i >= c && i <= t - c + 1 ? "center" : i > t - c + 1 ? "after" : "center";
}
function S(i, t) {
  return i.reduce((d, r, a) => {
    const o = [];
    return o.push(...d), o.push(...r), r.length && a < i.length - 1 && o.push(t), o;
  }, []);
}
const f = G(J), H = z(
  ({
    "aria-label": i,
    buttonNextProps: t,
    buttonPrevProps: d,
    dataTestId: r,
    getHref: a,
    listProps: o,
    onChange: l,
    page: s,
    pageCount: m,
    rangeDisplay: x = 5,
    ...v
  }, k) => {
    const R = O({ page: s, pageCount: m, rangeDisplay: x }), j = h(null), w = h(null), u = s === 1, b = s === m, P = N(() => {
      if (u) return;
      const e = Math.max(s - 1, 1);
      l(e);
    }, [u, s, l]), $ = N(() => {
      if (b) return;
      const e = Math.min(s + 1, m);
      l(e);
    }, [b, s, m, l]);
    return /* @__PURE__ */ n("nav", { "aria-label": i ?? "Pagination", "data-testid": r, ref: k, ...v, children: /* @__PURE__ */ M("ol", { className: f("list"), ...o, children: [
      /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
        "button",
        {
          "aria-label": "Previous Page",
          className: f("item", u && "disabled-arrow"),
          "data-testid": r ? `${r}-arrow-prev` : void 0,
          disabled: u,
          onClick: P,
          ref: j,
          type: "button",
          ...d,
          children: /* @__PURE__ */ n(B, { size: "sm" })
        }
      ) }),
      R.map(
        (e, A) => e === "-" ? /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n("span", { className: f("dots"), children: "..." }) }, `${A}-`) : /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
          "a",
          {
            "aria-current": e === s,
            className: f("item", "page"),
            "data-testid": r ? `${r}-${e}` : void 0,
            href: a == null ? void 0 : a(e),
            onClick: (E) => {
              l && (E.preventDefault(), l(e));
            },
            children: e
          }
        ) }, e)
      ),
      /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
        "button",
        {
          "aria-label": "Next Page",
          className: f("item", b && "disabled-arrow"),
          "data-testid": r ? `${r}-arrow-next` : void 0,
          disabled: b,
          onClick: $,
          ref: w,
          type: "button",
          ...t,
          children: /* @__PURE__ */ n(D, { size: "sm" })
        }
      ) })
    ] }) });
  }
);
export {
  H as Pagination
};