Fix the Pagination component to use forwardRefs (#1362)

Shopify · Sep 28, 2023 · 00210fa · 00210fa
1 parent 4f26aed
commit 00210fa
Show file tree

Hide file tree

Showing 11 changed files with 73 additions and 90 deletions.
diff --git a/.changeset/sixty-keys-prove.md b/.changeset/sixty-keys-prove.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix the Pagination component to use forwardRefs for the NextLink and PreviousLink render props
diff --git a/examples/customer-api/package.json b/examples/customer-api/package.json
@@ -29,7 +29,7 @@
     "@shopify/oxygen-workers-types": "^3.17.2",
     "@shopify/prettier-config": "^1.1.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.2.20",
+   "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",

diff --git a/examples/express/package.json b/examples/express/package.json
@@ -32,7 +32,7 @@
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/morgan": "^1.9.4",
-    "@types/react": "^18.2.20",
+   "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "dotenv": "^16.0.3",
     "eslint": "^8.38.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen-react/package.json b/packages/hydrogen-react/package.json
@@ -103,7 +103,7 @@
     "@graphql-codegen/introspection": "3.0.1",
     "@graphql-codegen/typescript": "^3.0.1",
     "@ladle/react": "^2.9.0",
-    "@shopify/generate-docs": "^0.8.10",
+    "@shopify/generate-docs": "^0.11.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",

diff --git a/packages/hydrogen/package.json b/packages/hydrogen/package.json
@@ -66,6 +66,6 @@
     "happy-dom": "^8.9.0",
     "schema-dts": "^1.1.0",
     "vitest": "^0.33.0",
-    "@shopify/generate-docs": "0.10.7"
+    "@shopify/generate-docs": "0.11.1"
   }
 }
diff --git a/packages/hydrogen/src/pagination/Pagination.ts b/packages/hydrogen/src/pagination/Pagination.ts
@@ -1,12 +1,21 @@
-import {createElement, useEffect, useMemo, useRef, useState} from 'react';
+import {
+  createElement,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  type ReactNode,
+  type Ref,
+} from 'react';
 import type {
   Maybe,
   PageInfo,
 } from '@shopify/hydrogen-react/storefront-api-types';
 import {flattenConnection} from '@shopify/hydrogen-react';
 import {
   Link,
-  LinkProps,
+  type LinkProps,
   useNavigation,
   useLocation,
   useNavigate,
@@ -33,9 +42,13 @@ 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'>) => JSX.Element | null;
+  NextLink: (
+    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
+  ) => ReactNode;
   /** 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'>) => JSX.Element | null;
+  PreviousLink: (
+    props: Omit<LinkProps, 'to'> & {ref?: Ref<HTMLAnchorElement>},
+  ) => ReactNode;
   /** 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. */
@@ -66,7 +79,7 @@ type PaginationProps<NodesType> = {
 
 type PaginationRenderProp<NodesType> = (
   props: PaginationInfo<NodesType>,
-) => JSX.Element | null;
+) => ReactNode;
 
 /**
  *
@@ -109,33 +122,41 @@ export function Pagination<NodesType>({
 
   const NextLink = useMemo(
     () =>
-      function NextLink(props: Omit<LinkProps, 'to'>) {
+      forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function NextLink(
+        props,
+        ref,
+      ) {
         return hasNextPage
           ? createElement(Link, {
               preventScrollReset: true,
               ...props,
               to: nextPageUrl,
               state,
               replace: true,
+              ref,
             })
           : null;
-      },
+      }),
     [hasNextPage, nextPageUrl, state],
   );
 
   const PreviousLink = useMemo(
     () =>
-      function PrevLink(props: Omit<LinkProps, 'to'>) {
+      forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(function PrevLink(
+        props,
+        ref,
+      ) {
         return hasPreviousPage
           ? createElement(Link, {
               preventScrollReset: true,
               ...props,
               to: previousPageUrl,
               state,
               replace: true,
+              ref,
             })
           : null;
-      },
+      }),
     [hasPreviousPage, previousPageUrl, state],
   );
 

diff --git a/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx b/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx
@@ -185,11 +185,13 @@ export default function Collection() {
                   hasNextPage={hasNextPage}
                   state={state}
                 />
-                <div
-                  className="flex items-center justify-center mt-6"
-                  ref={ref}
-                >
-                  <Button as={NextLink} variant="secondary" width="full">
+                <div className="flex items-center justify-center mt-6">
+                  <Button
+                    ref={ref}
+                    as={NextLink}
+                    variant="secondary"
+                    width="full"
+                  >
                     {isLoading ? 'Loading...' : 'Load more products'}
                   </Button>
                 </div>

diff --git a/templates/demo-store/package.json b/templates/demo-store/package.json
@@ -46,7 +46,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.2.20",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "cross-env": "^7.0.3",
     "eslint": "^8.20.0",

diff --git a/templates/hello-world/package.json b/templates/hello-world/package.json
@@ -29,7 +29,7 @@
     "@shopify/oxygen-workers-types": "^3.17.3",
     "@shopify/prettier-config": "^1.1.2",
     "@types/eslint": "^8.4.10",
-    "@types/react": "^18.2.20",
+   "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.20.0",
     "eslint-plugin-hydrogen": "0.12.2",