@multiplatform.one/table 6.1.0 → 6.3.0

package/src/components/DataTablePagination/index.tsx

@@ -1,14 +1,11 @@
-import {
-  CaretDoubleLeftIcon,
-  CaretDoubleRightIcon,
-  CaretLeftIcon,
-  CaretRightIcon,
-} from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React from "react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { Text, View, XStack, YStack, useMedia } from "tamagui";
+import { Pagination } from "@multiplatform.one/components";
+import type React from "react";
+import { Input, Select } from "@multiplatform.one/forms";
+import { Text, View, XStack, useMedia } from "tamagui";
 import type { TablePagination, TablePaginationState } from "../../types";
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
+import { bidiIsolate } from "../../utils/withInterp";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
 
 export interface DataTablePaginationProps {
@@ -18,9 +15,20 @@ export interface DataTablePaginationProps {
   showInfo?: boolean;
   showPageSizeSelector?: boolean;
   showPageJump?: boolean;
+  /**
+   * LC-37 HONEST-VIEWPORT (P-06): a pager over one page navigates nowhere, so
+   * it is hidden by default. Eject to keep the pager chrome visible anyway.
+   */
+  showPagerWhenSinglePage?: boolean;
   compact?: boolean;
 }
 
+/**
+ * DataTable footer pager. Page navigation is the catalog
+ * `Pagination` component (`variant="numbered"`) — one pagination idiom
+ * across the system. This wrapper adds the table-specific chrome:
+ * rows-per-page selector, go-to-page jump, and the item-range summary.
+ */
 export function DataTablePagination(props: DataTablePaginationProps) {
   // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
@@ -39,7 +47,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
         }
       : {
           pageIndex: 0,
-          pageSize: 10,
+          pageSize: DEFAULT_PAGE_SIZE,
           totalPages: 1,
           totalCount: 0,
           hasPreviousPage: false,
@@ -51,10 +59,11 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     (ctx ? (p: TablePagination) => ctx.actions.setPagination(p) : () => {});
 
   const {
-    pageSizeOptions = [10, 20, 50, 100],
+    pageSizeOptions = [...DEFAULT_PAGE_SIZE_OPTIONS],
     showInfo = true,
     showPageSizeSelector = true,
     showPageJump = true,
+    showPagerWhenSinglePage = false,
     compact = false,
   } = props;
 
@@ -87,76 +96,44 @@ export function DataTablePagination(props: DataTablePaginationProps) {
 
   const currentPage = pagination.pageIndex + 1; // Convert to 1-based for display
   const totalPages = pagination.totalPages || 1;
-  const startItem = pagination.pageIndex * pagination.pageSize + 1;
-  const endItem = Math.min(
-    (pagination.pageIndex + 1) * pagination.pageSize,
-    pagination.totalCount || 0,
-  );
+  // LC-37: page navigation (pager + jump) exists only when there is somewhere
+  // to navigate. Size selector and range info stay — they are not navigation.
+  const showPager = totalPages > 1 || showPagerWhenSinglePage;
+  // Empty set clamps to "0-0" (same rule as DataTableRoot's range label) —
+  // "1-0 items" asserted a phantom first row when totalCount was 0/unknown.
+  const totalCount = pagination.totalCount || 0;
+  const startItem = totalCount === 0 ? 0 : pagination.pageIndex * pagination.pageSize + 1;
+  const endItem = Math.min((pagination.pageIndex + 1) * pagination.pageSize, totalCount);
 
   if (compact) {
+    if (!showPager) return null;
     return (
-      <XStack
-        alignItems="center"
-        justifyContent="center"
-        gap="$1"
+      <Pagination
+        variant="numbered"
+        total={totalPages}
+        page={currentPage}
+        onPageChange={(page) => handlePageChange(page - 1)}
         paddingVertical="$1"
         paddingHorizontal="$2"
-        role="navigation"
         aria-label="Table pagination"
-      >
-        <Button
-          size="$2"
-          variant="outlined"
-          onPress={() => handlePageChange(0)}
-          disabled={!pagination.hasPreviousPage}
-          icon={<CaretDoubleLeftIcon size={14} />}
-          aria-label="Go to first page"
-        />
-        <Button
-          size="$2"
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex - 1)}
-          disabled={!pagination.hasPreviousPage}
-          icon={<CaretLeftIcon size={14} />}
-          aria-label="Go to previous page"
-        />
-
-        <Text
-          fontSize="$2"
-          color="$color10"
-          paddingHorizontal="$2"
-          aria-live="polite"
-          aria-atomic="true"
-          aria-label={`Current page ${currentPage} of ${totalPages}`}
-        >
-          {currentPage} / {totalPages}
-        </Text>
-
-        <Button
-          size="$2"
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex + 1)}
-          disabled={!pagination.hasNextPage}
-          icon={<CaretRightIcon size={14} />}
-          aria-label="Go to next page"
-        />
-        <Button
-          size="$2"
-          variant="outlined"
-          onPress={() => handlePageChange(totalPages - 1)}
-          disabled={!pagination.hasNextPage}
-          icon={<CaretDoubleRightIcon size={14} />}
-          aria-label="Go to last page"
-        />
-      </XStack>
+      />
     );
   }
 
+  const showMetaRight = ((showPageJump && showPager) || showInfo) && !isMobile;
+
   return (
+    // UX-P08 / LC-10 + Axiom 15 (G-03): each cluster grows, so when the row
+    // wraps every wrapped line spans the full width and keeps its own
+    // alignment line (left cluster → left edge, pager → centered, jump/info →
+    // right edge) instead of orphaning bottom-left at flex-start. rowGap keeps
+    // wrapped lines on the within-group rhythm rather than gapLg's
+    // between-groups spread.
     <XStack
       alignItems="center"
       justifyContent="space-between"
       {...knobProps.gapLg}
+      rowGap={knobProps.gap.gap}
       flexWrap="wrap"
       width="100%"
       paddingHorizontal={knobProps.panelPadding.padding}
@@ -165,7 +142,7 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     >
       {/* Left Section - Page Size Selector */}
       {showPageSizeSelector && !isMobile && (
-        <XStack alignItems="center" gap="$2">
+        <XStack alignItems="center" gap="$2" flexGrow={1} justifyContent="flex-start">
           <Text fontSize={knobProps.sizeToken} color="$color10">
             Rows per page:
           </Text>
@@ -189,265 +166,61 @@ export function DataTablePagination(props: DataTablePaginationProps) {
         </XStack>
       )}
 
-      {/* Center Section - Navigation */}
-      <XStack alignItems="center" gap="$2" aria-label="Pagination controls">
-        <Button
-          size={knobProps.sizeToken}
-          compact
-          variant="outlined"
-          onPress={() => handlePageChange(0)}
-          disabled={!pagination.hasPreviousPage}
-          icon={<CaretDoubleLeftIcon size={16} />}
-          aria-label="Go to first page"
-        />
-        <Button
-          size={knobProps.sizeToken}
-          compact
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex - 1)}
-          disabled={!pagination.hasPreviousPage}
-          icon={<CaretLeftIcon size={16} />}
-          aria-label="Go to previous page"
-        />
-
-        {/* Page Info */}
-        {showInfo && (
-          <View
-            flexDirection="row"
-            alignItems="center"
-            paddingHorizontal="$4"
-            paddingVertical="$2"
-            backgroundColor="$color2"
-            borderWidth={1}
-            borderColor="$color6"
-            borderRadius={knobProps.borderRadius.borderRadius}
-            gap="$2"
-            aria-live="polite"
-            aria-label={`Current page ${currentPage} of ${totalPages}`}
-          >
-            <Text fontSize={knobProps.sizeToken} fontWeight="600">
-              {currentPage}
-            </Text>
-            <Text fontSize={knobProps.sizeToken} color="$color10">
-              of
-            </Text>
-            <Text fontSize={knobProps.sizeToken} fontWeight="600">
-              {totalPages}
-            </Text>
-          </View>
-        )}
-
-        <Button
-          size={knobProps.sizeToken}
-          compact
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex + 1)}
-          disabled={!pagination.hasNextPage}
-          icon={<CaretRightIcon size={16} />}
-          aria-label="Go to next page"
-        />
-        <Button
-          size={knobProps.sizeToken}
-          compact
-          variant="outlined"
-          onPress={() => handlePageChange(totalPages - 1)}
-          disabled={!pagination.hasNextPage}
-          icon={<CaretDoubleRightIcon size={16} />}
-          aria-label="Go to last page"
-        />
-      </XStack>
+      {/* Center Section - Navigation (catalog Pagination, numbered idiom) */}
+      {showPager && (
+        <XStack alignItems="center" flexGrow={1} justifyContent="center">
+          <Pagination
+            variant="numbered"
+            total={totalPages}
+            page={currentPage}
+            onPageChange={(page) => handlePageChange(page - 1)}
+            showFirstLast
+          />
+        </XStack>
+      )}
 
-      {/* Right Section - Page Jump & Info */}
-      <XStack alignItems="center" {...knobProps.gapLg}>
-        {showPageJump && !isMobile && (
-          <XStack alignItems="center" gap="$2" aria-label="Jump to page">
-            <Text fontSize={knobProps.sizeToken} color="$color10">
-              Go to page:
+      {/* Right Section - Page Jump & Info (gated: an empty grow box would
+          consume line space and skew the pager off-center) */}
+      {showMetaRight && (
+        <XStack alignItems="center" {...knobProps.gapLg} flexGrow={1} justifyContent="flex-end">
+          {showPageJump && showPager && (
+            <XStack alignItems="center" gap="$2" aria-label="Jump to page">
+              <Text fontSize={knobProps.sizeToken} color="$color10">
+                Go to page:
+              </Text>
+              <View width={60}>
+                <Input
+                  defaultValue={currentPage.toString()}
+                  inputProps={{
+                    type: "number",
+                    style: { textAlign: "center" },
+                    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+                      if (e.key === "Enter") {
+                        handlePageJump((e.target as HTMLInputElement).value);
+                      }
+                    },
+                  }}
+                  placeholder={`1-${totalPages}`}
+                  aria-label="Page number"
+                  size={knobProps.sizeToken}
+                  compact
+                />
+              </View>
+            </XStack>
+          )}
+
+          {showInfo && (
+            <Text fontSize={knobProps.sizeToken} color="$color10" aria-live="polite">
+              {/* Bidi-isolated so RTL contexts can't reorder the range run */}
+              {bidiIsolate(
+                pagination.totalCount
+                  ? `${startItem}-${endItem} of ${pagination.totalCount} items`
+                  : `${startItem}-${endItem} items`,
+              )}
             </Text>
-            <View width={60}>
-              <Input
-                defaultValue={currentPage.toString()}
-                inputProps={{
-                  type: "number",
-                  style: { textAlign: "center" },
-                  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
-                    if (e.key === "Enter") {
-                      handlePageJump((e.target as HTMLInputElement).value);
-                    }
-                  },
-                }}
-                placeholder={`1-${totalPages}`}
-                aria-label="Page number"
-                size={knobProps.sizeToken}
-                compact
-              />
-            </View>
-          </XStack>
-        )}
-
-        {showInfo && !isMobile && (
-          <Text fontSize={knobProps.sizeToken} color="$color10" aria-live="polite">
-            {pagination.totalCount
-              ? `${startItem}-${endItem} of ${pagination.totalCount} items`
-              : `${startItem}-${endItem} items`}
-          </Text>
-        )}
-      </XStack>
-    </XStack>
-  );
-}
-
-// Additional Pagination Components
-
-export interface DataTablePaginationInfoProps {
-  pagination: TablePaginationState;
-  showTotal?: boolean;
-  showRange?: boolean;
-}
-
-export function DataTablePaginationInfo({
-  pagination,
-  showTotal = true,
-  showRange = true,
-}: DataTablePaginationInfoProps) {
-  const { knobProps } = useResolvedKnobs();
-  const currentPage = pagination.pageIndex + 1;
-  const totalPages = pagination.totalPages || 1;
-  const startItem = pagination.pageIndex * pagination.pageSize + 1;
-  const endItem = Math.min(
-    (pagination.pageIndex + 1) * pagination.pageSize,
-    pagination.totalCount || 0,
-  );
-
-  return (
-    <YStack alignItems="center" gap="$1">
-      <Text fontSize={knobProps.sizeToken} fontWeight="500">
-        Page {currentPage} of {totalPages}
-      </Text>
-      {showRange && pagination.totalCount && (
-        <Text fontSize="$2" color="$color10">
-          Showing {startItem}-{endItem} of {pagination.totalCount} items
-        </Text>
-      )}
-      {showTotal && pagination.totalCount && (
-        <Text fontSize="$2" color="$color10">
-          Total: {pagination.totalCount} items
-        </Text>
+          )}
+        </XStack>
       )}
-    </YStack>
-  );
-}
-
-export interface DataTablePaginationControlsProps {
-  pagination: TablePaginationState;
-  onPaginationChange: (pagination: TablePagination) => void;
-  variant?: "default" | "minimal";
-  size?: "sm" | "md" | "lg";
-}
-
-const sizeToToken = { sm: "$2", md: "$3", lg: "$4" } as const;
-
-export function DataTablePaginationControls({
-  pagination,
-  onPaginationChange,
-  variant = "default",
-  size = "md",
-}: DataTablePaginationControlsProps) {
-  const { knobProps } = useResolvedKnobs();
-  const sizeToken = sizeToToken[size];
-  const handlePageChange = (newPageIndex: number) => {
-    if (newPageIndex >= 0 && newPageIndex < (pagination.totalPages || 1)) {
-      onPaginationChange({
-        pageIndex: newPageIndex,
-        pageSize: pagination.pageSize,
-      });
-    }
-  };
-
-  if (variant === "minimal") {
-    return (
-      <XStack alignItems="center" gap="$1" role="navigation" aria-label="Table pagination">
-        <Button
-          size={sizeToken}
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex - 1)}
-          disabled={!pagination.hasPreviousPage}
-          aria-label="Go to previous page"
-        >
-          Previous
-        </Button>
-        <Text
-          fontSize={knobProps.sizeToken}
-          color="$color10"
-          paddingHorizontal="$3"
-          aria-live="polite"
-          aria-atomic="true"
-        >
-          Page {pagination.pageIndex + 1} of {pagination.totalPages || 1}
-        </Text>
-        <Button
-          size={sizeToken}
-          variant="outlined"
-          onPress={() => handlePageChange(pagination.pageIndex + 1)}
-          disabled={!pagination.hasNextPage}
-          aria-label="Go to next page"
-        >
-          Next
-        </Button>
-      </XStack>
-    );
-  }
-
-  return (
-    <XStack alignItems="center" gap="$2" role="navigation" aria-label="Table pagination">
-      <Button
-        size={sizeToken}
-        variant="outlined"
-        onPress={() => handlePageChange(0)}
-        disabled={!pagination.hasPreviousPage}
-        icon={<CaretDoubleLeftIcon size={16} />}
-        aria-label="Go to first page"
-      />
-      <Button
-        size={sizeToken}
-        variant="outlined"
-        onPress={() => handlePageChange(pagination.pageIndex - 1)}
-        disabled={!pagination.hasPreviousPage}
-        icon={<CaretLeftIcon size={16} />}
-        aria-label="Go to previous page"
-      />
-
-      <View
-        flexDirection="row"
-        alignItems="center"
-        paddingHorizontal="$3"
-        paddingVertical="$2"
-        backgroundColor="$color1"
-        borderRadius={knobProps.borderRadius.borderRadius}
-        aria-live="polite"
-        aria-atomic="true"
-      >
-        <Text fontSize={knobProps.sizeToken} fontWeight="500">
-          Page {pagination.pageIndex + 1} of {pagination.totalPages || 1}
-        </Text>
-      </View>
-
-      <Button
-        size={sizeToken}
-        variant="outlined"
-        onPress={() => handlePageChange(pagination.pageIndex + 1)}
-        disabled={!pagination.hasNextPage}
-        icon={<CaretRightIcon size={16} />}
-        aria-label="Go to next page"
-      />
-      <Button
-        size={sizeToken}
-        variant="outlined"
-        aria-label="Go to last page"
-        onPress={() => handlePageChange((pagination.totalPages || 1) - 1)}
-        disabled={!pagination.hasNextPage}
-        icon={<CaretDoubleRightIcon size={16} />}
-      />
     </XStack>
   );
 }

package/src/components/DataTableSearch/DataTableSearch.spec.tsx

@@ -46,20 +46,20 @@ describe("DataTableSearch", () => {
   describe("basic rendering", () => {
     it("should render search input", () => {
       const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toBeDefined();
       expect(searchInput).toHaveAttribute("placeholder", "Search...");
     });
     it("should display placeholder correctly", () => {
       const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toHaveAttribute("placeholder", "Search...");
     });
     it("should render with custom placeholder", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} placeholder="Custom placeholder" />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toHaveAttribute("placeholder", "Custom placeholder");
     });
   });
@@ -69,7 +69,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: "John" } });
       await waitFor(() => {
         expect(onSearchResults).toHaveBeenCalled();
@@ -80,7 +80,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} debounceMs={100} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       // Type multiple characters quickly
       fireEvent.change(searchInput, { target: { value: "t" } });
       fireEvent.change(searchInput, { target: { value: "te" } });
@@ -99,7 +99,7 @@ describe("DataTableSearch", () => {
       const { getByRole, container } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       // Type something first
       fireEvent.change(searchInput, { target: { value: "test search" } });
       await waitFor(() => {
@@ -159,12 +159,12 @@ describe("DataTableSearch", () => {
   describe("accessibility", () => {
     it("should have proper ARIA labels", () => {
       const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(searchInput).toBeDefined();
     });
     it("should support keyboard navigation", () => {
       const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       // Test keyboard events
       fireEvent.keyDown(searchInput, { key: "Enter" });
       fireEvent.keyDown(searchInput, { key: "Escape" });
@@ -172,7 +172,7 @@ describe("DataTableSearch", () => {
     });
     it("should have proper focus management", () => {
       const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       // Test focus events
       fireEvent.focus(searchInput);
       fireEvent.blur(searchInput);
@@ -185,7 +185,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: "" } });
       await waitFor(() => {
         expect(onSearchResults).toHaveBeenCalledWith(sampleData, expect.any(Object));
@@ -196,7 +196,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: "test@#$%^&*()" } });
       await waitFor(() => {
         expect(onSearchResults).toHaveBeenCalled();
@@ -208,7 +208,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       fireEvent.change(searchInput, { target: { value: longSearchTerm } });
       await waitFor(() => {
         expect(onSearchResults).toHaveBeenCalled();
@@ -263,7 +263,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={onSearchResults} debounceMs={50} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       // Simulate rapid typing
       for (let i = 0; i < 10; i++) {
         fireEvent.change(searchInput, { target: { value: `search${i}` } });
@@ -298,7 +298,7 @@ describe("DataTableSearch", () => {
       const { getByRole } = renderWithProviders(
         <DataTableSearch {...defaultProps} onSearchResults={undefined} />,
       );
-      const searchInput = getByRole("textbox");
+      const searchInput = getByRole("searchbox");
       expect(() => {
         fireEvent.change(searchInput, { target: { value: "test" } });
       }).not.toThrow();