From ce2f9a20ebe33754cf49ccd75d1d86d0b438eda4 Mon Sep 17 00:00:00 2001 From: lprnmns Date: Fri, 4 Sep 2026 16:42:31 +0300 Subject: [PATCH 1/2] [material-ui][Pagination] Hide ellipses with zero boundary and sibling counts --- .../src/usePagination/usePagination.js | 40 ++++++++++--------- .../src/usePagination/usePagination.test.js | 8 +--- 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js index 60f00c5ca9b022..6d238d26221d44 100644 --- a/packages/mui-material/src/usePagination/usePagination.js +++ b/packages/mui-material/src/usePagination/usePagination.js @@ -71,28 +71,32 @@ export default function usePagination(props = {}) { const itemList = [ ...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), - ...startPages, + ...(boundaryCount === 0 && siblingCount === 0 + ? [page] + : [ + ...startPages, - // Start ellipsis - // eslint-disable-next-line no-nested-ternary - ...(siblingsStart > boundaryCount + 2 - ? ['start-ellipsis'] - : boundaryCount + 1 < count - boundaryCount - ? [boundaryCount + 1] - : []), + // Start ellipsis + // eslint-disable-next-line no-nested-ternary + ...(siblingsStart > boundaryCount + 2 + ? ['start-ellipsis'] + : boundaryCount + 1 < count - boundaryCount + ? [boundaryCount + 1] + : []), - // Sibling pages - ...range(siblingsStart, siblingsEnd), + // Sibling pages + ...range(siblingsStart, siblingsEnd), - // End ellipsis - // eslint-disable-next-line no-nested-ternary - ...(siblingsEnd < count - boundaryCount - 1 - ? ['end-ellipsis'] - : count - boundaryCount > boundaryCount - ? [count - boundaryCount] - : []), + // End ellipsis + // eslint-disable-next-line no-nested-ternary + ...(siblingsEnd < count - boundaryCount - 1 + ? ['end-ellipsis'] + : count - boundaryCount > boundaryCount + ? [count - boundaryCount] + : []), - ...endPages, + ...endPages, + ]), ...(hideNextButton ? [] : ['next']), ...(showLastButton ? ['last'] : []), ]; diff --git a/packages/mui-material/src/usePagination/usePagination.test.js b/packages/mui-material/src/usePagination/usePagination.test.js index d1605f245497dc..78119f24ac3fff 100644 --- a/packages/mui-material/src/usePagination/usePagination.test.js +++ b/packages/mui-material/src/usePagination/usePagination.test.js @@ -157,13 +157,7 @@ describe('usePagination', () => { items = renderHook(() => usePagination({ count: 11, page: 6, boundaryCount: 0, siblingCount: 0 }), ).result.current.items; - expect(serialize(items)).to.deep.equal([ - 'previous', - 'start-ellipsis', - 6, - 'end-ellipsis', - 'next', - ]); + expect(serialize(items)).to.deep.equal(['previous', 6, 'next']); items = renderHook(() => usePagination({ count: 11, page: 6, boundaryCount: 0, siblingCount: 1 }), From f34b0a1e04f6bfb6de7c5fc992396cff43dd39e7 Mon Sep 17 00:00:00 2001 From: lprnmns Date: Wed, 9 Sep 2026 13:29:01 +0300 Subject: [PATCH 2/2] [material-ui][Pagination] Handle compact pagination edge cases --- packages/mui-material/src/usePagination/usePagination.js | 6 +++++- .../mui-material/src/usePagination/usePagination.test.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/usePagination/usePagination.js b/packages/mui-material/src/usePagination/usePagination.js index 6d238d26221d44..e58a46583c2656 100644 --- a/packages/mui-material/src/usePagination/usePagination.js +++ b/packages/mui-material/src/usePagination/usePagination.js @@ -71,7 +71,11 @@ export default function usePagination(props = {}) { const itemList = [ ...(showFirstButton ? ['first'] : []), ...(hidePrevButton ? [] : ['previous']), - ...(boundaryCount === 0 && siblingCount === 0 + ...(boundaryCount === 0 && + siblingCount === 0 && + page >= 1 && + page <= count && + (siblingsStart > boundaryCount + 2 || siblingsEnd < count - boundaryCount - 1) ? [page] : [ ...startPages, diff --git a/packages/mui-material/src/usePagination/usePagination.test.js b/packages/mui-material/src/usePagination/usePagination.test.js index fdef2afe17412b..c42310dc11c648 100644 --- a/packages/mui-material/src/usePagination/usePagination.test.js +++ b/packages/mui-material/src/usePagination/usePagination.test.js @@ -204,7 +204,7 @@ describe('usePagination', () => { items = renderHook(() => usePagination({ count: 4, page: 1, boundaryCount: 0, siblingCount: 0 }), ).result.current.items; - expect(serialize(items)).to.deep.equal(['previous', 1, 2, 'end-ellipsis', 'next']); + expect(serialize(items)).to.deep.equal(['previous', 1, 'next']); }); it('should stay navigable without previous & next buttons', () => {