@multiplatform.one/table 6.6.0 → 7.0.0

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

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { fireEvent, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
@@ -269,6 +270,22 @@ describe("DataTablePagination", () => {
 
       expect(container).toBeDefined();
     });
+
+    it("keeps the page-size selector in compact (DG-TBL-04)", () => {
+      const { getByLabelText } = renderWithProviders(
+        <DataTablePagination {...defaultProps} compact />,
+      );
+
+      expect(getByLabelText("Select rows per page")).toBeDefined();
+    });
+
+    it("hides the jumper in compact — the numbered window already jumps", () => {
+      const { queryByLabelText } = renderWithProviders(
+        <DataTablePagination {...defaultProps} compact />,
+      );
+
+      expect(queryByLabelText("Page number")).toBeNull();
+    });
   });
 
   describe("responsive behavior", () => {
@@ -316,10 +333,10 @@ describe("DataTablePagination", () => {
       );
 
       // Bidi-isolated (FSI…PDI) so RTL contexts can't reorder the range run.
-      expect(getByText(bidiIsolate("1-10 of 150 items"))).toBeDefined();
+      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", () => {
+    it("clamps the range to 0–0 for an empty set instead of claiming a phantom row", () => {
       const { getByText, queryByText } = renderWithProviders(
         <DataTablePagination
           {...defaultProps}
@@ -327,7 +344,7 @@ describe("DataTablePagination", () => {
         />,
       );
 
-      expect(getByText(bidiIsolate("0-0 items"))).toBeDefined();
+      expect(getByText(bidiIsolate("0–0 items"))).toBeDefined();
       expect(queryByText(/1-0/)).toBeNull();
       expect(queryByText(/NaN/)).toBeNull();
     });
@@ -343,7 +360,7 @@ describe("DataTablePagination", () => {
 
       expect(queryByLabelText("Page number")).toBeNull();
       expect(queryByLabelText(/next page/i)).toBeNull();
-      expect(getByText(bidiIsolate("1-5 of 5 items"))).toBeDefined();
+      expect(getByText(bidiIsolate("1–5 of 5 items"))).toBeDefined();
     });
 
     it("shows the pager on a single page when ejected via showPagerWhenSinglePage", () => {
@@ -373,6 +390,64 @@ describe("DataTablePagination", () => {
 
       expect(container).toBeDefined();
     });
+
+    it("keeps a page size that is not in pageSizeOptions selectable", () => {
+      const { getByLabelText } = renderWithProviders(
+        <DataTablePagination
+          {...defaultProps}
+          pageSizeOptions={[10, 25, 50, 100]}
+          pagination={{ pageIndex: 0, pageSize: 15, totalCount: 40, totalPages: 3 }}
+        />,
+      );
+
+      expect(getByLabelText("Select rows per page")).toBeDefined();
+    });
+  });
+
+  describe("page jump sync", () => {
+    it("commits Enter and remounts to the current page after a pager click", () => {
+      function Harness() {
+        const [pagination, setPagination] = useState({
+          pageIndex: 0,
+          pageSize: 10,
+          totalCount: 50,
+          totalPages: 5,
+        });
+        return (
+          <DataTablePagination
+            pagination={pagination}
+            onPaginationChange={(next) =>
+              setPagination((prev) => {
+                if (prev.pageIndex === next.pageIndex && prev.pageSize === next.pageSize) {
+                  return prev;
+                }
+                return { ...prev, ...next };
+              })
+            }
+            showPageJump
+            pageSizeOptions={[10, 20, 30, 50, 100, 250]}
+          />
+        );
+      }
+
+      renderWithProviders(<Harness />);
+      const jump = screen.getByLabelText("Page number") as HTMLInputElement;
+      expect(jump.value).toBe("1");
+
+      fireEvent.click(screen.getByLabelText("Go to next page"));
+      expect((screen.getByLabelText("Page number") as HTMLInputElement).value).toBe("2");
+    });
+  });
+
+  describe("LC-71 ring anatomy", () => {
+    it("does not clip Select/Input rings with overflow hidden on the control wrap", () => {
+      const { container } = renderWithProviders(<DataTablePagination {...defaultProps} />);
+      const wraps = container.querySelectorAll("[data-pagination-control]");
+      expect(wraps.length).toBeGreaterThan(0);
+      wraps.forEach((el) => {
+        expect((el as HTMLElement).style.overflow).not.toBe("hidden");
+      });
+    });
   });
 
   describe("callback behavior", () => {

package/src/components/DataTablePagination/index.tsx

@@ -1,5 +1,6 @@
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureCompositeFocusRing, useResolvedKnobs } from "@multiplatform.one/theme";
 import { Pagination } from "@multiplatform.one/components";
+import { useMemo, useState } from "react";
 import type React from "react";
 import { Input, Select } from "@multiplatform.one/forms";
 import { Text, View, XStack, useMedia } from "tamagui";
@@ -23,17 +24,30 @@ export interface DataTablePaginationProps {
   compact?: boolean;
 }
 
+function controlWidth(chars: number, chrome: number) {
+  return Math.max(48, chars * 12 + chrome);
+}
+
+function formatRange(start: number, end: number, total: number) {
+  if (total === 0) return "0–0 items";
+  return `${start}–${end} of ${total} items`;
+}
+
 /**
  * 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.
+ *
+ * Anatomy follows Carbon/MUI table footers: size + numbered window + range,
+ * with Ant's quick-jumper only when there is somewhere to type to. Compact
+ * inside a DataTable stays shrink-wrapped so the table's own range can sit
+ * beside it; standalone compact (reports, stories) keeps the range (LC-37).
  */
 export function DataTablePagination(props: DataTablePaginationProps) {
-  // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
+  const insideTable = Boolean(ctx);
 
-  // Resolve values: explicit props override context values
   const pagination =
     props.pagination ??
     (ctx
@@ -70,10 +84,14 @@ export function DataTablePagination(props: DataTablePaginationProps) {
   const { sm } = useMedia();
   const { knobProps } = useResolvedKnobs();
   const isMobile = !sm;
+  // LC-71: mount the composite-boundary ring sheet before Select/Input paint.
+  ensureCompositeFocusRing();
 
   const handlePageSizeChange = (newPageSize: number) => {
+    if (!Number.isFinite(newPageSize) || newPageSize <= 0) return;
+    if (newPageSize === pagination.pageSize && pagination.pageIndex === 0) return;
     onPaginationChange({
-      pageIndex: 0, // Reset to first page when changing page size
+      pageIndex: 0,
       pageSize: newPageSize,
     });
   };
@@ -87,138 +105,176 @@ export function DataTablePagination(props: DataTablePaginationProps) {
     }
   };
 
-  const handlePageJump = (pageNumber: string) => {
-    const page = Number.parseInt(pageNumber, 10) - 1; // Convert to 0-based
-    if (!Number.isNaN(page) && page >= 0 && page < (pagination.totalPages || 1)) {
-      handlePageChange(page);
-    }
-  };
-
-  const currentPage = pagination.pageIndex + 1; // Convert to 1-based for display
+  const currentPage = pagination.pageIndex + 1;
   const totalPages = pagination.totalPages || 1;
-  // 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;
+  const sizeOptions = useMemo(() => {
+    const sizes = new Set(pageSizeOptions.filter((n) => Number.isFinite(n) && n > 0));
+    if (pagination.pageSize > 0) sizes.add(pagination.pageSize);
+    return [...sizes].sort((a, b) => a - b);
+  }, [pageSizeOptions, pagination.pageSize]);
+
+  const showSize = showPageSizeSelector;
+  // Compact-inside-DataTable: the table footer already paints the range.
+  const showRange = showInfo && !(compact && insideTable);
+  const showJump = showPageJump && showPager && !compact && !isMobile;
+
+  const [jumpNonce, setJumpNonce] = useState(0);
+
+  const commitJump = (pageNumber: string, revertInvalid = false) => {
+    const page = Number.parseInt(pageNumber, 10) - 1;
+    if (!Number.isNaN(page) && page >= 0 && page < totalPages) {
+      if (page !== pagination.pageIndex) handlePageChange(page);
+      return;
+    }
+    if (revertInvalid) setJumpNonce((n) => n + 1);
+  };
+
+  if (!showPager && !showSize && !showRange) return null;
+
+  const helperText = {
+    ...knobProps.label,
+    color: "$color10" as const,
+    userSelect: "none" as const,
+  };
+
+  const sizeControl = showSize ? (
+    <XStack alignItems="center" gap="$2" flexShrink={0}>
+      <Text {...helperText}>Rows per page:</Text>
+      <View
+        width={controlWidth(Math.max(2, ...sizeOptions.map((n) => String(n).length)), 44)}
+        overflow="visible"
+        flexShrink={0}
+        {...({ "data-pagination-control": "size" } as object)}
+      >
+        <Select
+          value={String(pagination.pageSize)}
+          onChange={(value) => {
+            if (typeof value === "string") {
+              handlePageSizeChange(Number.parseInt(value, 10));
+            }
+          }}
+          options={sizeOptions.map((size) => ({
+            label: String(size),
+            value: String(size),
+          }))}
+          aria-label="Select rows per page"
+          size={knobProps.sizeToken}
+          compact
+        />
+      </View>
+    </XStack>
+  ) : null;
+
+  const pager = showPager ? (
+    <Pagination
+      variant="numbered"
+      total={totalPages}
+      page={currentPage}
+      onPageChange={(page) => handlePageChange(page - 1)}
+      showFirstLast={!compact && !isMobile}
+      aria-label="Page"
+    />
+  ) : null;
+
+  const jumpControl = showJump ? (
+    <XStack alignItems="center" gap="$2" flexShrink={0} aria-label="Jump to page">
+      <Text {...helperText}>Go to page:</Text>
+      <View
+        width={controlWidth(String(totalPages).length, 28)}
+        overflow="visible"
+        flexShrink={0}
+        {...({ "data-pagination-control": "jump" } as object)}
+      >
+        <Input
+          key={`${currentPage}-${jumpNonce}`}
+          defaultValue={String(currentPage)}
+          inputProps={{
+            inputMode: "numeric",
+            autoComplete: "off",
+            style: { textAlign: "center" },
+            onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => {
+              if (e.key === "Enter") {
+                commitJump((e.target as HTMLInputElement).value, true);
+              }
+            },
+          }}
+          placeholder={`1-${totalPages}`}
+          aria-label="Page number"
+          size={knobProps.sizeToken}
+          compact
+        />
+      </View>
+      <Text {...helperText} aria-hidden>
+        / {bidiIsolate(String(totalPages))}
+      </Text>
+    </XStack>
+  ) : null;
+
+  const rangeControl = showRange ? (
+    <Text {...helperText} aria-live="polite" whiteSpace="nowrap" flexShrink={0}>
+      {bidiIsolate(formatRange(startItem, endItem, totalCount))}
+    </Text>
+  ) : null;
+
+  const packed = compact && insideTable;
+
+  if (packed) {
     return (
-      <Pagination
-        variant="numbered"
-        total={totalPages}
-        page={currentPage}
-        onPageChange={(page) => handlePageChange(page - 1)}
-        paddingVertical="$1"
-        paddingHorizontal="$2"
+      <XStack
+        role="group"
         aria-label="Table pagination"
-      />
+        alignItems="center"
+        overflow="visible"
+        {...knobProps.gap}
+      >
+        {sizeControl}
+        {pager}
+      </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.
+    // UX-P08 / LC-10 + Axiom 15 (G-03): side clusters grow equally so the
+    // pager stays on the true centerline; when the row wraps each cluster
+    // keeps its own alignment line. rowGap stays on the within-group rhythm.
     <XStack
+      role="group"
+      aria-label="Table pagination"
       alignItems="center"
-      justifyContent="space-between"
+      overflow="visible"
       {...knobProps.gapLg}
       rowGap={knobProps.gap.gap}
       flexWrap="wrap"
       width="100%"
       paddingHorizontal={knobProps.panelPadding.padding}
       paddingVertical="$2"
-      aria-label="Table pagination"
     >
-      {/* Left Section - Page Size Selector */}
-      {showPageSizeSelector && !isMobile && (
-        <XStack alignItems="center" gap="$2" flexGrow={1} justifyContent="flex-start">
-          <Text fontSize={knobProps.sizeToken} color="$color10">
-            Rows per page:
-          </Text>
-          <View width={80}>
-            <Select
-              value={pagination.pageSize.toString()}
-              onValueChange={(value) => {
-                if (typeof value === "string") {
-                  handlePageSizeChange(Number.parseInt(value, 10));
-                }
-              }}
-              options={pageSizeOptions.map((size) => ({
-                label: size.toString(),
-                value: size.toString(),
-              }))}
-              aria-label="Select rows per page"
-              size={knobProps.sizeToken}
-              compact
-            />
-          </View>
-        </XStack>
-      )}
+      <XStack alignItems="center" flexGrow={1} flexBasis={0} justifyContent="flex-start">
+        {sizeControl}
+      </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
-          />
+      {pager ? (
+        <XStack alignItems="center" flexGrow={1} flexShrink={0} justifyContent="center">
+          {pager}
         </XStack>
-      )}
+      ) : null}
 
-      {/* 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>
-          )}
+      {(jumpControl || rangeControl) && (
+        <XStack
+          alignItems="center"
+          {...knobProps.gap}
+          flexGrow={1}
+          flexBasis={0}
+          flexShrink={0}
+          justifyContent="flex-end"
+        >
+          {jumpControl}
+          {rangeControl}
         </XStack>
       )}
     </XStack>

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

@@ -278,6 +278,46 @@ describe("DataTableSearch", () => {
       expect(onSearchResults).toHaveBeenCalled();
     });
   });
+  describe("LC-71 whole search box", () => {
+    it("nests the searchbox inside the composite ring (SearchInput, not a forked field)", () => {
+      const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
+      const searchInput = getByRole("searchbox");
+      expect(searchInput.closest(".mp-composite-ring")).not.toBeNull();
+    });
+    it("keeps options as a sibling control, not a second search field", () => {
+      const { getByRole } = renderWithProviders(<DataTableSearch {...defaultProps} />);
+      expect(getByRole("searchbox")).toBeDefined();
+      expect(getByRole("button", { name: "Search options" })).toBeDefined();
+    });
+  });
+  describe("matching", () => {
+    it("returns every row when the same term hits each row (no global-regex lastIndex skip)", async () => {
+      const onSearchResults = vi.fn();
+      const rows = [{ name: "a" }, { name: "a" }, { name: "a" }];
+      const { getByRole } = renderWithProviders(
+        <DataTableSearch
+          data={rows}
+          columns={[{ accessorKey: "name", header: "Name", id: "name", searchable: true }]}
+          debounceMs={0}
+          onSearchResults={onSearchResults}
+        />,
+      );
+      fireEvent.change(getByRole("searchbox"), { target: { value: "a" } });
+      await waitFor(() => {
+        const last = onSearchResults.mock.calls.at(-1);
+        expect(last?.[0]).toHaveLength(3);
+      });
+    });
+    it("announces shown-of-total in a live region", async () => {
+      const { getByRole } = renderWithProviders(
+        <DataTableSearch {...defaultProps} debounceMs={0} />,
+      );
+      fireEvent.change(getByRole("searchbox"), { target: { value: "Jane" } });
+      await waitFor(() => {
+        expect(getByRole("status").textContent).toMatch(/1 of 3/);
+      });
+    });
+  });
   describe("error handling", () => {
     it("should handle columns with invalid accessor keys gracefully", () => {
       const invalidColumns = [

package/src/components/DataTableSearch/DataTableSearch.stories.tsx

@@ -33,7 +33,7 @@ export default meta;
 export const Default = {
   name: "Main",
   render: () => (
-    <YStack width={400} padding="$4">
+    <YStack width={480} padding="$4">
       <DataTableSearch
         data={data}
         columns={columns}