welcome-ui/dist/Pagination.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as o } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useMemo as z, useRef as k, useCallback as p } from "react";
import "./Icon.mjs";
import { L as G } from "./index-eYXK9_x4.mjs";
import { R as _ } from "./index-DtWZjMb5.mjs";
import { forwardRef as F } from "./System.mjs";
import d, { th as h, css as b } from "@xstyled/styled-components";
import { h as M } from "./hide-focus-rings-root-Dcm160m2.mjs";
const S = d.navBox``, q = d.ulBox`
  list-style-type: none;
  padding: 0;
  margin: 0;
`, m = d.liBox`
  display: inline-block;
  vertical-align: bottom;
  padding: 0;
  margin-right: sm;

  &:last-child {
    margin-right: 0;
  }
`, J = d.span`
  ${h("paginations.default")};
  display: flex;
  justify-content: center;
  align-items: center;
`, B = b`
  ${h("paginations.default")};
  ${h("paginations.item")};
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;

  &:focus {
    outline: none !important; /* important for firefox */
    transition: none;
  }

  [${M}] &:focus {
    box-shadow: none;
  }
`, y = d.aBox(
  (n) => b`
    ${B};
    ${n["aria-disabled"] && b`
      color: beige-70;
      background-color: beige-40;
    `}
  `
), K = d.aBox(
  (n) => b`
    ${B};
    ${n["aria-current"] && h("paginations.active")}
  `
), f = 5, O = 3;
function Q({ page: n, pageCount: t, rangeDisplay: r }) {
  return z(() => {
    if (t <= r || t <= f + 1)
      return x(t, (l) => l + 1);
    const e = U(n, t), c = e === "before" ? x(f, (l) => l + 1) : [1], i = e === "center" ? x(O, (l) => l + n - 1) : [], u = e === "after" ? x(f, (l) => l + t - f + 1) : [t];
    return V([c, i, u], "-");
  }, [n, t, r]);
}
function x(n, t) {
  return Array.from({ length: n }, (r, e) => t(e));
}
function U(n, t) {
  if (n < f) return "before";
  if (n >= f && n <= t - f + 1) return "center";
  if (n > t - f + 1) return "after";
}
function V(n, t) {
  return n.reduce((r, e, c) => {
    const i = [];
    return i.push(...r), i.push(...e), e.length && c < n.length - 1 && i.push(t), i;
  }, []);
}
const g = F(
  ({
    "aria-label": n,
    dataTestId: t,
    getHref: r,
    leftArrow: e,
    onChange: c,
    page: i,
    pageCount: u,
    rangeDisplay: l = 5,
    rightArrow: A,
    ...D
  }, L) => {
    const w = Q({ page: i, pageCount: u, rangeDisplay: l }), $ = k(null), R = k(null), j = i === 1, v = i === u, E = p(
      (s) => {
        s.preventDefault();
        const a = i - 1;
        a === 1 && $.current.focus(), c(a);
      },
      [i, c]
    ), N = p(
      (s) => {
        s.preventDefault();
        const a = i + 1;
        a === u && R.current.focus(), c(a);
      },
      [i, u, c]
    );
    return /* @__PURE__ */ o.jsx(
      S,
      {
        "aria-label": n,
        "data-testid": t,
        ref: L,
        role: "navigation",
        ...D,
        children: /* @__PURE__ */ o.jsxs(q, { children: [
          /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
            y,
            {
              "aria-disabled": j,
              "data-testid": t ? `${t}-arrow-prev` : void 0,
              href: r ? r(j ? i : i - 1) : "",
              onClick: j ? void 0 : E,
              ref: $,
              children: e || /* @__PURE__ */ o.jsx(G, { size: "sm" })
            }
          ) }),
          w.map(
            (s, a) => s === "-" ? /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(J, { children: "..." }) }, `${a}-`) : /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
              K,
              {
                "aria-current": s === i,
                "data-testid": t ? `${t}-${s}` : void 0,
                href: r ? r(s) : "",
                onClick: (P) => {
                  P.preventDefault(), c(s);
                },
                children: s
              }
            ) }, s)
          ),
          /* @__PURE__ */ o.jsx(m, { children: /* @__PURE__ */ o.jsx(
            y,
            {
              "aria-disabled": v,
              "data-testid": t ? `${t}-arrow-next` : void 0,
              href: r ? r(v ? i : i + 1) : "",
              onClick: v ? void 0 : N,
              ref: R,
              children: A || /* @__PURE__ */ o.jsx(_, { size: "sm" })
            }
          ) })
        ] })
      }
    );
  }
);
export {
  g as Pagination
};