From 3603c060b8168eddef1db23a666f78d78e01ecff Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Wed, 12 Aug 2020 03:12:15 +0200
Subject: [PATCH] fix(PaginationNav): add forwardRef (#6647)

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  2 ++
 .../components/PaginationNav/PaginationNav.js | 29 +++++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 8afa945eb93d..a4923da640e9 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4138,6 +4138,7 @@ Map {
     },
   },
   "PaginationNav" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -4161,6 +4162,7 @@ Map {
         "type": "func",
       },
     },
+    "render": [Function],
   },
   "PrimaryButton" => Object {},
   "ProgressIndicator" => Object {
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js
index 0561b6368215..f72ce69c39a1 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.js
@@ -172,16 +172,19 @@ function PaginationOverflow({
   return null;
 }
 
-export default function PaginationNav({
-  className,
-  onChange = () => {},
-  totalItems,
-  itemsShown = 10,
-  page = 0,
-  loop = false,
-  translateWithId: t = translateWithId,
-  ...rest
-}) {
+const PaginationNav = React.forwardRef(function PaginationNav(
+  {
+    className,
+    onChange = () => {},
+    totalItems,
+    itemsShown = 10,
+    page = 0,
+    loop = false,
+    translateWithId: t = translateWithId,
+    ...rest
+  },
+  ref
+) {
   const [currentPage, setCurrentPage] = useState(page);
   const [itemsThatFit, setItemsThatFit] = useState(
     itemsShown >= 4 ? itemsShown : 4
@@ -266,7 +269,7 @@ export default function PaginationNav({
   const startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
 
   return (
-    <nav className={classNames} {...rest} aria-label="pagination">
+    <nav className={classNames} ref={ref} {...rest} aria-label="pagination">
       <ul className={`${prefix}--pagination-nav__list`}>
         <DirectionButton
           direction="backward"
@@ -353,7 +356,7 @@ export default function PaginationNav({
       </div>
     </nav>
   );
-}
+});
 
 DirectionButton.propTypes = {
   /**
@@ -460,3 +463,5 @@ PaginationNav.propTypes = {
    */
   translateWithId: PropTypes.func,
 };
+
+export default PaginationNav;