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 (
+
+
+ {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+
+
+
+
+
+
+ );
+ }
+
if (count > 1) {
return (
@@ -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',
+ },
+ },
};