feat(pagination): add forwardedRef for pagination container div (#10239)

* feat(pagination): add forwardedRef for pagination container div * feat(Pagination): forwardRef to pagination next, too * fix(pagination): remove Element in forwardedRef proptype definition * feat(pagination): update public api snapshot * feat: pass forwardedRef to pagination Co-authored-by: Alessandra Davila <[email protected]>
carbon-design-system · Jan 31, 2022 · 430693f · 430693f
1 parent e76c42a
commit 430693f
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination-test.js b/packages/react/src/components/Pagination/Pagination-test.js
@@ -437,5 +437,12 @@ describe('Pagination', () => {
         });
       });
     });
+
+    it('should render with ref', () => {
+      const ref = React.createRef();
+      mount(<Pagination pageSizes={[10]} totalItems={5} forwardedRef={ref} />);
+
+      expect(ref.current).toHaveClass(`${prefix}--pagination`);
+    });
   });
 });
diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js
@@ -283,6 +283,7 @@ export default class Pagination extends Component {
       onChange, // eslint-disable-line no-unused-vars
       page: pageNumber, // eslint-disable-line no-unused-vars
       size,
+      forwardedRef, // eslint-disable-line react/prop-types
       ...other
     } = this.props;
 
@@ -312,7 +313,7 @@ export default class Pagination extends Component {
     const pageSizes = mapPageSizesToObject(_pageSizes);
 
     return (
-      <div className={classNames} {...other}>
+      <div className={classNames} ref={forwardedRef} {...other}>
         <div className={`${prefix}--pagination__left`}>
           <label
             id={`${prefix}-pagination-select-${inputId}-count-label`}

diff --git a/packages/react/src/components/Pagination/next/Pagination.js b/packages/react/src/components/Pagination/next/Pagination.js
@@ -47,31 +47,34 @@ function getPageSize(pageSizes, pageSize) {
   return pageSizes[0].value;
 }
 
-function Pagination({
-  backwardText = 'Previous page',
-  className: customClassName,
-  disabled = false,
-  forwardText = 'Next page',
-  id,
-  isLastPage = false,
-  itemText = (min, max) => `${min}–${max} items`,
-  itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
-  itemsPerPageText = 'Items per page:',
-  onChange,
-  pageNumberText: _pageNumberText = 'Page Number',
-  pageRangeText = (_current, total) =>
-    `of ${total} ${total === 1 ? 'page' : 'pages'}`,
-  page: controlledPage = 1,
-  pageInputDisabled,
-  pageSize: controlledPageSize,
-  pageSizeInputDisabled,
-  pageSizes: controlledPageSizes,
-  pageText = (page) => `page ${page}`,
-  pagesUnknown = false,
-  size,
-  totalItems,
-  ...rest
-}) {
+const Pagination = React.forwardRef(function Pagination(
+  {
+    backwardText = 'Previous page',
+    className: customClassName,
+    disabled = false,
+    forwardText = 'Next page',
+    id,
+    isLastPage = false,
+    itemText = (min, max) => `${min}–${max} items`,
+    itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
+    itemsPerPageText = 'Items per page:',
+    onChange,
+    pageNumberText: _pageNumberText = 'Page Number',
+    pageRangeText = (_current, total) =>
+      `of ${total} ${total === 1 ? 'page' : 'pages'}`,
+    page: controlledPage = 1,
+    pageInputDisabled,
+    pageSize: controlledPageSize,
+    pageSizeInputDisabled,
+    pageSizes: controlledPageSizes,
+    pageText = (page) => `page ${page}`,
+    pagesUnknown = false,
+    size,
+    totalItems,
+    ...rest
+  },
+  ref
+) {
   const prefix = usePrefix();
   const inputId = useFallbackId(id);
   const [pageSizes, setPageSizes] = useState(() => {
@@ -189,7 +192,7 @@ function Pagination({
   }
 
   return (
-    <div className={className} {...rest}>
+    <div className={className} ref={ref} {...rest}>
       <div className={`${prefix}--pagination__left`}>
         <label
           id={`${prefix}-pagination-select-${inputId}-count-label`}
@@ -268,7 +271,7 @@ function Pagination({
       </div>
     </div>
   );
-}
+});
 
 Pagination.propTypes = {
   /**

diff --git a/packages/react/src/components/Pagination/next/__tests__/Pagination-test.js b/packages/react/src/components/Pagination/next/__tests__/Pagination-test.js
@@ -515,4 +515,11 @@ describe('Pagination', () => {
       });
     });
   });
+
+  it('should render with ref', () => {
+    const ref = React.createRef();
+    mount(<Pagination pageSizes={[10]} totalItems={5} ref={ref} />);
+
+    expect(ref.current).toHaveClass(`${prefix}--pagination`);
+  });
 });