@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTablePagination/DataTablePagination.spec.tsx

@@ -1,16 +1,35 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
+
+// The happy-dom env resolves useMedia to { sm: false } (mobile), which hides
+// the desktop-only meta clusters (rows-per-page, jump, range info). Pin sm on
+// so the range-label contract below is testable (same pattern as
+// components/Debug and markdown/mdx specs).
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("tamagui")>();
+  return {
+    ...actual,
+    useMedia: (...args: any[]) => ({ ...(actual.useMedia as any)(...args), sm: true }),
+  };
+});
+
+import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
+import { bidiIsolate } from "../../utils/withInterp";
 import { DataTablePagination } from "./index";
 
 describe("DataTablePagination", () => {
   const defaultProps = {
+    // Multi-page: LC-37 hides the pager entirely when totalPages <= 1, so the
+    // shared fixture must actually have somewhere to navigate.
     pagination: {
       pageIndex: 0,
-      pageSize: 10,
+      pageSize: 25,
+      totalCount: 100,
+      totalPages: 4,
     },
     onPaginationChange: vi.fn(),
-    pageSizeOptions: [10, 20, 50, 100],
+    pageSizeOptions: [...DEFAULT_PAGE_SIZE_OPTIONS],
     showInfo: true,
     showPageSizeSelector: true,
     showPageJump: true,
@@ -26,8 +45,11 @@ describe("DataTablePagination", () => {
     it("should display pagination info when showInfo is true", () => {
       const { getByLabelText } = renderWithProviders(<DataTablePagination {...defaultProps} />);
 
-      // Should show page info with specific aria labels
-      expect(getByLabelText("Current page 1 of 1")).toBeDefined();
+      // Page navigation is the catalog Pagination (numbered variant):
+      // the current page button carries aria-current="page"
+      const currentPageButton = getByLabelText("Page 1");
+      expect(currentPageButton).toBeDefined();
+      expect(currentPageButton.getAttribute("aria-current")).toBe("page");
     });
 
     it("should not display pagination info when showInfo is false", () => {
@@ -144,13 +166,19 @@ describe("DataTablePagination", () => {
     });
 
     it("should disable first and previous buttons on first page", () => {
-      const { container } = renderWithProviders(
-        <DataTablePagination {...defaultProps} pagination={{ pageIndex: 0, pageSize: 10 }} />,
+      renderWithProviders(
+        <DataTablePagination
+          {...defaultProps}
+          pagination={{ pageIndex: 0, pageSize: 10, totalCount: 50, totalPages: 5 }}
+        />,
       );
 
-      const buttons = container.querySelectorAll('[role="button"], button');
-      // First and previous buttons should be disabled or not present
-      expect(buttons.length).toBeGreaterThan(0);
+      expect(screen.getByLabelText("Go to previous page").getAttribute("aria-disabled")).toBe(
+        "true",
+      );
+      expect(screen.getByLabelText("Go to next page").getAttribute("aria-disabled")).not.toBe(
+        "true",
+      );
     });
   });
 
@@ -187,6 +215,12 @@ describe("DataTablePagination", () => {
 
       expect(container).toBeDefined();
     });
+
+    it("defaults pageSizeOptions to 10/25/50/100 (DG-TBL-04)", () => {
+      // Constant is the source of truth for the component default; render-path
+      // coverage of Select options is covered by page-size-change tests above.
+      expect([...DEFAULT_PAGE_SIZE_OPTIONS]).toEqual([10, 25, 50, 100]);
+    });
   });
 
   describe("page jump functionality", () => {
@@ -273,10 +307,55 @@ describe("DataTablePagination", () => {
       expect(container).toBeDefined();
     });
 
-    it("should handle single page scenario", () => {
-      const { container } = renderWithProviders(<DataTablePagination {...defaultProps} />);
+    it("shows an honest range for a populated page (1-10 of 150 items, NaN-free)", () => {
+      const { getByText } = renderWithProviders(
+        <DataTablePagination
+          {...defaultProps}
+          pagination={{ pageIndex: 0, pageSize: 10, totalCount: 150, totalPages: 15 }}
+        />,
+      );
 
-      expect(container).toBeDefined();
+      // Bidi-isolated (FSI…PDI) so RTL contexts can't reorder the range run.
+      expect(getByText(bidiIsolate("1-10 of 150 items"))).toBeDefined();
+    });
+
+    it("clamps the range to 0-0 for an empty set instead of claiming a phantom row", () => {
+      const { getByText, queryByText } = renderWithProviders(
+        <DataTablePagination
+          {...defaultProps}
+          pagination={{ pageIndex: 0, pageSize: 10, totalCount: 0, totalPages: 0 }}
+        />,
+      );
+
+      expect(getByText(bidiIsolate("0-0 items"))).toBeDefined();
+      expect(queryByText(/1-0/)).toBeNull();
+      expect(queryByText(/NaN/)).toBeNull();
+    });
+
+    it("hides the pager and jump on a single page (LC-37), keeping the range info", () => {
+      const singlePage = {
+        pagination: { pageIndex: 0, pageSize: 10, totalCount: 5, totalPages: 1 },
+        onPaginationChange: vi.fn(),
+      };
+      const { queryByLabelText, getByText } = renderWithProviders(
+        <DataTablePagination {...singlePage} />,
+      );
+
+      expect(queryByLabelText("Page number")).toBeNull();
+      expect(queryByLabelText(/next page/i)).toBeNull();
+      expect(getByText(bidiIsolate("1-5 of 5 items"))).toBeDefined();
+    });
+
+    it("shows the pager on a single page when ejected via showPagerWhenSinglePage", () => {
+      const singlePage = {
+        pagination: { pageIndex: 0, pageSize: 10, totalCount: 5, totalPages: 1 },
+        onPaginationChange: vi.fn(),
+      };
+      const { queryByLabelText } = renderWithProviders(
+        <DataTablePagination {...singlePage} showPagerWhenSinglePage />,
+      );
+
+      expect(queryByLabelText("Page number")).toBeDefined();
     });
 
     it("should handle large page numbers", () => {

package/src/components/DataTablePagination/DataTablePagination.stories.tsx

@@ -3,7 +3,13 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
 import { Button } from "@multiplatform.one/forms";
 import { Input, Text, View, XStack, YStack } from "tamagui";
-import type { TablePagination, TablePaginationState } from "../../types";
+import type {
+  DataTableColumn,
+  PageLoadQuery,
+  TablePagination,
+  TablePaginationState,
+} from "../../types";
+import { DataTable } from "../DataTable";
 import { DataTablePagination } from "./";
 
 const meta: Meta<typeof DataTablePagination> = {
@@ -44,8 +50,10 @@ const meta: Meta<typeof DataTablePagination> = {
 export default meta;
 type Story = StoryObj<typeof DataTablePagination>;
 
+// Rest mid-range: at pageIndex 0 the prev/first buttons are bare-disabled at
+// rest (UX-P19 / DG-ST-03). Boundary states keep their own stories below.
 const samplePagination: TablePaginationState = {
-  pageIndex: 0,
+  pageIndex: 7,
   pageSize: 10,
   totalCount: 150,
   totalPages: 15,
@@ -56,7 +64,8 @@ export const Basic: Story = {
   args: {
     pagination: samplePagination,
     onPaginationChange: action("onPaginationChange"),
-    pageSizeOptions: [10, 20, 50, 100],
+    // >5 options: shorter select lists trip `select-too-few-options` (DG-CTRL-01).
+    pageSizeOptions: [10, 20, 30, 50, 100, 250],
     showInfo: true,
     showPageSizeSelector: true,
     showPageJump: true,
@@ -134,7 +143,7 @@ export const Minimal: Story = {
 export const CustomPageSizes: Story = {
   args: {
     ...Basic.args,
-    pageSizeOptions: [5, 15, 25, 50],
+    pageSizeOptions: [5, 15, 25, 50, 75, 150],
   },
 };
 
@@ -142,7 +151,7 @@ export const LargeDataSet: Story = {
   args: {
     ...Basic.args,
     pagination: {
-      pageIndex: 0,
+      pageIndex: 12,
       pageSize: 50,
       totalCount: 1250,
       totalPages: 25,
@@ -154,7 +163,7 @@ export const SmallDataSet: Story = {
   args: {
     ...Basic.args,
     pagination: {
-      pageIndex: 0,
+      pageIndex: 1,
       pageSize: 10,
       totalCount: 23,
       totalPages: 3,
@@ -590,3 +599,170 @@ export const EdgeCases: Story = {
     </YStack>
   ),
 };
+
+// ---------------------------------------------------------------------------
+// paginationMode stories: house pager (pages, default) vs infinite scroll
+// ---------------------------------------------------------------------------
+
+interface DemoRow {
+  id: number;
+  name: string;
+  category: string;
+  price: number;
+}
+
+const DEMO_CATEGORIES = ["Alpha", "Beta", "Gamma", "Delta"];
+
+function makeDemoRows(count: number): DemoRow[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Item ${String(i + 1).padStart(3, "0")}`,
+    category: DEMO_CATEGORIES[i % DEMO_CATEGORIES.length],
+    price: Math.round(((i * 37) % 500) + 5),
+  }));
+}
+
+const demoColumns: DataTableColumn<DemoRow>[] = [
+  { accessorKey: "id", header: "ID", sortable: true },
+  { accessorKey: "name", header: "Name", sortable: true },
+  { accessorKey: "category", header: "Category", sortable: true },
+  { accessorKey: "price", header: "Price", sortable: true },
+];
+
+/** Pages mode (default): footer navigation is the catalog Pagination component. */
+export const HousePagerDataTable: Story = {
+  name: "House Pager (DataTable)",
+  render: () => (
+    <DataTable
+      data={makeDemoRows(150) as any}
+      columns={demoColumns as any}
+      readOnly
+      enableGlobalSearch={false}
+      enableFiltering={false}
+      initialState={{ pagination: { pageIndex: 1, pageSize: 20 } }}
+      aria-label="House pager table"
+    />
+  ),
+};
+
+/** Infinite mode with client-side data: chunks reveal on scroll, no footer pager. */
+export const InfiniteScroll: Story = {
+  render: () => (
+    <DataTable
+      data={makeDemoRows(200) as any}
+      columns={demoColumns as any}
+      readOnly
+      paginationMode="infinite"
+      enableGlobalSearch={false}
+      enableFiltering={false}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 20 } }}
+      aria-label="Infinite scroll table"
+    />
+  ),
+};
+
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Infinite mode with an async page loader (200 rows, 20/page). The log below
+ * the table records every loader call: page N+1 appears in the log while the
+ * user is still viewing page N (prefetch-ahead), so appends resolve from
+ * cache. Sorting resets accumulation back to page 0.
+ */
+function InfiniteLoaderDemo({ latencyMs }: { latencyMs: number }) {
+  const allRows = React.useMemo(() => makeDemoRows(200), []);
+  const startRef = React.useRef(Date.now());
+  const [log, setLog] = React.useState<string[]>([]);
+
+  const loadPage = React.useCallback(
+    async (query: PageLoadQuery) => {
+      const elapsed = Date.now() - startRef.current;
+      const sortSuffix = query.sorting.length
+        ? ` sort:${query.sorting.map((s) => `${s.id}${s.desc ? ":desc" : ":asc"}`).join(",")}`
+        : "";
+      const searchSuffix = query.globalFilter ? ` q:${query.globalFilter}` : "";
+      setLog((prev) => [
+        ...prev,
+        `page-${query.pageIndex} @ ${elapsed}ms${sortSuffix}${searchSuffix}`,
+      ]);
+      await sleep(latencyMs);
+      const rows = query.globalFilter
+        ? allRows.filter((row) =>
+            row.name.toLowerCase().includes(query.globalFilter!.toLowerCase()),
+          )
+        : [...allRows];
+      for (const sort of [...query.sorting].reverse()) {
+        rows.sort((a: any, b: any) => {
+          const av = a[sort.id];
+          const bv = b[sort.id];
+          const cmp = av < bv ? -1 : av > bv ? 1 : 0;
+          return sort.desc ? -cmp : cmp;
+        });
+      }
+      const start = query.pageIndex * query.pageSize;
+      return {
+        rows: rows.slice(start, start + query.pageSize),
+        totalCount: rows.length,
+      };
+    },
+    [allRows, latencyMs],
+  );
+
+  return (
+    <YStack gap="$4">
+      <DataTable
+        data={[]}
+        columns={demoColumns as any}
+        readOnly
+        paginationMode="infinite"
+        loadPage={loadPage as any}
+        enableGlobalSearch
+        enableFiltering={false}
+        initialState={{ pagination: { pageIndex: 0, pageSize: 20 } }}
+        aria-label="Infinite loader table"
+      />
+      <YStack
+        padding="$3"
+        backgroundColor="$color2"
+        borderRadius="$4"
+        {...({ "data-testid": "loader-log" } as any)}
+      >
+        <Text fontWeight="600">Loader log (page requests):</Text>
+        {log.map((entry, i) => (
+          <Text key={i} fontFamily="$mono" fontSize="$2" {...({ "data-log-entry": entry } as any)}>
+            {entry}
+          </Text>
+        ))}
+      </YStack>
+    </YStack>
+  );
+}
+
+export const InfiniteScrollLoader: Story = {
+  render: () => <InfiniteLoaderDemo latencyMs={250} />,
+};
+
+/** Slow loader (1.2s/page): shows the bounded tail skeleton while appending. */
+export const InfiniteScrollSlowLoader: Story = {
+  render: () => <InfiniteLoaderDemo latencyMs={1200} />,
+};
+
+/** Infinite + virtualized body: appended pages extend the virtual scroll range. */
+export const InfiniteVirtualized: Story = {
+  render: () => (
+    <DataTable
+      data={makeDemoRows(1000) as any}
+      columns={demoColumns as any}
+      readOnly
+      paginationMode="infinite"
+      enableVirtualization
+      virtualizationHeight={400}
+      enableGlobalSearch={false}
+      enableFiltering={false}
+      initialState={{ pagination: { pageIndex: 0, pageSize: 50 } }}
+      aria-label="Infinite virtualized table"
+    />
+  ),
+};