@hyphen/hyphen-components 2.13.0 → 2.14.0

package/dist/components/Pagination/Pagination.utilities.d.ts

@@ -2,10 +2,9 @@ export interface Page {
     isPage: boolean;
     pageNumber: number;
 }
-export declare const generatePages: (pageRange: number, pageTotal: number, activePage: number, numberOfPagesDisplayed: number) => Page[];
-export declare const generatePageRange: (numberOfPagesDisplayed: number, pageTotal: number) => number;
+export declare const generatePages: (pageTotal: number, activePage: number, numberOfPagesDisplayed: number) => Page[];
 export declare const generatePageTotal: (totalItemsCount: number, itemsPerPage: number) => number;
 export declare const generateActiveListRange: (activePage: number, totalItemsCount: number, itemsPerPage: number) => {
-    first?: number;
-    last?: number;
+    first: number;
+    last: number;
 };

package/dist/css/utilities.css

@@ -5253,6 +5253,10 @@
   display: table-cell;
 }
 
+.display-contents {
+  display: contents;
+}
+
 @media (min-width: 680px) {
   .display-inherit-tablet {
     display: inherit;
@@ -5281,6 +5285,9 @@
   .display-table-cell-tablet {
     display: table-cell;
   }
+  .display-contents-tablet {
+    display: contents;
+  }
 }
 @media (min-width: 992px) {
   .display-inherit-desktop {
@@ -5310,6 +5317,9 @@
   .display-table-cell-desktop {
     display: table-cell;
   }
+  .display-contents-desktop {
+    display: contents;
+  }
 }
 @media (min-width: 1280px) {
   .display-inherit-hd {
@@ -5339,6 +5349,9 @@
   .display-table-cell-hd {
     display: table-cell;
   }
+  .display-contents-hd {
+    display: contents;
+  }
 }
 .flex-auto {
   flex: 1 1 auto;

package/dist/hyphen-components.cjs.development.js

@@ -3387,20 +3387,17 @@ var Modal = /*#__PURE__*/function () {
   return Modal;
 }();
 
-var generatePages = function generatePages(pageRange, pageTotal, activePage, numberOfPagesDisplayed) {
-  var _pages;
+var generatePages = function generatePages(pageTotal, activePage, numberOfPagesDisplayed) {
+  var pageRange = Math.min(pageTotal, Math.max(1, numberOfPagesDisplayed));
   var pages = [];
   var startingPage = 1;
   var endingPage = pageRange;
-  if (pageTotal <= pageRange) {
-    startingPage = 1;
-    endingPage = pageRange;
-  } else if (activePage + numberOfPagesDisplayed > pageTotal) {
-    startingPage = pageTotal - (numberOfPagesDisplayed - 1);
-    endingPage = startingPage + (numberOfPagesDisplayed - 1);
-  } else if (activePage > numberOfPagesDisplayed && activePage + numberOfPagesDisplayed <= pageTotal) {
-    startingPage = activePage - Math.floor(numberOfPagesDisplayed / 2);
-    endingPage = startingPage + (numberOfPagesDisplayed - 1);
+  if (activePage + Math.floor(pageRange / 2) >= pageTotal) {
+    startingPage = Math.max(1, pageTotal - pageRange + 1);
+    endingPage = pageTotal;
+  } else {
+    startingPage = Math.max(1, activePage - Math.floor(pageRange / 2));
+    endingPage = Math.min(pageTotal, startingPage + pageRange - 1);
   }
   for (var i = startingPage; i <= endingPage; i += 1) {
     pages.push({
@@ -3408,36 +3405,32 @@ var generatePages = function generatePages(pageRange, pageTotal, activePage, num
       isPage: true
     });
   }
-  if (pageTotal > ((_pages = pages[pages.length - 1]) == null ? void 0 : _pages.pageNumber)) {
-    var secondToLastPage = pageTotal !== activePage + numberOfPagesDisplayed ? activePage + numberOfPagesDisplayed : pageTotal - 1;
-    // only add ellipsis if there are more than 0 pages between the final page and the rest of the pages
-    if (pageTotal > numberOfPagesDisplayed + 1) {
+  // Handling ellipsis for overflow pages
+  if (endingPage < pageTotal) {
+    if (endingPage < pageTotal - 1) {
       pages.push({
-        pageNumber: secondToLastPage,
+        pageNumber: -1,
         isPage: false
-      });
+      }); // represents ellipsis
     }
     pages.push({
       pageNumber: pageTotal,
       isPage: true
     });
   }
-  if (activePage > numberOfPagesDisplayed) {
-    var threeDotsPage = activePage - numberOfPagesDisplayed > 1 ? activePage - numberOfPagesDisplayed : activePage - numberOfPagesDisplayed + 1;
+  if (startingPage > 1) {
     pages.unshift({
       pageNumber: 1,
       isPage: true
-    }, {
-      pageNumber: threeDotsPage,
-      isPage: false
     });
+    if (startingPage > 2) {
+      pages.splice(1, 0, {
+        pageNumber: -1,
+        isPage: false
+      }); // represents ellipsis
+    }
   }
-  return [].concat(pages);
-};
-// Return the true page range in cases
-// where number of pages wanted for display is larger than the actual page total.
-var generatePageRange = function generatePageRange(numberOfPagesDisplayed, pageTotal) {
-  return numberOfPagesDisplayed > pageTotal ? pageTotal : numberOfPagesDisplayed;
+  return pages;
 };
 var generatePageTotal = function generatePageTotal(totalItemsCount, itemsPerPage) {
   return Math.ceil(totalItemsCount / itemsPerPage);
@@ -3446,19 +3439,12 @@ var generatePageTotal = function generatePageTotal(totalItemsCount, itemsPerPage
 // E.G: if the items per page is 20 and we are on page 1, it will return:
 // { first: 1, last: 20 }
 var generateActiveListRange = function generateActiveListRange(activePage, totalItemsCount, itemsPerPage) {
-  var activePageRange = {};
-  var pageTotal = generatePageTotal(totalItemsCount, itemsPerPage);
-  if (activePage === 1) {
-    activePageRange.first = 1;
-    activePageRange.last = totalItemsCount > itemsPerPage ? itemsPerPage : totalItemsCount;
-  } else if (activePage < pageTotal) {
-    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
-    activePageRange.last = activePage * itemsPerPage;
-  } else {
-    activePageRange.first = activePage * itemsPerPage - (itemsPerPage - 1);
-    activePageRange.last = totalItemsCount;
-  }
-  return activePageRange;
+  var first = (activePage - 1) * itemsPerPage + 1;
+  var last = Math.min(activePage * itemsPerPage, totalItemsCount);
+  return {
+    first: first,
+    last: last
+  };
 };
 
 var Pagination = function Pagination(_ref) {
@@ -3481,23 +3467,31 @@ var Pagination = function Pagination(_ref) {
     _ref$prevPageText = _ref.prevPageText,
     prevPageText = _ref$prevPageText === void 0 ? 'Previous' : _ref$prevPageText;
   var pageTotal = React.useMemo(function () {
+    if (itemsPerPage <= 0) return 1;
     return generatePageTotal(totalItemsCount, itemsPerPage);
   }, [totalItemsCount, itemsPerPage]);
-  var pageRange = React.useMemo(function () {
-    return generatePageRange(numberOfPagesDisplayed, pageTotal);
-  }, [numberOfPagesDisplayed, pageTotal]);
+  var validActivePage = Math.max(1, Math.min(activePage, pageTotal));
   var activeListRange = React.useMemo(function () {
-    return generateActiveListRange(activePage, totalItemsCount, itemsPerPage);
-  }, [activePage, totalItemsCount, itemsPerPage]);
+    return generateActiveListRange(validActivePage, totalItemsCount, itemsPerPage);
+  }, [validActivePage, totalItemsCount, itemsPerPage]);
   var pages = React.useMemo(function () {
-    return generatePages(pageRange, pageTotal, activePage, numberOfPagesDisplayed);
-  }, [pageRange, pageTotal, activePage, numberOfPagesDisplayed]);
+    return generatePages(pageTotal, validActivePage, numberOfPagesDisplayed);
+  }, [pageTotal, validActivePage, numberOfPagesDisplayed]);
+  var paginationClassNames = React.useMemo(function () {
+    return classNames(className);
+  }, [className]);
+  var activeListRangeText = React.useMemo(function () {
+    if (totalItemsCount === 0) {
+      return 'No items to display';
+    }
+    return "Showing " + activeListRange.first + "-" + activeListRange.last + " of " + totalItemsCount;
+  }, [activeListRange, totalItemsCount]);
   return React.createElement(Box, {
     as: "nav",
     direction: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    className: classNames(className)
+    className: paginationClassNames
   }, React.createElement(Box, {
     direction: "row",
     justifyContent: {
@@ -3511,18 +3505,17 @@ var Pagination = function Pagination(_ref) {
   }, React.createElement(Button, {
     variant: "secondary",
     size: isCompact ? 'sm' : 'md',
-    isDisabled: activePage === 1,
+    isDisabled: validActivePage === 1,
     onClick: function onClick() {
-      return onChange(activePage - 1);
+      return onChange(validActivePage - 1);
     }
   }, prevPageText), arePagesVisible && React.createElement(Box, {
     direction: "row",
     gap: "2xs"
-  }, pages.map(function (_ref2) {
+  }, pages.map(function (_ref2, index) {
     var pageNumber = _ref2.pageNumber,
       isPage = _ref2.isPage;
-    console.log(activePage, pageNumber, isPage);
-    return React.createElement(Button, {
+    return isPage ? React.createElement(Button, {
       key: pageNumber,
       onClick: function onClick() {
         return onChange(pageNumber);
@@ -3533,13 +3526,21 @@ var Pagination = function Pagination(_ref) {
         minWidth: isCompact ? '33px' : '42px'
       },
       className: className
-    }, isPage ? pageNumber : '...');
+    }, pageNumber) : React.createElement(Box, {
+      key: "ellipsis-" + index,
+      style: {
+        display: 'flexk',
+        minWidth: isCompact ? '33px' : '42px',
+        justifyContent: 'space-around',
+        alignItems: 'center'
+      }
+    }, "...");
   })), React.createElement(Button, {
     variant: "secondary",
     size: isCompact ? 'sm' : 'md',
-    isDisabled: activePage === pageTotal,
+    isDisabled: validActivePage === pageTotal,
     onClick: function onClick() {
-      return onChange(activePage + 1);
+      return onChange(validActivePage + 1);
     }
   }, nextPageText)), React.createElement(Box, {
     as: "p",
@@ -3548,7 +3549,7 @@ var Pagination = function Pagination(_ref) {
       tablet: 'block'
     },
     fontSize: isCompact ? 'sm' : 'md'
-  }, isTotalVisible && "Showing " + activeListRange.first + "-" + activeListRange.last + " of " + totalItemsCount));
+  }, isTotalVisible && activeListRangeText));
 };
 
 var styles$6 = {"slider":"RangeInput-module_slider__Z6D68","disabled":"RangeInput-module_disabled__gyu72"};