From d7e04cb6a33d40ea86fa8ac2712d7a5ea785de2d Mon Sep 17 00:00:00 2001
From: lorenzo-del-rosario
 <148731613+lorenzo-del-rosario@users.noreply.github.com>
Date: Wed, 28 Feb 2024 03:03:52 +1100
Subject: [PATCH] fix: fixed Pagination, NextLink and PreviousLink return types
 (#1774)

* fix: fixed Pagination, NextLink and PreviousLink return types
---
 .changeset/popular-zebras-study.md             |  5 +++++
 packages/hydrogen/src/pagination/Pagination.ts | 16 +++++-----------
 2 files changed, 10 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/popular-zebras-study.md

diff --git a/.changeset/popular-zebras-study.md b/.changeset/popular-zebras-study.md
new file mode 100644
index 0000000000..724abd9795
--- /dev/null
+++ b/.changeset/popular-zebras-study.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fixed Pagination, PreviousLink and NextLink types
diff --git a/packages/hydrogen/src/pagination/Pagination.ts b/packages/hydrogen/src/pagination/Pagination.ts
index b3cf9d5ca6..2303374e85 100644
--- a/packages/hydrogen/src/pagination/Pagination.ts
+++ b/packages/hydrogen/src/pagination/Pagination.ts
@@ -4,8 +4,8 @@ import {
   useMemo,
   useRef,
   forwardRef,
-  type ReactNode,
   type Ref,
+  type FC,
 } from 'react';
 import type {
   Maybe,
@@ -49,13 +49,9 @@ interface PaginationInfo<NodesType> {
   /** The paginated array of nodes. You should map over and render this array. */
   nodes: Array<NodesType>;
   /** The `<NextLink>` is a helper component that makes it easy to navigate to the next page of paginated data. Alternatively you can build your own `<Link>` component: `<Link to={nextPageUrl} state={state} preventScrollReset />` */
-  NextLink: (
-    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
-  ) => ReactNode;
+  NextLink: FC<Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>}>;
   /** The `<PreviousLink>` is a helper component that makes it easy to navigate to the previous page of paginated data. Alternatively you can build your own `<Link>` component: `<Link to={previousPageUrl} state={state} preventScrollReset />` */
-  PreviousLink: (
-    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
-  ) => ReactNode;
+  PreviousLink: FC<Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>}>;
   /** The URL to the previous page of paginated data. Use this prop to build your own `<Link>` component. */
   previousPageUrl: string;
   /** The URL to the next page of paginated data. Use this prop to build your own `<Link>` component. */
@@ -84,9 +80,7 @@ type PaginationProps<NodesType> = {
   children: PaginationRenderProp<NodesType>;
 };
 
-type PaginationRenderProp<NodesType> = (
-  props: PaginationInfo<NodesType>,
-) => ReactNode;
+type PaginationRenderProp<NodesType> = FC<PaginationInfo<NodesType>>;
 
 /**
  *
@@ -102,7 +96,7 @@ export function Pagination<NodesType>({
     console.warn('<Pagination> requires children to work properly');
     return null;
   },
-}: PaginationProps<NodesType>) {
+}: PaginationProps<NodesType>): ReturnType<FC> {
   const transition = useNavigation();
   const isLoading = transition.state === 'loading';
   const {