[Pagination] unexpected behavior when setting boundaryCount and siblingCount

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

1.) When i set the boundaryCount={0} just to show the current page and use the prev and next buttons. The current page is just displayed on the first page or last but isnt displayed when you navigate to any other page.

2.) When i set the boundaryCount={1} and the siblingCount={1} the pages that are shown add up. a) For example when the current page is on 5 from 10 The shown pages are < 1 … 4 [5] 6 … 10 > thats right. b) When you are at page 4 it looks like this < 1 2 3 [4] 5 … 10 > and should be < 1 … 3 [4] 5 …>. c) When you are at page 1 it looks like this < [1] 2 3 4 5 … 10 > and from my opinion should be like this < [1] 2 … 10 >

Expected Behavior 🤔

1.) Show the current page any time 😃.

2.) a) is ok how it is b) should be < 1 … 3 [4] 5 …> c) should be < [1] 2 … 10 >

Steps to Reproduce 🕹

I used the code Sandbox from the Examples and just changed the Props on the component.

https://codesandbox.io/s/bn7nw and added the props like described above. For 1) boundaryCount={0} For 2) boundaryCount={1} and the siblingCount={1}

Context 🔦

Its a Navigation for a Responsive Website with Page Results that need Filters,Limits and navigation. Because its for Phones too it needs to be small sometimes.

Your Environment 🌎

`npx @material-ui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

[oliviertassinari]

So, I had a look at the issue. It turns out that we have already fixed most of the issue in v5: https://codesandbox.io/s/material-demo-forked-2nkvf?file=/demo.js.

Having a second thought about it, I would propose that for:

<Pagination boundaryCount={0} siblingCount={0} count={10}

It renders:

Instead of:

It allows to have a denser display, the dots don’t really add much. I could make it work with this diff:

index 4f15278cb1..f92c0bf84f 100644
--- a/packages/material-ui/src/usePagination/usePagination.js
+++ b/packages/material-ui/src/usePagination/usePagination.js
@@ -65,33 +65,41 @@ export default function usePagination(props = {}) {
     endPages.length > 0 ? endPages[0] - 2 : count - 1,
   );

-  // Basic list of items to render
-  // e.g. itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
-  const itemList = [
-    ...(showFirstButton ? ['first'] : []),
-    ...(hidePrevButton ? [] : ['previous']),
-    ...startPages,
-
-    // Start ellipsis
+  // Start ellipsis
+  const startEllipsis =
     // eslint-disable-next-line no-nested-ternary
-    ...(siblingsStart > boundaryCount + 2
+    siblingsStart > boundaryCount + 2
       ? ['start-ellipsis']
       : boundaryCount + 1 < count - boundaryCount
       ? [boundaryCount + 1]
-      : []),
-
-    // Sibling pages
-    ...range(siblingsStart, siblingsEnd),
+      : [];

-    // End ellipsis
+  // End ellipsis
+  const endEllipsis =
     // eslint-disable-next-line no-nested-ternary
-    ...(siblingsEnd < count - boundaryCount - 1
+    siblingsEnd < count - boundaryCount - 1
       ? ['end-ellipsis']
       : count - boundaryCount > boundaryCount
       ? [count - boundaryCount]
-      : []),
+      : [];

-    ...endPages,
+  const body =
+    boundaryCount === 0 && siblingCount === 0
+      ? [page]
+      : [
+          ...startPages,
+          ...startEllipsis,
+          ...range(siblingsStart, siblingsEnd),
+          ...endEllipsis,
+          ...endPages,
+        ];
+
+  // Basic list of items to render
+  // e.g. itemList = ['first', 'previous', 1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10, 'next', 'last']
+  const itemList = [
+    ...(showFirstButton ? ['first'] : []),
+    ...(hidePrevButton ? [] : ['previous']),
+    ...body,
     ...(hideNextButton ? [] : ['next']),
     ...(showLastButton ? ['last'] : []),
   ];

Should we move forward with it?

[oliviertassinari]

@fayzzzm What’s the link with this issue? I don’t think that the core logic should care about float. However, we could introduce a custom integer prop-type, we have a couple of other cases where PropTypes.number isn’t ideal. If you want to work on it, contribution welcome 👍