@multiplatform.one/table 7.30.1 → 7.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table",
-  "version": "7.30.1",
+  "version": "7.31.0",
   "description": "Advanced table components with filtering, pagination, sorting, and URL state management",
   "keywords": [
     "cross-platform",
@@ -74,13 +74,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "7.30.1",
-    "@multiplatform.one/forms": "7.30.1",
-    "@multiplatform.one/platform": "7.30.1",
-    "@multiplatform.one/rich-text": "7.30.1",
-    "@multiplatform.one/router": "7.30.1",
-    "@multiplatform.one/table-primitives": "7.30.1",
-    "@multiplatform.one/theme": "7.30.1",
+    "@multiplatform.one/components": "7.31.0",
+    "@multiplatform.one/forms": "7.31.0",
+    "@multiplatform.one/platform": "7.31.0",
+    "@multiplatform.one/rich-text": "7.31.0",
+    "@multiplatform.one/router": "7.31.0",
+    "@multiplatform.one/table-primitives": "7.31.0",
+    "@multiplatform.one/theme": "7.31.0",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/roving-focus": "2.7.6",
@@ -90,10 +90,10 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.30.1",
-    "@multiplatform.one/router": "7.30.1",
-    "@multiplatform.one/storybook": "7.30.1",
-    "@multiplatform.one/test-utils": "7.30.1",
+    "@multiplatform.one/config": "7.31.0",
+    "@multiplatform.one/router": "7.31.0",
+    "@multiplatform.one/storybook": "7.31.0",
+    "@multiplatform.one/test-utils": "7.31.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/react-dom": "^19.2.3",

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

@@ -4,6 +4,7 @@ import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import { Preset } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import React from "react";
+import { within } from "storybook/test";
 // Catalog Button + Input (LC-56 STORY-HONESTY — no raw interactive primitives).
 import { Button, Input } from "@multiplatform.one/forms";
 import { Text, View, XStack, YStack } from "tamagui";
@@ -655,7 +656,14 @@ function sleep(ms: number) {
  * 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 }) {
+function InfiniteLoaderDemo({
+  latencyMs,
+  holdFromPage,
+}: {
+  latencyMs: number;
+  /** Pages from this index on are requested and never answered. */
+  holdFromPage?: number;
+}) {
   const allRows = React.useMemo(() => makeDemoRows(200), []);
   const startRef = React.useRef(Date.now());
   const [log, setLog] = React.useState<string[]>([]);
@@ -671,6 +679,9 @@ function InfiniteLoaderDemo({ latencyMs }: { latencyMs: number }) {
         ...prev,
         `page-${query.pageIndex} @ ${elapsed}ms${sortSuffix}${searchSuffix}`,
       ]);
+      if (holdFromPage !== undefined && query.pageIndex >= holdFromPage) {
+        await new Promise(() => undefined);
+      }
       await sleep(latencyMs);
       const rows = query.globalFilter
         ? allRows.filter((row) =>
@@ -691,7 +702,7 @@ function InfiniteLoaderDemo({ latencyMs }: { latencyMs: number }) {
         totalCount: rows.length,
       };
     },
-    [allRows, latencyMs],
+    [allRows, latencyMs, holdFromPage],
   );
 
   return (
@@ -728,9 +739,30 @@ export const InfiniteScrollLoader: Story = {
   render: () => <InfiniteLoaderDemo latencyMs={250} />,
 };
 
-/** Slow loader (1.2s/page): shows the bounded tail skeleton while appending. */
+// True under Playwright, as for the preview's frozen clock.
+const automatedCapture = typeof navigator !== "undefined" && navigator.webdriver;
+
+/**
+ * Slow loader (1.2s/page): shows the bounded tail skeleton while appending.
+ *
+ * The play scrolls page 2 in and asks for page 3, and under automated capture
+ * page 3 never answers, so the shot is pages 1 and 2 plus the tail skeleton.
+ * Left to the timer, lost-pixel's full-height resize revealed the sentinel
+ * and froze either the skeleton or rows 21 to 23 (MPO-483).
+ */
 export const InfiniteScrollSlowLoader: Story = {
-  render: () => <InfiniteLoaderDemo latencyMs={1200} />,
+  render: () => (
+    <InfiniteLoaderDemo latencyMs={1200} holdFromPage={automatedCapture ? 2 : undefined} />
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await canvas.findByText("Item 020", {}, { timeout: 20000 });
+    canvas.getByTestId("infinite-sentinel").scrollIntoView();
+    await canvas.findByText("Item 040", {}, { timeout: 20000 });
+    canvas.getByTestId("infinite-sentinel").scrollIntoView();
+    await canvas.findByTestId("infinite-append-skeleton", {}, { timeout: 20000 });
+  },
+  parameters: { lostpixel: { waitForPlay: true } },
 };
 
 /** Infinite + virtualized body: appended pages extend the virtual scroll range. */