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>
carbon-design-system · Aug 12, 2020 · 3603c06 · 3603c06
1 parent c057585
commit 3603c06
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git 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
@@ -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;