@dt-dds/react-pagination 1.0.0-beta.46 → 1.0.0-beta.48

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @dt-ui/react-pagination
 
+## 1.0.0-beta.48
+
+### Patch Changes
+
+- fix: pagination render
+- refactor: backwards and forward pagination
+
+## 1.0.0-beta.47
+
+### Patch Changes
+
+- fix: multi select option styling
+- Updated dependencies
+  - @dt-dds/react-select@1.0.0-beta.97
+
 ## 1.0.0-beta.46
 
 ### Patch Changes

package/dist/index.d.mts

@@ -31,7 +31,15 @@ declare const FIRST_PAGE = 1;
 declare const PAGINATION_BUTTON_SIZES = 24;
 declare const ITEMS_PER_PAGE_WIDTH = 200;
 
-declare const getPageNumbers: (currentPage: number, totalPages: number) => (number | "ellipsis")[];
+interface PageRenderData {
+    shouldRenderFirstPage: boolean;
+    shouldRenderLastPage: boolean;
+    shouldRenderLeftEllipsis: boolean;
+    shouldRenderRightEllipsis: boolean;
+    pages: number[];
+}
+type PaginationDirection = 'FORWARD' | 'BACKWARD';
+declare const getPageNumbers: (currentPage: number, lastPage: number, direction?: PaginationDirection) => PageRenderData;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.d.ts

@@ -31,7 +31,15 @@ declare const FIRST_PAGE = 1;
 declare const PAGINATION_BUTTON_SIZES = 24;
 declare const ITEMS_PER_PAGE_WIDTH = 200;
 
-declare const getPageNumbers: (currentPage: number, totalPages: number) => (number | "ellipsis")[];
+interface PageRenderData {
+    shouldRenderFirstPage: boolean;
+    shouldRenderLastPage: boolean;
+    shouldRenderLeftEllipsis: boolean;
+    shouldRenderRightEllipsis: boolean;
+    pages: number[];
+}
+type PaginationDirection = 'FORWARD' | 'BACKWARD';
+declare const getPageNumbers: (currentPage: number, lastPage: number, direction?: PaginationDirection) => PageRenderData;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.js

@@ -221,35 +221,98 @@ var PaginationNavButton = ({
 PaginationNavButton.displayName = "PaginationNavButton";
 
 // src/utils/getPageNumbers.ts
-var PAGINATION_THRESHOLD = 5;
-var START_BOUNDARY = 3;
-var END_OFFSET = 2;
-var NEIGHBOR_COUNT = 1;
-var getPageNumbers = (currentPage, totalPages) => {
-  if (totalPages <= PAGINATION_THRESHOLD) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
+var getCompactPageNumbers = (firstPage, lastPage) => ({
+  pages: Array.from(
+    { length: Math.max(lastPage - firstPage + 1, 0) },
+    (_, index) => firstPage + index
+  ),
+  shouldRenderFirstPage: false,
+  shouldRenderLastPage: false,
+  shouldRenderLeftEllipsis: false,
+  shouldRenderRightEllipsis: false
+});
+var getForwardPageNumbers = (currentPage, firstPage, lastPage) => {
+  if (currentPage <= firstPage + 1) {
+    return {
+      pages: [firstPage, firstPage + 1, firstPage + 2],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
+  }
+  if (currentPage <= lastPage - 3) {
+    return {
+      pages: [currentPage - 1, currentPage, currentPage + 1],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
   }
-  const showLeftEllipsis = currentPage > START_BOUNDARY;
-  const showRightEllipsis = currentPage < totalPages - END_OFFSET;
-  if (!showLeftEllipsis && showRightEllipsis) {
-    return [1, 2, 3, "ellipsis", totalPages];
+  return {
+    pages: [lastPage - 2, lastPage - 1, lastPage],
+    shouldRenderFirstPage: true,
+    shouldRenderLastPage: false,
+    shouldRenderLeftEllipsis: true,
+    shouldRenderRightEllipsis: false
+  };
+};
+var getBackwardPageNumbers = (currentPage, firstPage, lastPage) => {
+  if (currentPage <= firstPage + 2) {
+    return {
+      pages: [firstPage, firstPage + 1, firstPage + 2],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
   }
-  if (showLeftEllipsis && !showRightEllipsis) {
-    return [1, "ellipsis", totalPages - 2, totalPages - 1, totalPages];
+  if (currentPage >= lastPage - 1) {
+    return {
+      pages: [lastPage - 2, lastPage - 1, lastPage],
+      shouldRenderFirstPage: true,
+      shouldRenderLastPage: false,
+      shouldRenderLeftEllipsis: true,
+      shouldRenderRightEllipsis: false
+    };
+  }
+  return {
+    pages: [currentPage - 1, currentPage, currentPage + 1],
+    shouldRenderFirstPage: true,
+    shouldRenderLastPage: false,
+    shouldRenderLeftEllipsis: true,
+    shouldRenderRightEllipsis: false
+  };
+};
+var getPageNumbers = (currentPage, lastPage, direction = "FORWARD") => {
+  const firstPage = FIRST_PAGE;
+  const cursor = Math.max(Math.min(currentPage, lastPage), firstPage);
+  if (lastPage <= firstPage + 4) {
+    return getCompactPageNumbers(firstPage, lastPage);
+  }
+  if (direction === "BACKWARD") {
+    return getBackwardPageNumbers(cursor, firstPage, lastPage);
+  } else {
+    return getForwardPageNumbers(cursor, firstPage, lastPage);
   }
-  return [
-    1,
-    "ellipsis",
-    currentPage - NEIGHBOR_COUNT,
-    currentPage,
-    currentPage + NEIGHBOR_COUNT,
-    "ellipsis",
-    totalPages
-  ];
 };
 
 // src/Pagination.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var renderPage = (page, isCurrentPage, handleClick) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  PaginationPageButtonStyled,
+  {
+    $isActive: isCurrentPage,
+    "aria-current": isCurrentPage ? "page" : false,
+    "aria-label": `Go to page ${page}`,
+    "data-testid": isCurrentPage ? "pagination-current-page" : `pagination-page-${page}`,
+    onClick: () => handleClick(page),
+    title: `Go to page ${page}`,
+    children: page
+  },
+  page
+);
 var Pagination = ({
   currentPage,
   totalPages,
@@ -262,12 +325,23 @@ var Pagination = ({
   itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
   dataTestId
 }) => {
-  const pageNumbers = (0, import_react.useMemo)(
-    () => getPageNumbers(currentPage, totalPages),
-    [currentPage, totalPages]
-  );
+  const LAST_PAGE = totalPages;
+  const previousPageRef = (0, import_react.useRef)(currentPage);
+  const paginationDirection = currentPage < previousPageRef.current ? "BACKWARD" : "FORWARD";
+  (0, import_react.useEffect)(() => {
+    if (currentPage < 2 || currentPage > LAST_PAGE - 1) {
+      previousPageRef.current = currentPage;
+    }
+  }, [currentPage, LAST_PAGE]);
+  const isLastPage = currentPage === LAST_PAGE;
   const isFirstPage = currentPage === FIRST_PAGE;
-  const isLastPage = currentPage === totalPages;
+  const {
+    pages,
+    shouldRenderFirstPage,
+    shouldRenderLastPage,
+    shouldRenderLeftEllipsis,
+    shouldRenderRightEllipsis
+  } = getPageNumbers(currentPage, LAST_PAGE, paginationDirection);
   const itemsBeforeCurrentPage = (currentPage - FIRST_PAGE) * itemsPerPage;
   const remainingItems = Math.max(
     0,
@@ -277,12 +351,12 @@ var Pagination = ({
   const hasInfoSection = showItemsPerPage || showItemsInfo && totalItems !== void 0;
   const handlePageChange = (0, import_react.useCallback)(
     (page) => {
-      const canNavigateToPage = page !== currentPage && page >= FIRST_PAGE && page <= totalPages;
+      const canNavigateToPage = page !== currentPage && page >= FIRST_PAGE && page <= LAST_PAGE;
       if (canNavigateToPage) {
         onPageChange(page);
       }
     },
-    [currentPage, totalPages, onPageChange]
+    [currentPage, LAST_PAGE, onPageChange]
   );
   const handleItemsPerPageChange = (0, import_react.useCallback)(
     (value) => {
@@ -351,31 +425,27 @@ var Pagination = ({
           tooltipLabel: "Previous page"
         }
       ),
-      pageNumbers.map((page) => {
-        if (page === "ellipsis") {
-          return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            TruncationTextStyled,
-            {
-              "data-testid": "pagination-ellipsis",
-              children: "..."
-            },
-            `ellipsis-${page}`
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          PaginationPageButtonStyled,
-          {
-            $isActive: page === currentPage,
-            "aria-current": page === currentPage ? "page" : void 0,
-            "aria-label": `Go to page ${page}`,
-            "data-testid": page === currentPage ? "pagination-current-page" : `pagination-page-${page}`,
-            onClick: () => handlePageChange(page),
-            title: `Go to page ${page}`,
-            children: page
-          },
-          page
-        );
-      }),
+      shouldRenderFirstPage ? renderPage(FIRST_PAGE, isFirstPage, handlePageChange) : null,
+      shouldRenderLeftEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        TruncationTextStyled,
+        {
+          "data-testid": "pagination-ellipsis",
+          children: "..."
+        },
+        "ellipsis-left"
+      ) : null,
+      pages.map(
+        (page) => renderPage(page, page === currentPage, handlePageChange)
+      ),
+      shouldRenderRightEllipsis ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        TruncationTextStyled,
+        {
+          "data-testid": "pagination-ellipsis",
+          children: "..."
+        },
+        "ellipsis-right"
+      ) : null,
+      shouldRenderLastPage ? renderPage(LAST_PAGE, isLastPage, handlePageChange) : null,
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         PaginationNavButton,
         {

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/Pagination.tsx
-import { useMemo, useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { Select } from "@dt-dds/react-select";
 
 // src/components/PaginationNavButton/PaginationNavButton.tsx
@@ -180,35 +180,98 @@ var PaginationNavButton = ({
 PaginationNavButton.displayName = "PaginationNavButton";
 
 // src/utils/getPageNumbers.ts
-var PAGINATION_THRESHOLD = 5;
-var START_BOUNDARY = 3;
-var END_OFFSET = 2;
-var NEIGHBOR_COUNT = 1;
-var getPageNumbers = (currentPage, totalPages) => {
-  if (totalPages <= PAGINATION_THRESHOLD) {
-    return Array.from({ length: totalPages }, (_, i) => i + 1);
+var getCompactPageNumbers = (firstPage, lastPage) => ({
+  pages: Array.from(
+    { length: Math.max(lastPage - firstPage + 1, 0) },
+    (_, index) => firstPage + index
+  ),
+  shouldRenderFirstPage: false,
+  shouldRenderLastPage: false,
+  shouldRenderLeftEllipsis: false,
+  shouldRenderRightEllipsis: false
+});
+var getForwardPageNumbers = (currentPage, firstPage, lastPage) => {
+  if (currentPage <= firstPage + 1) {
+    return {
+      pages: [firstPage, firstPage + 1, firstPage + 2],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
   }
-  const showLeftEllipsis = currentPage > START_BOUNDARY;
-  const showRightEllipsis = currentPage < totalPages - END_OFFSET;
-  if (!showLeftEllipsis && showRightEllipsis) {
-    return [1, 2, 3, "ellipsis", totalPages];
+  if (currentPage <= lastPage - 3) {
+    return {
+      pages: [currentPage - 1, currentPage, currentPage + 1],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
   }
-  if (showLeftEllipsis && !showRightEllipsis) {
-    return [1, "ellipsis", totalPages - 2, totalPages - 1, totalPages];
+  return {
+    pages: [lastPage - 2, lastPage - 1, lastPage],
+    shouldRenderFirstPage: true,
+    shouldRenderLastPage: false,
+    shouldRenderLeftEllipsis: true,
+    shouldRenderRightEllipsis: false
+  };
+};
+var getBackwardPageNumbers = (currentPage, firstPage, lastPage) => {
+  if (currentPage <= firstPage + 2) {
+    return {
+      pages: [firstPage, firstPage + 1, firstPage + 2],
+      shouldRenderFirstPage: false,
+      shouldRenderLastPage: true,
+      shouldRenderLeftEllipsis: false,
+      shouldRenderRightEllipsis: true
+    };
+  }
+  if (currentPage >= lastPage - 1) {
+    return {
+      pages: [lastPage - 2, lastPage - 1, lastPage],
+      shouldRenderFirstPage: true,
+      shouldRenderLastPage: false,
+      shouldRenderLeftEllipsis: true,
+      shouldRenderRightEllipsis: false
+    };
+  }
+  return {
+    pages: [currentPage - 1, currentPage, currentPage + 1],
+    shouldRenderFirstPage: true,
+    shouldRenderLastPage: false,
+    shouldRenderLeftEllipsis: true,
+    shouldRenderRightEllipsis: false
+  };
+};
+var getPageNumbers = (currentPage, lastPage, direction = "FORWARD") => {
+  const firstPage = FIRST_PAGE;
+  const cursor = Math.max(Math.min(currentPage, lastPage), firstPage);
+  if (lastPage <= firstPage + 4) {
+    return getCompactPageNumbers(firstPage, lastPage);
+  }
+  if (direction === "BACKWARD") {
+    return getBackwardPageNumbers(cursor, firstPage, lastPage);
+  } else {
+    return getForwardPageNumbers(cursor, firstPage, lastPage);
   }
-  return [
-    1,
-    "ellipsis",
-    currentPage - NEIGHBOR_COUNT,
-    currentPage,
-    currentPage + NEIGHBOR_COUNT,
-    "ellipsis",
-    totalPages
-  ];
 };
 
 // src/Pagination.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var renderPage = (page, isCurrentPage, handleClick) => /* @__PURE__ */ jsx2(
+  PaginationPageButtonStyled,
+  {
+    $isActive: isCurrentPage,
+    "aria-current": isCurrentPage ? "page" : false,
+    "aria-label": `Go to page ${page}`,
+    "data-testid": isCurrentPage ? "pagination-current-page" : `pagination-page-${page}`,
+    onClick: () => handleClick(page),
+    title: `Go to page ${page}`,
+    children: page
+  },
+  page
+);
 var Pagination = ({
   currentPage,
   totalPages,
@@ -221,12 +284,23 @@ var Pagination = ({
   itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS,
   dataTestId
 }) => {
-  const pageNumbers = useMemo(
-    () => getPageNumbers(currentPage, totalPages),
-    [currentPage, totalPages]
-  );
+  const LAST_PAGE = totalPages;
+  const previousPageRef = useRef(currentPage);
+  const paginationDirection = currentPage < previousPageRef.current ? "BACKWARD" : "FORWARD";
+  useEffect(() => {
+    if (currentPage < 2 || currentPage > LAST_PAGE - 1) {
+      previousPageRef.current = currentPage;
+    }
+  }, [currentPage, LAST_PAGE]);
+  const isLastPage = currentPage === LAST_PAGE;
   const isFirstPage = currentPage === FIRST_PAGE;
-  const isLastPage = currentPage === totalPages;
+  const {
+    pages,
+    shouldRenderFirstPage,
+    shouldRenderLastPage,
+    shouldRenderLeftEllipsis,
+    shouldRenderRightEllipsis
+  } = getPageNumbers(currentPage, LAST_PAGE, paginationDirection);
   const itemsBeforeCurrentPage = (currentPage - FIRST_PAGE) * itemsPerPage;
   const remainingItems = Math.max(
     0,
@@ -236,12 +310,12 @@ var Pagination = ({
   const hasInfoSection = showItemsPerPage || showItemsInfo && totalItems !== void 0;
   const handlePageChange = useCallback(
     (page) => {
-      const canNavigateToPage = page !== currentPage && page >= FIRST_PAGE && page <= totalPages;
+      const canNavigateToPage = page !== currentPage && page >= FIRST_PAGE && page <= LAST_PAGE;
       if (canNavigateToPage) {
         onPageChange(page);
       }
     },
-    [currentPage, totalPages, onPageChange]
+    [currentPage, LAST_PAGE, onPageChange]
   );
   const handleItemsPerPageChange = useCallback(
     (value) => {
@@ -310,31 +384,27 @@ var Pagination = ({
           tooltipLabel: "Previous page"
         }
       ),
-      pageNumbers.map((page) => {
-        if (page === "ellipsis") {
-          return /* @__PURE__ */ jsx2(
-            TruncationTextStyled,
-            {
-              "data-testid": "pagination-ellipsis",
-              children: "..."
-            },
-            `ellipsis-${page}`
-          );
-        }
-        return /* @__PURE__ */ jsx2(
-          PaginationPageButtonStyled,
-          {
-            $isActive: page === currentPage,
-            "aria-current": page === currentPage ? "page" : void 0,
-            "aria-label": `Go to page ${page}`,
-            "data-testid": page === currentPage ? "pagination-current-page" : `pagination-page-${page}`,
-            onClick: () => handlePageChange(page),
-            title: `Go to page ${page}`,
-            children: page
-          },
-          page
-        );
-      }),
+      shouldRenderFirstPage ? renderPage(FIRST_PAGE, isFirstPage, handlePageChange) : null,
+      shouldRenderLeftEllipsis ? /* @__PURE__ */ jsx2(
+        TruncationTextStyled,
+        {
+          "data-testid": "pagination-ellipsis",
+          children: "..."
+        },
+        "ellipsis-left"
+      ) : null,
+      pages.map(
+        (page) => renderPage(page, page === currentPage, handlePageChange)
+      ),
+      shouldRenderRightEllipsis ? /* @__PURE__ */ jsx2(
+        TruncationTextStyled,
+        {
+          "data-testid": "pagination-ellipsis",
+          children: "..."
+        },
+        "ellipsis-right"
+      ) : null,
+      shouldRenderLastPage ? renderPage(LAST_PAGE, isLastPage, handlePageChange) : null,
       /* @__PURE__ */ jsx2(
         PaginationNavButton,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-pagination",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.48",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -24,7 +24,7 @@
     "@dt-dds/react-typography": "1.0.0-beta.50",
     "@dt-dds/react-icon": "1.0.0-beta.63",
     "@dt-dds/icons": "1.0.0-beta.6",
-    "@dt-dds/react-select": "1.0.0-beta.96",
+    "@dt-dds/react-select": "1.0.0-beta.97",
     "@dt-dds/react-tooltip": "1.0.0-beta.69",
     "@dt-dds/themes": "1.0.0-beta.14"
   },