From 4d278dee3cf92b1125ee350f09932123ada29d1b Mon Sep 17 00:00:00 2001
From: Kevin See <37549026+kSee04@users.noreply.github.com>
Date: Mon, 11 Dec 2023 12:37:02 -0500
Subject: [PATCH] feat: paginationNav support high page counts (#15219)

* feat: paginationNav support high page counts

This commit updates PaginationNav to support high page counts.
I add a prop to PaginationNav which short circuits logic causing present issue

* Update README.md

* fix: code review

* docs(paginationnav): remove test story

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: Andrea N. Cardona <cardona.n.andrea@gmail.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
---
 .../__snapshots__/PublicAPI-test.js.snap      |  3 ++
 .../components/PaginationNav/PaginationNav.js | 38 ++++++++++++++++++-
 .../PaginationNav/PaginationNav.stories.js    |  6 +++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 2312609ce889..647770e0d9de 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5845,6 +5845,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disableOverflow": Object {
+        "type": "bool",
+      },
       "itemsShown": Object {
         "type": "number",
       },
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js
index 7ad76cb493bf..72820a777b7b 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.js
@@ -119,9 +119,32 @@ function PaginationOverflow({
   fromIndex,
   count,
   onSelect,
+  // eslint-disable-next-line react/prop-types
+  disableOverflow,
   translateWithId: t = translateWithId,
 }) {
   const prefix = usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return (
+      <li className={`${prefix}--pagination-nav__list-item`}>
+        <div className={`${prefix}--pagination-nav__select`}>
+          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+          <select
+            className={`${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`}
+            aria-label={`Select ${t('carbon.pagination-nav.item')} number`}
+            disabled></select>
+          <div className={`${prefix}--pagination-nav__select-icon-wrapper`}>
+            <OverflowMenuHorizontal
+              className={`${prefix}--pagination-nav__select-icon`}
+            />
+          </div>
+        </div>
+      </li>
+    );
+  }
+
   if (count > 1) {
     return (
       <li className={`${prefix}--pagination-nav__list-item`}>
@@ -175,6 +198,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -192,7 +216,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
   );
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
-
+  const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -260,6 +284,10 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
+
   const classNames = classnames(`${prefix}--pagination-nav`, className);
 
   const backwardButtonDisabled = !loop && currentPage === 0;
@@ -297,6 +325,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={startOffset}
           count={cuts.front}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -322,6 +351,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={totalItems - cuts.back - 1}
           count={cuts.back}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -432,6 +462,12 @@ PaginationNav.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes.bool, // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */
diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
index 0519322cbcf2..4ef205ae5f50 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav.stories.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -32,6 +32,7 @@ Playground.args = {
   itemsShown: 10,
   page: 0,
   totalItems: 25,
+  disableOverflow: false,
 };
 
 Playground.argTypes = {
@@ -55,4 +56,9 @@ Playground.argTypes = {
       type: 'number',
     },
   },
+  disableOverflow: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };