@sproutsocial/seeds-react-pagination 0.1.28 → 0.1.31

package/src/Pagination.tsx

@@ -1,210 +1,17 @@
-import * as React from "react";
-import { Select } from "@sproutsocial/seeds-react-select";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-import type { TypePaginationConfig } from "./PaginationTypes";
-import {
-  StyledPaginationContainer,
-  StyledPaginationControls,
-  StyledPaginationInfo,
-  StyledPageSizeSelector,
-  StyledPageButtons,
-  StyledPaginationButton,
-} from "./styles";
-
-interface PaginationProps {
-  paginationConfig: TypePaginationConfig;
-  currentPageIndex: number;
-  pageSize: number;
-  totalRows: number;
-  onPageChange: (pageIndex: number) => void;
-  onPageSizeChange: (pageSize: number) => void;
-}
-
-export const Pagination = ({
-  paginationConfig,
-  currentPageIndex,
-  pageSize,
-  totalRows,
-  onPageChange,
-  onPageSizeChange,
-}: PaginationProps) => {
-  const { displayType, pageSizeOptions, tableCountFunction } = paginationConfig;
-
-  // Calculate pagination values
-  const totalPages = Math.ceil(totalRows / pageSize);
-  const currentPage = currentPageIndex + 1; // Convert 0-based to 1-based for display
-  const startRow = totalRows === 0 ? 0 : currentPageIndex * pageSize + 1;
-  const endRow = Math.min((currentPageIndex + 1) * pageSize, totalRows);
-
-  const canGoPrevious = currentPageIndex > 0;
-  const canGoNext = currentPageIndex < totalPages - 1;
-
-  const handlePrevious = () => {
-    if (canGoPrevious) {
-      onPageChange(currentPageIndex - 1);
-    }
-  };
-
-  const handleNext = () => {
-    if (canGoNext) {
-      onPageChange(currentPageIndex + 1);
-    }
-  };
-
-  const handlePageSizeChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
-    const newPageSize = Number(e.currentTarget.value);
-    onPageSizeChange(newPageSize);
-    // Reset to first page when page size changes
-    onPageChange(0);
-  };
-
-  // Generate page number buttons using web-app-core's algorithm
-  const getPageNumbers = () => {
-    const pages: (number | string)[] = [];
-    const size = paginationConfig.size || "default";
-
-    // Configuration for how many pages to show around current page
-    const NUM_PAGE_LOWER = size === "mini" ? 0 : 1;
-    const NUM_PAGE_UPPER = size === "mini" ? 0 : 2;
-
-    // If number of pages is small enough, show all the page tokens without ellipsis
-    if (totalPages <= 5 + NUM_PAGE_LOWER + NUM_PAGE_UPPER) {
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Add first page
-      pages.push(1);
-
-      // Add ellipsis at the beginning if needed
-      if (currentPage > 3 + NUM_PAGE_LOWER) {
-        pages.push("...");
-      }
-
-      // Add pages in the middle
-      let start: number;
-      let end: number; // inclusive index
-
-      // If near beginning - Show number of pages before ending ellipsis
-      if (currentPage <= 3 + NUM_PAGE_LOWER) {
-        start = 2;
-        end = 3 + NUM_PAGE_LOWER + NUM_PAGE_UPPER;
-      } else if (currentPage > totalPages - (3 + NUM_PAGE_UPPER)) {
-        // If near end - Show number of pages after starting ellipsis
-        start = totalPages - (2 + NUM_PAGE_LOWER + NUM_PAGE_UPPER);
-        end = totalPages - 1;
-      } else {
-        // If in the middle - Show number of pages between two ellipses
-        start = currentPage - NUM_PAGE_LOWER;
-        end = currentPage + NUM_PAGE_UPPER;
-      }
-
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-
-      // Add a final ellipsis if necessary
-      if (currentPage < totalPages - (2 + NUM_PAGE_UPPER)) {
-        pages.push("...");
-      }
-
-      // Add the last page number
-      pages.push(totalPages);
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  if (totalPages <= 1 && !pageSizeOptions) {
-    // No pagination needed if only one page and no page size options
-    return null;
-  }
-
-  return (
-    <StyledPaginationContainer>
-      <StyledPaginationInfo>
-        {tableCountFunction({
-          startNum: startRow,
-          endNum: endRow,
-          totalRowCount: totalRows,
-        })}
-      </StyledPaginationInfo>
-      {/* Page size selector */}
-      {pageSizeOptions && displayType === "dropdown" && (
-        <StyledPageSizeSelector>
-          <Select
-            id="page-size-select"
-            name="page-size"
-            value={String(pageSize)}
-            onChange={handlePageSizeChange}
-            ariaLabel="Rows per page"
-            size="small"
-          >
-            {pageSizeOptions.map((size) => (
-              <option key={size} value={size}>
-                {size} per page
-              </option>
-            ))}
-          </Select>
-        </StyledPageSizeSelector>
-      )}
-
-      {/* TODO: Add inline page size selector for displayType === 'inline' */}
-
-      {/* Page navigation controls */}
-      {totalPages > 1 && (
-        <StyledPaginationControls>
-          <StyledPageButtons>
-            <StyledPaginationButton
-              onClick={handlePrevious}
-              disabled={!canGoPrevious}
-              aria-label="Previous page"
-            >
-              <Icon name="chevron-left-outline" />
-            </StyledPaginationButton>
-
-            {pageNumbers.map((pageNum, index) => {
-              if (pageNum === "...") {
-                return (
-                  <StyledPaginationButton
-                    key={`ellipsis-${index}`}
-                    disabled
-                    aria-label="More pages"
-                  >
-                    <Icon name="ellipsis-horizontal-outline" />
-                  </StyledPaginationButton>
-                );
-              }
-
-              const page = pageNum as number;
-              const isCurrentPage = page === currentPage;
-
-              return (
-                <StyledPaginationButton
-                  key={page}
-                  onClick={() => onPageChange(page - 1)}
-                  disabled={isCurrentPage}
-                  aria-label={`Page ${page}`}
-                  aria-current={isCurrentPage ? "page" : undefined}
-                  isSelected={isCurrentPage}
-                >
-                  {page}
-                </StyledPaginationButton>
-              );
-            })}
-
-            <StyledPaginationButton
-              onClick={handleNext}
-              disabled={!canGoNext}
-              aria-label="Next page"
-            >
-              <Icon name="chevron-right-outline" />
-            </StyledPaginationButton>
-          </StyledPageButtons>
-        </StyledPaginationControls>
-      )}
-    </StyledPaginationContainer>
-  );
-};
+import { PaginationHybrid } from "./PaginationHybrid";
+import type { PaginationProps } from "./PaginationTypes";
+
+/**
+ * Pagination component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or styled() extension).
+ *
+ * Defined as a self-named component (rather than a bare re-export of
+ * PaginationHybrid) so the `react-docgen` props-docs generation in the Publish
+ * pipeline has a suitable component definition to analyze.
+ */
+export const Pagination = (props: PaginationProps) => (
+  <PaginationHybrid {...props} />
+);
+
+Pagination.displayName = "Pagination";

package/src/PaginationHybrid.tsx

@@ -0,0 +1,20 @@
+/**
+ * Hybrid Pagination component.
+ * Routes between the Tailwind implementation (preferred) and the
+ * styled-components implementation (for consumers using system props).
+ */
+
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+import { PaginationStyled } from "./PaginationStyled";
+import { PaginationTailwind } from "./PaginationTailwind";
+import type { PaginationProps } from "./PaginationTypes";
+
+export const PaginationHybrid = (props: PaginationProps) => {
+  // Pagination exposes domain props plus an optional className, none of which
+  // are styled-system props, so hasStyledProps is effectively always false; the
+  // styled-components branch is retained as a pattern-conformance fallback.
+  if (hasStyledProps(props)) {
+    return <PaginationStyled {...props} />;
+  }
+  return <PaginationTailwind {...props} />;
+};

package/src/PaginationStyled.tsx

@@ -0,0 +1,128 @@
+/**
+ * Styled-components implementation of the Pagination component.
+ * Composes the styled sub-components from styles.ts. Retained for backward
+ * compatibility (system props / styled() extension) via PaginationHybrid.
+ */
+
+import { Select } from "@sproutsocial/seeds-react-select";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { PaginationProps } from "./PaginationTypes";
+import { usePaginationModel } from "./usePaginationModel";
+import {
+  StyledPaginationContainer,
+  StyledPaginationControls,
+  StyledPaginationInfo,
+  StyledPageSizeSelector,
+  StyledPageButtons,
+  StyledPaginationButton,
+} from "./styles";
+
+export const PaginationStyled = (props: PaginationProps) => {
+  const { pageSize, totalRows, onPageChange, className } = props;
+  const {
+    displayType,
+    pageSizeOptions,
+    tableCountFunction,
+    totalPages,
+    currentPage,
+    startRow,
+    endRow,
+    canGoPrevious,
+    canGoNext,
+    handlePrevious,
+    handleNext,
+    handlePageSizeChange,
+    pageNumbers,
+  } = usePaginationModel(props);
+
+  if (totalPages <= 1 && !pageSizeOptions) {
+    // No pagination needed if only one page and no page size options
+    return null;
+  }
+
+  return (
+    <StyledPaginationContainer className={className}>
+      <StyledPaginationInfo>
+        {tableCountFunction({
+          startNum: startRow,
+          endNum: endRow,
+          totalRowCount: totalRows,
+        })}
+      </StyledPaginationInfo>
+      {/* Page size selector */}
+      {pageSizeOptions && displayType === "dropdown" && (
+        <StyledPageSizeSelector>
+          <Select
+            id="page-size-select"
+            name="page-size"
+            value={String(pageSize)}
+            onChange={handlePageSizeChange}
+            ariaLabel="Rows per page"
+            size="small"
+          >
+            {pageSizeOptions.map((size) => (
+              <option key={size} value={size}>
+                {size} per page
+              </option>
+            ))}
+          </Select>
+        </StyledPageSizeSelector>
+      )}
+
+      {/* TODO: Add inline page size selector for displayType === 'inline' */}
+
+      {/* Page navigation controls */}
+      {totalPages > 1 && (
+        <StyledPaginationControls>
+          <StyledPageButtons>
+            <StyledPaginationButton
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              aria-label="Previous page"
+            >
+              <Icon name="chevron-left-outline" />
+            </StyledPaginationButton>
+
+            {pageNumbers.map((pageNum, index) => {
+              if (pageNum === "...") {
+                return (
+                  <StyledPaginationButton
+                    key={`ellipsis-${index}`}
+                    disabled
+                    aria-label="More pages"
+                  >
+                    <Icon name="ellipsis-horizontal-outline" />
+                  </StyledPaginationButton>
+                );
+              }
+
+              const page = pageNum as number;
+              const isCurrentPage = page === currentPage;
+
+              return (
+                <StyledPaginationButton
+                  key={page}
+                  onClick={() => onPageChange(page - 1)}
+                  disabled={isCurrentPage}
+                  aria-label={`Page ${page}`}
+                  aria-current={isCurrentPage ? "page" : undefined}
+                  isSelected={isCurrentPage}
+                >
+                  {page}
+                </StyledPaginationButton>
+              );
+            })}
+
+            <StyledPaginationButton
+              onClick={handleNext}
+              disabled={!canGoNext}
+              aria-label="Next page"
+            >
+              <Icon name="chevron-right-outline" />
+            </StyledPaginationButton>
+          </StyledPageButtons>
+        </StyledPaginationControls>
+      )}
+    </StyledPaginationContainer>
+  );
+};

package/src/PaginationTailwind.tsx

@@ -0,0 +1,152 @@
+/**
+ * Tailwind/CSS implementation of the Pagination component.
+ * Uses Seeds pagination CSS classes from pagination.css.
+ */
+
+import { Select } from "@sproutsocial/seeds-react-select";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { Text } from "@sproutsocial/seeds-react-text";
+import type { PaginationProps } from "./PaginationTypes";
+import { usePaginationModel } from "./usePaginationModel";
+
+// Utility for merging class names properly
+function cn(
+  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]
+): string {
+  const classes: string[] = [];
+
+  for (const input of inputs) {
+    if (!input) continue;
+
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+}
+
+export const PaginationTailwind = (props: PaginationProps) => {
+  const { pageSize, totalRows, onPageChange, className } = props;
+  const {
+    displayType,
+    pageSizeOptions,
+    tableCountFunction,
+    totalPages,
+    currentPage,
+    startRow,
+    endRow,
+    canGoPrevious,
+    canGoNext,
+    handlePrevious,
+    handleNext,
+    handlePageSizeChange,
+    pageNumbers,
+  } = usePaginationModel(props);
+
+  if (totalPages <= 1 && !pageSizeOptions) {
+    // No pagination needed if only one page and no page size options
+    return null;
+  }
+
+  return (
+    <div className={cn("seeds-pagination-container", className)}>
+      <Text className={cn("seeds-pagination-info")}>
+        {tableCountFunction({
+          startNum: startRow,
+          endNum: endRow,
+          totalRowCount: totalRows,
+        })}
+      </Text>
+      {/* Page size selector */}
+      {pageSizeOptions && displayType === "dropdown" && (
+        <div className={cn("seeds-pagination-page-size-selector")}>
+          <Select
+            id="page-size-select"
+            name="page-size"
+            value={String(pageSize)}
+            onChange={handlePageSizeChange}
+            ariaLabel="Rows per page"
+            size="small"
+          >
+            {pageSizeOptions.map((size) => (
+              <option key={size} value={size}>
+                {size} per page
+              </option>
+            ))}
+          </Select>
+        </div>
+      )}
+
+      {/* TODO: Add inline page size selector for displayType === 'inline' */}
+
+      {/* Page navigation controls */}
+      {totalPages > 1 && (
+        <div className={cn("seeds-pagination-controls")}>
+          <div className={cn("seeds-pagination-page-buttons")}>
+            <button
+              type="button"
+              className={cn("seeds-pagination-button")}
+              onClick={handlePrevious}
+              disabled={!canGoPrevious}
+              aria-label="Previous page"
+            >
+              <Icon name="chevron-left-outline" />
+            </button>
+
+            {pageNumbers.map((pageNum, index) => {
+              if (pageNum === "...") {
+                return (
+                  <button
+                    type="button"
+                    key={`ellipsis-${index}`}
+                    className={cn("seeds-pagination-button")}
+                    disabled
+                    aria-label="More pages"
+                  >
+                    <Icon name="ellipsis-horizontal-outline" />
+                  </button>
+                );
+              }
+
+              const page = pageNum as number;
+              const isCurrentPage = page === currentPage;
+
+              return (
+                <button
+                  type="button"
+                  key={page}
+                  className={cn("seeds-pagination-button", {
+                    "seeds-pagination-button-selected": isCurrentPage,
+                  })}
+                  onClick={() => onPageChange(page - 1)}
+                  disabled={isCurrentPage}
+                  aria-label={`Page ${page}`}
+                  aria-current={isCurrentPage ? "page" : undefined}
+                >
+                  {page}
+                </button>
+              );
+            })}
+
+            <button
+              type="button"
+              className={cn("seeds-pagination-button")}
+              onClick={handleNext}
+              disabled={!canGoNext}
+              aria-label="Next page"
+            >
+              <Icon name="chevron-right-outline" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/PaginationTypes.ts

@@ -44,6 +44,25 @@ export type TypeAllowedPageSizeOptions =
  * />
  * ```
  */
+/**
+ * Props for the Pagination component.
+ */
+export interface PaginationProps {
+  paginationConfig: TypePaginationConfig;
+  currentPageIndex: number;
+  pageSize: number;
+  totalRows: number;
+  onPageChange: (pageIndex: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  /**
+   * Optional class name applied to the root container. Lets consumers layer
+   * Tailwind utility overrides (e.g. `mx-200`, `p-300`) on top of the component
+   * styles. Because `className` is not a styled-system prop, providing it keeps
+   * the component on the Tailwind rendering path.
+   */
+  className?: string;
+}
+
 export interface TypePaginationConfig {
   /**
    * Initial number of rows per page.