feat(Pagination): Wrap Pagination sub-components in forward refs (#6306)

* feat(Pagination): Add ref forwarding to children components

* better types on ref

src/PageItem.tsx

@@ -74,14 +74,14 @@ PageItem.displayName = 'PageItem';
 export default PageItem;
 
 function createButton(name: string, defaultValue: ReactNode, label = name) {
-  function Button({ children, ...props }: PageItemProps) {
-    return (
-      <PageItem {...props}>
+  const Button = React.forwardRef(
+    ({ children, ...props }: PageItemProps, ref) => (
+      <PageItem {...props} ref={ref}>
         <span aria-hidden="true">{children || defaultValue}</span>
         <span className="visually-hidden">{label}</span>
       </PageItem>
-    );
-  }
+    ),
+  );
 
   Button.displayName = name;
 

test/PaginationSpec.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import React from 'react';
 
 import Pagination from '../src/Pagination';
 
@@ -20,4 +21,15 @@ describe('<Pagination>', () => {
     const paginationElem = getByTestId('test');
     paginationElem.classList.contains('pagination-sm').should.be.true;
   });
+
+  it('sub-compontents should forward ref correctly', () => {
+    const ref = React.createRef<HTMLLIElement>();
+    render(
+      <Pagination data-testid="test" size="sm">
+        Item content
+        <Pagination.Next ref={ref} data-testid="next" />
+      </Pagination>,
+    );
+    ref.current?.tagName.toLowerCase().should.be.equal('li');
+  });
 });