From bceb0a0d1f0c9bd4e3b9e2fb072037696af206d3 Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Fri, 8 Nov 2024 20:03:29 +0100 Subject: [PATCH] fix(pagination-nav): enforce a minimum of 4 items shown (#18015) * fix(pagination-nav): enforce a minimum of 4 items shown * docs(pagination-nav): clarify minimum --- .../react/src/components/PaginationNav/PaginationNav.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx index 4ad8b7afe8d8..61e342121006 100644 --- a/packages/react/src/components/PaginationNav/PaginationNav.tsx +++ b/packages/react/src/components/PaginationNav/PaginationNav.tsx @@ -292,7 +292,7 @@ interface PaginationNavProps disableOverflow?: boolean; /** - * The number of items to be shown. + * The number of items to be shown (minimum of 4 unless props.items < 4). */ itemsShown?: number; @@ -398,8 +398,8 @@ const PaginationNav = React.forwardRef( // re-calculate cuts if props.totalItems or props.itemsShown change useEffect(() => { - setItemsDisplayedOnPage(itemsShown >= 4 ? itemsShown : 4); - setCuts(calculateCuts(currentPage, totalItems, itemsShown)); + setItemsDisplayedOnPage(Math.max(itemsShown, 4)); + setCuts(calculateCuts(currentPage, totalItems, Math.max(itemsShown, 4))); }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps // update cuts if necessary whenever currentPage changes @@ -622,7 +622,7 @@ PaginationNav.propTypes = { disableOverflow: PropTypes.bool, // eslint-disable-line react/prop-types /** - * The number of items to be shown. + * The number of items to be shown (minimum of 4 unless props.items < 4). */ itemsShown: PropTypes.number,