@primer/react-brand/esm/Pagination/Pagination.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { ExpandableArrow as t } from "../ExpandableArrow/ExpandableArrow.js";
import { Button as n } from "../Button/Button.js";
import { useWindowSize as r } from "../hooks/useWindowSize.js";
import { buildPaginationModel as i } from "./model.js";
import a from "./Pagination.module.js";
import o, { memo as s, useCallback as c } from "react";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
//#region src/Pagination/Pagination.tsx
var d = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: d, hrefBuilder: m = p, pageAttributesBuilder: h, marginPageCount: g = 1, showPages: _ = !0, surroundingPageCount: v = 2, "aria-label": y, "data-testid": b, ...x }) => {
	let { width: S } = r();
	S && S < 768 && (g = 1, v = 0);
	let C = o.useRef(null), w = c((e) => (t) => {
		d && d(t, e);
	}, [d]), T = o.useMemo(() => i(s, u, _, g, v).map((e) => /* @__PURE__ */ l(f, {
		page: e,
		hrefBuilder: m,
		pageAttributesBuilder: h,
		onClick: w(e.num)
	}, `${e.type}-${e.num}`)), [
		s,
		u,
		_,
		g,
		v,
		m,
		h,
		w
	]);
	return /* @__PURE__ */ l("nav", {
		ref: C,
		id: t,
		className: e(a.Pagination, n),
		"data-testid": b,
		"aria-label": y || "Pagination",
		...x,
		children: /* @__PURE__ */ l("div", {
			className: e(a.Pagination__inner),
			children: T
		})
	});
}), f = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, onClick: c }) => {
	let [d, f] = o.useState(!1), p = {
		role: "button",
		size: "small",
		variant: "subtle",
		onClick: r.disabled ? void 0 : c
	}, { className: m, ...h } = s?.(r.num, r) ?? {};
	switch (r.type) {
		case "PREV": return /* @__PURE__ */ l(n, {
			...p,
			as: "a",
			rel: "prev",
			href: r.disabled ? void 0 : i(r.num),
			"aria-disabled": r.disabled || void 0,
			"aria-label": "Previous Page",
			...h,
			className: e(a.Pagination__controlItem, m),
			onMouseEnter: () => f(!0),
			onMouseLeave: () => f(!1),
			onFocus: () => f(!0),
			onBlur: () => f(!1),
			children: /* @__PURE__ */ u("span", {
				className: a.Pagination__controlContent,
				children: [/* @__PURE__ */ l("span", {
					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--previous"]),
					children: /* @__PURE__ */ l(t, {
						hidden: !0,
						reverse: !0,
						expanded: !r.disabled && d,
						className: a.Pagination__controlArrow
					})
				}), /* @__PURE__ */ l("span", {
					className: a.Pagination__controlText,
					children: "Previous"
				})]
			})
		});
		case "NEXT": return /* @__PURE__ */ l(n, {
			...p,
			as: "a",
			rel: "next",
			href: r.disabled ? void 0 : i(r.num),
			"aria-disabled": r.disabled || void 0,
			"aria-label": "Next Page",
			...h,
			className: e(a.Pagination__controlItem, m),
			onMouseEnter: () => f(!0),
			onMouseLeave: () => f(!1),
			onFocus: () => f(!0),
			onBlur: () => f(!1),
			children: /* @__PURE__ */ u("span", {
				className: a.Pagination__controlContent,
				children: [/* @__PURE__ */ l("span", {
					className: a.Pagination__controlText,
					children: "Next"
				}), /* @__PURE__ */ l("span", {
					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--next"]),
					children: /* @__PURE__ */ l(t, {
						hidden: !0,
						expanded: !r.disabled && d,
						className: a.Pagination__controlArrow
					})
				})]
			})
		});
		case "NUM": return /* @__PURE__ */ l(n, {
			...p,
			as: "a",
			variant: r.selected ? "primary" : "subtle",
			className: e(a.Pagination__pageItem, m),
			href: i(r.num),
			"aria-label": `Page ${r.num}${r.precedesBreak ? "..." : ""}`,
			"aria-current": r.selected ? "page" : void 0,
			...h,
			children: r.num
		});
		case "BREAK": return /* @__PURE__ */ l(n, {
			...p,
			as: "a",
			className: e(a.Pagination__pageItem, m),
			variant: "subtle",
			role: "presentation",
			href: void 0,
			onClick: void 0,
			...h,
			children: "…"
		});
	}
};
function p(e) {
	return `#${e}`;
}
//#endregion
export { d as Pagination };

//# sourceMappingURL=Pagination.js.map