@primer/react-brand 0.71.0 → 0.71.1-rc.1b68fd40

package/docs/components/Pagination/index.md

@@ -64,17 +64,35 @@ render(<App />)
 />
 ```
 
+### Custom button labels
+
+Use the `labels` prop to customize the visible text of the previous and next controls. When localizing content, remember to also set the matching `prevAriaLabel` and `nextAriaLabel` labels so that the accessible names stay in sync with the visible text.
+
+```jsx
+<Pagination
+  pageCount={3}
+  currentPage={2}
+  labels={{
+    prev: 'Précédent',
+    next: 'Suivant',
+    prevAriaLabel: 'Page précédente',
+    nextAriaLabel: 'Page suivante',
+  }}
+/>
+```
+
 ## Component props
 
 ### Pagination `Required`
 
-| name                    | type                                                                         | default | required | description                                                                                                             |
-| ----------------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `pageCount`             | `number`                                                                     |         | `true`   | The total number of pages                                                                                               |
-| `currentPage`           | `number`                                                                     |         | `true`   | The current page number                                                                                                 |
-| `onPageChange`          | `(e: React.MouseEvent, n: number) => void`                                   |         | `false`  | Callback function for when the page changes                                                                             |
-| `hrefBuilder`           | `(n: number) => string`                                                      |         | `false`  | Function to build the href for each page                                                                                |
-| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}` |         | `false`  | Forward custom attributes to pagination items.                                                                          |
-| `marginPageCount`       | `number`                                                                     |         | `false`  | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
-| `showPages`             | `boolean`                                                                    |         | `false`  | Whether to show the page numbers                                                                                        |
-| `surroundingPageCount`  | `number`                                                                     |         | `false`  | The number of pages to show on each side of the current page. Will be hidden on narrow viewports.                       |
+| name                    | type                                                                             | default | required | description                                                                                                             |
+| ----------------------- | -------------------------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `pageCount`             | `number`                                                                         |         | `true`   | The total number of pages                                                                                               |
+| `currentPage`           | `number`                                                                         |         | `true`   | The current page number                                                                                                 |
+| `onPageChange`          | `(e: React.MouseEvent, n: number) => void`                                       |         | `false`  | Callback function for when the page changes                                                                             |
+| `hrefBuilder`           | `(n: number) => string`                                                          |         | `false`  | Function to build the href for each page                                                                                |
+| `pageAttributesBuilder` | `(n: number, page: PaginationPageType) => {[attributeName: string]: string}`     |         | `false`  | Forward custom attributes to pagination items.                                                                          |
+| `marginPageCount`       | `number`                                                                         |         | `false`  | Defines how many pages are to be displayed on the left and right of the component. Will be reduced on narrow viewports. |
+| `showPages`             | `boolean`                                                                        |         | `false`  | Whether to show the page numbers                                                                                        |
+| `surroundingPageCount`  | `number`                                                                         |         | `false`  | The number of pages to show on each side of the current page. Will be hidden on narrow viewports.                       |
+| `labels`                | `{prev?: string; next?: string; prevAriaLabel?: string; nextAriaLabel?: string}` |         | `false`  | Custom text and accessible labels for the previous and next controls. Provide any subset.                               |

package/docs/index.md

@@ -1,6 +1,6 @@
-# Primer Brand docs (v0.71.0)
+# Primer Brand docs (v0.71.1-rc.1b68fd40)
 
-These docs are bundled with `@primer/react-brand@0.71.0` and match your installed version.
+These docs are bundled with `@primer/react-brand@0.71.1-rc.1b68fd40` and match your installed version.
 
 New here? Start with [Getting started](getting-started/index.md) for installation, global
 stylesheet and font setup. Component directories are named after their import (e.g.

package/esm/Pagination/Pagination.d.ts

@@ -11,11 +11,17 @@ export type PaginationProps = {
     marginPageCount?: number;
     showPages?: boolean;
     surroundingPageCount?: number;
+    labels?: {
+        prev?: string;
+        next?: string;
+        prevAriaLabel?: string;
+        nextAriaLabel?: string;
+    };
     'data-testid'?: string;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**
  * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  * @see https://primer.style/brand/components/Pagination
  */
-export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, labels, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=Pagination.d.ts.map

package/esm/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D;;;GAGG;AACH,eAAO,MAAM,UAAU,qOAelB,eAAe,6CAyDnB,CAAA"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAM9C,OAAO,EAAuB,kBAAkB,EAAC,MAAM,SAAS,CAAA;AAKhE,MAAM,MAAM,eAAe,GAAG;IAE5B,SAAS,EAAE,MAAM,CAAA;IAEjB,WAAW,EAAE,MAAM,CAAA;IAEnB,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAEvD,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAEnC,qBAAqB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK;QAAC,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAA;KAAC,CAAA;IAElG,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAE7B,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,aAAa,CAAC,EAAE,MAAM,CAAA;KACvB,CAAA;IACD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,CAAA;AAS1D;;;GAGG;AACH,eAAO,MAAM,UAAU,6OAgBlB,eAAe,6CAsEnB,CAAA"}

package/esm/Pagination/Pagination.js

@@ -7,59 +7,72 @@ 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, {
+var d = {
+	prev: "Previous",
+	next: "Next",
+	prevAriaLabel: "Previous Page",
+	nextAriaLabel: "Next Page"
+}, f = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: f, hrefBuilder: h = m, pageAttributesBuilder: g, marginPageCount: _ = 1, showPages: v = !0, surroundingPageCount: y = 2, labels: b, "aria-label": x, "data-testid": S, ...C }) => {
+	let { width: w } = r();
+	w && w < 768 && (_ = 1, y = 0);
+	let T = b?.prev ?? d.prev, E = b?.next ?? d.next, D = b?.prevAriaLabel ?? d.prevAriaLabel, O = b?.nextAriaLabel ?? d.nextAriaLabel, k = o.useRef(null), A = c((e) => (t) => {
+		f && f(t, e);
+	}, [f]), j = o.useMemo(() => i(s, u, v, _, y).map((e) => /* @__PURE__ */ l(p, {
 		page: e,
-		hrefBuilder: m,
-		pageAttributesBuilder: h,
-		onClick: w(e.num)
+		hrefBuilder: h,
+		pageAttributesBuilder: g,
+		prevLabel: T,
+		nextLabel: E,
+		prevAriaLabel: D,
+		nextAriaLabel: O,
+		onClick: A(e.num)
 	}, `${e.type}-${e.num}`)), [
 		s,
 		u,
-		_,
-		g,
 		v,
-		m,
+		_,
+		y,
 		h,
-		w
+		g,
+		T,
+		E,
+		D,
+		O,
+		A
 	]);
 	return /* @__PURE__ */ l("nav", {
-		ref: C,
+		ref: k,
 		id: t,
 		className: e(a.Pagination, n),
-		"data-testid": b,
-		"aria-label": y || "Pagination",
-		...x,
+		"data-testid": S,
+		"aria-label": x || "Pagination",
+		...C,
 		children: /* @__PURE__ */ l("div", {
 			className: e(a.Pagination__inner),
-			children: T
+			children: j
 		})
 	});
-}), f = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, onClick: c }) => {
-	let [d, f] = o.useState(!1), p = {
+}), p = ({ page: r, hrefBuilder: i, pageAttributesBuilder: s, prevLabel: c, nextLabel: d, prevAriaLabel: f, nextAriaLabel: p, onClick: m }) => {
+	let [h, g] = o.useState(!1), _ = {
 		role: "button",
 		size: "small",
 		variant: "subtle",
-		onClick: r.disabled ? void 0 : c
-	}, { className: m, ...h } = s?.(r.num, r) ?? {};
+		onClick: r.disabled ? void 0 : m
+	}, { className: v, ...y } = 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),
+			"aria-label": f,
+			...y,
+			className: e(a.Pagination__controlItem, v),
+			onMouseEnter: () => g(!0),
+			onMouseLeave: () => g(!1),
+			onFocus: () => g(!0),
+			onBlur: () => g(!1),
 			children: /* @__PURE__ */ u("span", {
 				className: a.Pagination__controlContent,
 				children: [/* @__PURE__ */ l("span", {
@@ -67,71 +80,71 @@ var d = s(({ id: t, className: n, pageCount: s, currentPage: u, onPageChange: d,
 					children: /* @__PURE__ */ l(t, {
 						hidden: !0,
 						reverse: !0,
-						expanded: !r.disabled && d,
+						expanded: !r.disabled && h,
 						className: a.Pagination__controlArrow
 					})
 				}), /* @__PURE__ */ l("span", {
 					className: a.Pagination__controlText,
-					children: "Previous"
+					children: c
 				})]
 			})
 		});
 		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),
+			"aria-label": p,
+			...y,
+			className: e(a.Pagination__controlItem, v),
+			onMouseEnter: () => g(!0),
+			onMouseLeave: () => g(!1),
+			onFocus: () => g(!0),
+			onBlur: () => g(!1),
 			children: /* @__PURE__ */ u("span", {
 				className: a.Pagination__controlContent,
 				children: [/* @__PURE__ */ l("span", {
 					className: a.Pagination__controlText,
-					children: "Next"
+					children: d
 				}), /* @__PURE__ */ l("span", {
 					className: e(a.Pagination__controlArrowWrapper, a["Pagination__controlArrowWrapper--next"]),
 					children: /* @__PURE__ */ l(t, {
 						hidden: !0,
-						expanded: !r.disabled && d,
+						expanded: !r.disabled && h,
 						className: a.Pagination__controlArrow
 					})
 				})]
 			})
 		});
 		case "NUM": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
 			variant: r.selected ? "primary" : "subtle",
-			className: e(a.Pagination__pageItem, m),
+			className: e(a.Pagination__pageItem, v),
 			href: i(r.num),
 			"aria-label": `Page ${r.num}${r.precedesBreak ? "..." : ""}`,
 			"aria-current": r.selected ? "page" : void 0,
-			...h,
+			...y,
 			children: r.num
 		});
 		case "BREAK": return /* @__PURE__ */ l(n, {
-			...p,
+			..._,
 			as: "a",
-			className: e(a.Pagination__pageItem, m),
+			className: e(a.Pagination__pageItem, v),
 			variant: "subtle",
 			role: "presentation",
 			href: void 0,
 			onClick: void 0,
-			...h,
+			...y,
 			children: "…"
 		});
 	}
 };
-function p(e) {
+function m(e) {
 	return `#${e}`;
 }
 //#endregion
-export { d as Pagination };
+export { f as Pagination };
 
 //# sourceMappingURL=Pagination.js.map

package/esm/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Button, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {buildPaginationModel, PaginationPageType} from './model'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[attributeName: string]: string}\n  /* Defines how many pages are to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PaginationPageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[key: string]: string}\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nconst PaginationItem = ({page, hrefBuilder, pageAttributesBuilder, onClick}: PaginationItemProps) => {\n  const [isArrowExpanded, setIsArrowExpanded] = React.useState(false)\n\n  const baseProps = {\n    role: 'button',\n    size: 'small' as const,\n    variant: 'subtle' as const,\n    onClick: page.disabled ? undefined : onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num, page)\n  const {className: customClassName, ...customAttributes} = customProps ?? {}\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"prev\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Previous Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span\n              className={clsx(\n                styles.Pagination__controlArrowWrapper,\n                styles['Pagination__controlArrowWrapper--previous'],\n              )}\n            >\n              <ExpandableArrow\n                hidden\n                reverse\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n            <span className={styles.Pagination__controlText}>Previous</span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"next\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label=\"Next Page\"\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span className={styles.Pagination__controlText}>Next</span>\n            <span\n              className={clsx(styles.Pagination__controlArrowWrapper, styles['Pagination__controlArrowWrapper--next'])}\n            >\n              <ExpandableArrow\n                hidden\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that precede a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Button\n          {...baseProps}\n          as=\"a\"\n          variant={page.selected ? 'primary' : 'subtle'}\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customAttributes}\n        >\n          {page.num}\n        </Button>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          variant=\"subtle\"\n          role=\"presentation\"\n          href={undefined}\n          onClick={undefined}\n          {...customAttributes}\n        >\n          …\n        </Button>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import React, {memo, useCallback} from 'react'\nimport {Button, useWindowSize} from '..'\n\nimport {clsx} from 'clsx'\n\nimport {ExpandableArrow} from '../ExpandableArrow'\nimport {buildPaginationModel, PaginationPageType} from './model'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from './Pagination.module.css'\n\nexport type PaginationProps = {\n  /* The total number of pages */\n  pageCount: number\n  /* The current page number */\n  currentPage: number\n  /* Callback function for when the page changes */\n  onPageChange?: (e: React.MouseEvent, n: number) => void\n  /* Function to build the href for each page */\n  hrefBuilder?: (n: number) => string\n  /* Function to forward custom attributes for each pagination item */\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[attributeName: string]: string}\n  /* Defines how many pages are to be displayed on the left and right of the component */\n  marginPageCount?: number\n  /* Whether to show the page numbers */\n  showPages?: boolean\n  /* The number of pages to show on each side of the current page */\n  surroundingPageCount?: number\n  /* Custom text labels for the pagination controls. Use for localization. */\n  labels?: {\n    prev?: string\n    next?: string\n    prevAriaLabel?: string\n    nextAriaLabel?: string\n  }\n  'data-testid'?: string\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>\n\nconst defaultPaginationLabels = {\n  prev: 'Previous',\n  next: 'Next',\n  prevAriaLabel: 'Previous Page',\n  nextAriaLabel: 'Next Page',\n}\n\n/**\n * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.\n * @see https://primer.style/brand/components/Pagination\n */\nexport const Pagination = memo(\n  ({\n    id,\n    className,\n    pageCount,\n    currentPage,\n    onPageChange,\n    hrefBuilder = defaultHrefBuilder,\n    pageAttributesBuilder,\n    marginPageCount = 1,\n    showPages = true,\n    surroundingPageCount = 2,\n    labels,\n    'aria-label': ariaLabel,\n    'data-testid': testId,\n    ...rest\n  }: PaginationProps) => {\n    // On mobile, limit the number of visible numbers\n    const {width} = useWindowSize()\n    if (width && width < 768) {\n      marginPageCount = 1\n      surroundingPageCount = 0\n    }\n\n    const prevLabel = labels?.prev ?? defaultPaginationLabels.prev\n    const nextLabel = labels?.next ?? defaultPaginationLabels.next\n    const prevAriaLabel = labels?.prevAriaLabel ?? defaultPaginationLabels.prevAriaLabel\n    const nextAriaLabel = labels?.nextAriaLabel ?? defaultPaginationLabels.nextAriaLabel\n\n    const navRef = React.useRef<HTMLElement>(null)\n\n    const pageChange = useCallback(\n      (n: number) => (e: React.MouseEvent) => {\n        if (onPageChange) {\n          onPageChange(e, n)\n        }\n      },\n      [onPageChange],\n    )\n\n    const paginationItems = React.useMemo(() => {\n      const model = buildPaginationModel(pageCount, currentPage, showPages, marginPageCount, surroundingPageCount)\n\n      return model.map(page => {\n        return (\n          <PaginationItem\n            key={`${page.type}-${page.num}`}\n            page={page}\n            hrefBuilder={hrefBuilder}\n            pageAttributesBuilder={pageAttributesBuilder}\n            prevLabel={prevLabel}\n            nextLabel={nextLabel}\n            prevAriaLabel={prevAriaLabel}\n            nextAriaLabel={nextAriaLabel}\n            onClick={pageChange(page.num)}\n          />\n        )\n      })\n    }, [\n      pageCount,\n      currentPage,\n      showPages,\n      marginPageCount,\n      surroundingPageCount,\n      hrefBuilder,\n      pageAttributesBuilder,\n      prevLabel,\n      nextLabel,\n      prevAriaLabel,\n      nextAriaLabel,\n      pageChange,\n    ])\n\n    return (\n      <nav\n        ref={navRef}\n        id={id}\n        className={clsx(styles.Pagination, className)}\n        data-testid={testId}\n        aria-label={ariaLabel || 'Pagination'}\n        {...rest}\n      >\n        <div className={clsx(styles.Pagination__inner)}>{paginationItems}</div>\n      </nav>\n    )\n  },\n)\n\ntype PaginationItemProps = {\n  page: PaginationPageType\n  hrefBuilder: (n: number) => string\n  pageAttributesBuilder?: (n: number, page: PaginationPageType) => {[key: string]: string}\n  prevLabel: string\n  nextLabel: string\n  prevAriaLabel: string\n  nextAriaLabel: string\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>\n}\n\nconst PaginationItem = ({\n  page,\n  hrefBuilder,\n  pageAttributesBuilder,\n  prevLabel,\n  nextLabel,\n  prevAriaLabel,\n  nextAriaLabel,\n  onClick,\n}: PaginationItemProps) => {\n  const [isArrowExpanded, setIsArrowExpanded] = React.useState(false)\n\n  const baseProps = {\n    role: 'button',\n    size: 'small' as const,\n    variant: 'subtle' as const,\n    onClick: page.disabled ? undefined : onClick,\n  }\n\n  const customProps = pageAttributesBuilder?.(page.num, page)\n  const {className: customClassName, ...customAttributes} = customProps ?? {}\n\n  switch (page.type) {\n    case 'PREV': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"prev\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label={prevAriaLabel}\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span\n              className={clsx(\n                styles.Pagination__controlArrowWrapper,\n                styles['Pagination__controlArrowWrapper--previous'],\n              )}\n            >\n              <ExpandableArrow\n                hidden\n                reverse\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n            <span className={styles.Pagination__controlText}>{prevLabel}</span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NEXT': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          rel=\"next\"\n          href={page.disabled ? undefined : hrefBuilder(page.num)}\n          aria-disabled={page.disabled || undefined}\n          aria-label={nextAriaLabel}\n          {...customAttributes}\n          className={clsx(styles.Pagination__controlItem, customClassName)}\n          onMouseEnter={() => setIsArrowExpanded(true)}\n          onMouseLeave={() => setIsArrowExpanded(false)}\n          onFocus={() => setIsArrowExpanded(true)}\n          onBlur={() => setIsArrowExpanded(false)}\n        >\n          <span className={styles.Pagination__controlContent}>\n            <span className={styles.Pagination__controlText}>{nextLabel}</span>\n            <span\n              className={clsx(styles.Pagination__controlArrowWrapper, styles['Pagination__controlArrowWrapper--next'])}\n            >\n              <ExpandableArrow\n                hidden\n                expanded={!page.disabled && isArrowExpanded}\n                className={styles.Pagination__controlArrow}\n              />\n            </span>\n          </span>\n        </Button>\n      )\n    }\n    case 'NUM': {\n      return (\n        /**\n         * Append \"...\" to the aria-label for pages that precede a break because screen readers will change the\n         * tone the text is read in. This is a slightly nicer experience than skipping a bunch of numbers unexpectedly.\n         */\n        <Button\n          {...baseProps}\n          as=\"a\"\n          variant={page.selected ? 'primary' : 'subtle'}\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          href={hrefBuilder(page.num)}\n          aria-label={`Page ${page.num}${page.precedesBreak ? '...' : ''}`}\n          aria-current={page.selected ? 'page' : undefined}\n          {...customAttributes}\n        >\n          {page.num}\n        </Button>\n      )\n    }\n    case 'BREAK': {\n      return (\n        <Button\n          {...baseProps}\n          as=\"a\"\n          className={clsx(styles.Pagination__pageItem, customClassName)}\n          variant=\"subtle\"\n          role=\"presentation\"\n          href={undefined}\n          onClick={undefined}\n          {...customAttributes}\n        >\n          …\n        </Button>\n      )\n    }\n  }\n}\n\nfunction defaultHrefBuilder(pageNum: number) {\n  return `#${pageNum}`\n}\n"],"mappings":"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"}

package/lib/Pagination/Pagination.d.ts

@@ -11,10 +11,16 @@ export type PaginationProps = {
     marginPageCount?: number;
     showPages?: boolean;
     surroundingPageCount?: number;
+    labels?: {
+        prev?: string;
+        next?: string;
+        prevAriaLabel?: string;
+        nextAriaLabel?: string;
+    };
     'data-testid'?: string;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**
  * Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
  * @see https://primer.style/brand/components/Pagination
  */
-export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const Pagination: React.MemoExoticComponent<({ id, className, pageCount, currentPage, onPageChange, hrefBuilder, pageAttributesBuilder, marginPageCount, showPages, surroundingPageCount, labels, "aria-label": ariaLabel, "data-testid": testId, ...rest }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;