Add exports for internal Pagination components (#9152)

Co-authored-by: Daniel Cousens <413395+dcousens@users.noreply.github.com>

.changeset/light-lamps-eat.md

@@ -0,0 +1,5 @@
+---
+"@keystone-6/core": minor
+---
+
+Add exports for internal AdminUI pagination components `Pagination`, `PaginationLabel` and `usePaginationParams` for use in custom pages

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

@@ -22,7 +22,7 @@ import {
 import { gql, type TypedDocumentNode, useMutation, useQuery } from '../../../../admin-ui/apollo'
 import { CellLink } from '../../../../admin-ui/components'
 import { PageContainer, HEADER_HEIGHT } from '../../../../admin-ui/components/PageContainer'
-import { Pagination, PaginationLabel } from '../../../../admin-ui/components/Pagination'
+import { Pagination, PaginationLabel, usePaginationParams } from '../../../../admin-ui/components/Pagination'
 import { useList } from '../../../../admin-ui/context'
 import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
 import { Link, useRouter } from '../../../../admin-ui/router'
@@ -134,16 +134,8 @@ function ListPage ({ listKey }: ListPageProps) {
   const list = useList(listKey)
 
   const { query, push } = useRouter()
-
   const { resetToDefaults } = useQueryParamsFromLocalStorage(listKey)
-
-  const currentPage =
-    typeof query.page === 'string' && !Number.isNaN(parseInt(query.page)) ? Number(query.page) : 1
-  const pageSize =
-    typeof query.pageSize === 'string' && !Number.isNaN(parseInt(query.pageSize))
-      ? parseInt(query.pageSize)
-      : list.pageSize
-
+  const { currentPage, pageSize } = usePaginationParams({ defaultPageSize: list.pageSize })
   const metaQuery = useQuery(listMetaGraphqlQuery, { variables: { listKey } })
 
   const { listViewFieldModesByField, filterableFields, orderableFields } = useMemo(() => {
@@ -760,7 +752,7 @@ function ListTable ({
           })}
         </tbody>
       </TableContainer>
-      <Pagination list={list} total={count} currentPage={currentPage} pageSize={pageSize} />
+      <Pagination singular={list.singular} plural={list.plural} total={count} currentPage={currentPage} pageSize={pageSize} />
     </Box>
   )
 }

packages/core/src/admin-ui/components/Pagination.tsx

@@ -6,32 +6,45 @@ import { Select } from '@keystone-ui/fields'
 import { ChevronRightIcon, ChevronLeftIcon } from '@keystone-ui/icons'
 import { Link, useRouter } from '../router'
 
-interface PaginationProps {
+type PaginationProps = {
   pageSize: number
   total: number
   currentPage: number
-  list: Record<string, any>
+  singular: string
+  plural: string
+}
+
+export function usePaginationParams ({ defaultPageSize }: { defaultPageSize: number }) {
+  const { query } = useRouter()
+  const currentPage = Math.max(
+    typeof query.page === 'string' && !Number.isNaN(parseInt(query.page)) ? Number(query.page) : 1,
+    1
+  )
+  const pageSize = typeof query.pageSize === 'string' && !Number.isNaN(parseInt(query.pageSize))
+      ? parseInt(query.pageSize)
+      : defaultPageSize
+  return { currentPage, pageSize }
 }
 
-const getPaginationStats = ({ list, pageSize, currentPage, total }: PaginationProps) => {
+function getPaginationStats ({ singular, plural, pageSize, currentPage, total }: PaginationProps) {
   let stats = ''
   if (total > pageSize) {
     const start = pageSize * (currentPage - 1) + 1
     const end = Math.min(start + pageSize - 1, total)
-    stats = `${start} - ${end} of ${total} ${list.plural}`
+    stats = `${start} - ${end} of ${total} ${plural}`
   } else {
-    if (total > 1 && list.plural) {
-      stats = `${total} ${list.plural}`
-    } else if (total === 1 && list.singular) {
-      stats = `${total} ${list.singular}`
+    if (total > 1 && plural) {
+      stats = `${total} ${plural}`
+    } else if (total === 1 && singular) {
+      stats = `${total} ${singular}`
     }
   }
   return { stats }
 }
 
-export function Pagination ({ currentPage, total, pageSize, list }: PaginationProps) {
+export function Pagination ({ currentPage, total, pageSize, singular, plural }: PaginationProps) {
   const { query, pathname, push } = useRouter()
-  const { stats } = getPaginationStats({ list, currentPage, total, pageSize })
+  const { stats } = getPaginationStats({ singular, plural, currentPage, total, pageSize })
   const { opacity } = useTheme()
 
   const nextPage = currentPage + 1
@@ -59,7 +72,7 @@ export function Pagination ({ currentPage, total, pageSize, list }: PaginationPr
     }
   }, [total, pageSize, currentPage, pathname, query, push])
 
-  // Don't render the pagiantion component if the pageSize is greater than the total number of items in the list.
+  // Don't render the pagination component if the pageSize is greater than the total number of items in the list.
   if (total <= pageSize) return null
 
   const onChange = (selectedOption: { value: string, label: string }) => {
@@ -96,7 +109,7 @@ export function Pagination ({ currentPage, total, pageSize, list }: PaginationPr
       }}
     >
       <Stack across gap="xxlarge" align="center">
-        <span>{`${list.plural} per page: ${pageSize}`}</span>
+        <span>{`${plural} per page: ${pageSize}`}</span>
         <span>
           <strong>{stats}</strong>
         </span>
@@ -155,15 +168,10 @@ export function PaginationLabel ({
   plural,
   singular,
   total,
-}: {
-  currentPage: number
-  pageSize: number
-  plural: string
-  singular: string
-  total: number
-}) {
+}: PaginationProps) {
   const { stats } = getPaginationStats({
-    list: { plural, singular },
+    plural,
+    singular,
     currentPage,
     total,
     pageSize,

packages/core/src/admin-ui/components/index.ts

@@ -16,3 +16,4 @@ export type { NavigationProps } from '../../types'
 export { PageContainer } from './PageContainer'
 export { CreateItemDrawer } from './CreateItemDrawer'
 export { GraphQLErrorNotice } from './GraphQLErrorNotice'
+export { Pagination, PaginationLabel, usePaginationParams } from './Pagination'