@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTable/DataTableStateContext.ts

@@ -11,11 +11,32 @@
 
 import { createContext, useContext } from "react";
 import type { Table as ReactTable } from "@tanstack/react-table";
-import type { DataTableState } from "../../types";
+import type { DataTableState, SelectAllScope } from "../../types";
+
+/**
+ * What the toolbar filter surface should edit when it opens:
+ * - `new`: start from the searchable field list
+ * - `advanced`: an existing toolbar/hidden-field filter (chip press)
+ * - `column`: an existing column-funnel filter (chip press)
+ */
+export type FilterEditTarget =
+  | { kind: "new" }
+  | { kind: "advanced"; filterId: string }
+  | { kind: "column"; columnId: string };
+
+/** Shared channel between the filter chips bar and the toolbar filter surface. */
+export interface DataTableFilterUi {
+  editTarget: FilterEditTarget | null;
+  requestEdit: (target: FilterEditTarget | null) => void;
+}
 
 export interface DataTableStateContextValue<TData = any> {
   table: ReactTable<TData>;
   state: DataTableState;
+  /** Effective select-all scope (house `selectAllScope` knob / prop). */
+  selectAllScope?: SelectAllScope;
+  /** Chip-press → toolbar filter editor channel. Present when Root wires it. */
+  filterUi?: DataTableFilterUi;
   actions: {
     setGlobalFilter: (value: string) => void;
     setFilters: (filters: any[]) => void;
@@ -37,6 +58,8 @@ export interface DataTableStateContextValue<TData = any> {
     filteredData: any[];
     paginatedData: any[];
     totalPages: number;
+    /** Total row count across all pages (post-filter; server total when paginating manually). */
+    totalRows: number;
     hasActiveFilters: boolean;
     activeFilterCount: number;
     [key: string]: any;

package/src/components/DataTable/DataTableVirtualized.tsx

@@ -8,7 +8,8 @@
  */
 
 import type React from "react";
-import { View } from "tamagui";
+import { Skeleton } from "@multiplatform.one/components";
+import { Text, View } from "tamagui";
 
 const rowHeightPx = 40;
 
@@ -26,10 +27,21 @@ export interface DataTableVirtualizedProps {
   enableKeyboardNavigation: boolean;
   keyboardNav: any;
   getColSizeProps: (col: any) => any;
-  renderRowContent: (row: any, rowIndex: number, isLastRow: boolean) => React.ReactNode;
+  renderRowContent: (
+    row: any,
+    rowIndex: number,
+    isLastRow: boolean,
+    cellElement?: "div",
+  ) => React.ReactNode;
   extraColumnsBefore: number;
   extraColumnsAfter: number;
   table: any;
+  /**
+   * Infinite mode: the virtual count includes one extra tail row past the
+   * loaded rows. It renders a skeleton (append affordance) and extends the
+   * scroll range so appended pages grow geometry seamlessly.
+   */
+  hasInfiniteTail?: boolean;
 }
 
 export function DataTableVirtualized({
@@ -47,6 +59,7 @@ export function DataTableVirtualized({
   keyboardNav,
   getColSizeProps,
   renderRowContent,
+  hasInfiniteTail = false,
 }: DataTableVirtualizedProps) {
   return (
     <div
@@ -69,9 +82,88 @@ export function DataTableVirtualized({
       >
         {virtualItems.map((virtualRow: any) => {
           const row = tableRows[virtualRow.index];
-          if (!row) return null;
+          if (!row) {
+            // Infinite tail row (index === tableRows.length): bounded append
+            // skeleton, never an infinite spinner.
+            if (!hasInfiniteTail || virtualRow.index !== tableRows.length) return null;
+            return (
+              <View
+                key="infinite-tail"
+                position="absolute"
+                top={0}
+                left={0}
+                width="100%"
+                style={{
+                  transform: `translateY(${virtualRow.start}px)`,
+                  height: virtualRow.size,
+                  minHeight: rowHeightPx,
+                }}
+                flexDirection="row"
+                alignItems="center"
+                paddingHorizontal="$2"
+                aria-hidden
+                {...({ "data-testid": "infinite-append-skeleton" } as any)}
+              >
+                <Skeleton width="100%" height={rowHeightPx - 8} />
+              </View>
+            );
+          }
           const isLastRow = virtualRow.index === tableRows.length - 1;
 
+          // Grouped row: render the group header (expand toggle + value +
+          // count) instead of data cells. Without this branch a TanStack
+          // group row fell through renderRowContent and painted garbage
+          // cells with no way to expand the group.
+          if (row.getIsGrouped?.()) {
+            return (
+              <View
+                key={row.id}
+                position="absolute"
+                top={0}
+                left={0}
+                width="100%"
+                style={{
+                  transform: `translateY(${virtualRow.start}px)`,
+                  height: virtualRow.size,
+                  minHeight: rowHeightPx,
+                }}
+                flexDirection="row"
+                alignItems="center"
+                backgroundColor="$color3"
+                role="row"
+                aria-rowindex={virtualRow.index + 1}
+              >
+                <View
+                  flexDirection="row"
+                  alignItems="center"
+                  gap="$2"
+                  paddingLeft={(row.depth ?? 0) * 16 + 8}
+                  cursor="pointer"
+                  onPress={() => row.toggleExpanded()}
+                  role="button"
+                  tabIndex={0}
+                  aria-expanded={row.getIsExpanded()}
+                  {...({
+                    onKeyDown: (e: React.KeyboardEvent) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        row.toggleExpanded();
+                      }
+                    },
+                  } as any)}
+                >
+                  <Text fontFamily="$mono" fontSize="$3">
+                    {row.getIsExpanded() ? "▼" : "▶"}
+                  </Text>
+                  <Text fontWeight="600">{String(row.groupingValue ?? "—")}</Text>
+                  <Text color="$placeholderColor" fontSize="$2">
+                    ({row.subRows?.length ?? 0})
+                  </Text>
+                </View>
+              </View>
+            );
+          }
+
           return (
             <View
               key={row.id}
@@ -97,7 +189,9 @@ export function DataTableVirtualized({
               role="row"
               aria-rowindex={virtualRow.index + 1}
             >
-              {renderRowContent(row, virtualRow.index, isLastRow)}
+              {/* div cells (role="cell" via the primitive): a real <td> is
+                  not a valid child of the absolutely-positioned div rows */}
+              {renderRowContent(row, virtualRow.index, isLastRow, "div")}
             </View>
           );
         })}

package/src/components/DataTable/FieldsInCells.stories.tsx

@@ -5,6 +5,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { fn } from "storybook/test";
 import React from "react";
 import { Text, View, YStack, H3 } from "tamagui";
 import type { DataTableColumn, DataTableData } from "../../types";
@@ -86,11 +87,15 @@ const sampleData: SampleRow[] = [
   },
 ];
 
+// DG-CTRL-01: keep Select/Combobox fixtures >5 options — shorter lists trip
+// the `select-too-few-options` guardrail (UX-P19).
 const statusOptions = [
   { label: "Live", value: "live" },
   { label: "Building", value: "building" },
   { label: "Draft", value: "draft" },
   { label: "Failed", value: "failed" },
+  { label: "Paused", value: "paused" },
+  { label: "Archived", value: "archived" },
 ];
 
 const frameworkOptions = [
@@ -99,6 +104,7 @@ const frameworkOptions = [
   { label: "Expo", value: "expo" },
   { label: "Astro", value: "astro" },
   { label: "Hono", value: "hono" },
+  { label: "Vite", value: "vite" },
 ];
 
 const columns: DataTableColumn<SampleRow>[] = [
@@ -174,6 +180,16 @@ const meta: Meta<typeof DataTable> = {
   title: "Table/Fields in Cells",
   component: DataTable,
   parameters: { layout: "fullscreen" },
+  args: {
+    onStateChange: fn(),
+    onCellChange: fn(),
+    onDataChange: fn(),
+  },
+  argTypes: {
+    readOnly: { control: "boolean" },
+    compact: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
   decorators: [
     (Story) => (
       <View flex={1} padding="$4" width="100%">
@@ -186,8 +202,53 @@ const meta: Meta<typeof DataTable> = {
 export default meta;
 type Story = StoryObj<typeof DataTable>;
 
+/**
+ * Stateful harness so controlled fields (select, checkbox, switch, rating,
+ * colorpicker, …) actually persist edits in-story. Committed data is echoed
+ * below the table (testID "fields-in-cells-data") for verification.
+ */
+function WiredTable<TData extends DataTableData>({
+  data: initialData,
+  columns: tableColumns,
+  onDataChange,
+  onCellChange,
+  ...rest
+}: {
+  data: TData[];
+  columns: DataTableColumn<TData>[];
+  [key: string]: any;
+}) {
+  const [data, setData] = React.useState<TData[]>(initialData);
+  return (
+    <YStack flex={1} minHeight={0} gap="$3">
+      <YStack flex={1} minHeight={0}>
+        <DataTable<TData>
+          data={data}
+          columns={tableColumns}
+          onDataChange={(next: TData[]) => {
+            setData(next);
+            onDataChange?.(next);
+          }}
+          onCellChange={onCellChange}
+          {...rest}
+        />
+      </YStack>
+      <Text
+        testID="fields-in-cells-data"
+        fontSize="$1"
+        color="$placeholderColor"
+        fontFamily="$mono"
+      >
+        committed: {JSON.stringify(data)}
+      </Text>
+    </YStack>
+  );
+}
+
+// These stories demo cell FIELDS on a 3-row single-page fixture; pagination
+// chrome is off so the footer never rests on bare-disabled nav (UX-P19).
 export const ReadOnly: Story = {
-  render: () => (
+  render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
         <H3>Read-only — every cell routes through FieldDisplay</H3>
@@ -196,25 +257,254 @@ export const ReadOnly: Story = {
         </Text>
       </YStack>
       <YStack flex={1} minHeight={0}>
-        <DataTable<SampleRow> data={sampleData} columns={columns} readOnly />
+        <DataTable<SampleRow>
+          data={sampleData}
+          columns={columns}
+          enablePagination={false}
+          {...(args as any)}
+          readOnly
+        />
       </YStack>
     </YStack>
   ),
 };
 
 export const Editable: Story = {
-  render: () => (
+  render: (args) => (
     <YStack gap="$4" flex={1} minHeight={0}>
       <YStack gap="$2">
         <H3>Editable — cells mount the full Edit field component</H3>
         <Text color="$placeholderColor">
-          Same column set, edit mode. Use this view to compare field heights and spot
-          popover-clipping issues against the read-only baseline above.
+          Same column set, edit mode, wired: onDataChange commits edits to story state. Use this
+          view to compare field heights and spot popover-clipping issues against the read-only
+          baseline above.
+        </Text>
+      </YStack>
+      <WiredTable<SampleRow>
+        columns={columns}
+        enablePagination={false}
+        {...(args as any)}
+        data={sampleData}
+      />
+    </YStack>
+  ),
+};
+
+// ── Extended coverage: field types missing from the core harness ──
+
+interface ExtendedRow extends DataTableData {
+  id: string;
+  summary: string;
+  volume: number;
+  priority: string;
+  format: string;
+  standup: string;
+  sprint: { start: Date | null; end: Date | null };
+  holidays: Date[];
+  runtime: number;
+  phone: string;
+  pin: string;
+}
+
+const extendedData: ExtendedRow[] = [
+  {
+    id: "1",
+    summary: "Refactor auth flow\nacross web + native",
+    volume: 65,
+    priority: "high",
+    format: "bold",
+    standup: "09:30",
+    sprint: { start: new Date("2024-11-04"), end: new Date("2024-11-15") },
+    holidays: [new Date("2024-11-28"), new Date("2024-11-29")],
+    runtime: 5400,
+    phone: "+15125551234",
+    pin: "1234",
+  },
+  {
+    id: "2",
+    summary: "Ship the table field matrix",
+    volume: 30,
+    priority: "medium",
+    format: "italic",
+    standup: "14:00",
+    sprint: { start: new Date("2024-12-02"), end: new Date("2024-12-13") },
+    holidays: [new Date("2024-12-25")],
+    runtime: 900,
+    phone: "+918074052136",
+    pin: "9876",
+  },
+];
+
+const priorityOptions = [
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high" },
+];
+
+const formatOptions = [
+  { label: "Bold", value: "bold" },
+  { label: "Italic", value: "italic" },
+  { label: "Underline", value: "underline" },
+];
+
+const extendedColumns: DataTableColumn<ExtendedRow>[] = [
+  { accessorKey: "summary", header: "Summary (textarea)", field: "textarea" },
+  {
+    accessorKey: "volume",
+    header: "Volume (slider)",
+    field: "slider",
+    fieldProps: { min: 0, max: 100, step: 5 },
+  },
+  {
+    accessorKey: "priority",
+    header: "Priority (radiogroup)",
+    field: "radiogroup",
+    fieldProps: { options: priorityOptions },
+  },
+  {
+    accessorKey: "format",
+    header: "Format (togglegroup)",
+    field: "togglegroup",
+    fieldProps: { options: formatOptions },
+  },
+  {
+    accessorKey: "standup",
+    header: "Standup (timepicker)",
+    field: "timepicker",
+    fieldProps: { timeFormat: "24h" },
+  },
+  { accessorKey: "sprint", header: "Sprint (daterange)", field: "daterangepicker" },
+  { accessorKey: "holidays", header: "Holidays (multidate)", field: "multidatepicker" },
+  { accessorKey: "runtime", header: "Runtime (duration)", field: "duration" },
+  {
+    accessorKey: "phone",
+    header: "Phone",
+    field: "phoneinput",
+    fieldProps: { defaultCountry: "US" },
+  },
+  { accessorKey: "pin", header: "PIN (otp)", field: "otp", fieldProps: { otpLength: 4 } },
+];
+
+export const EditableExtended: Story = {
+  render: (args) => (
+    <YStack gap="$4" flex={1} minHeight={0}>
+      <YStack gap="$2">
+        <H3>Extended field types — textarea, slider, radio, toggle, time, ranges, otp</H3>
+        <Text color="$placeholderColor">
+          The field types the core harness omits: textarea, slider, radiogroup, togglegroup,
+          timepicker, daterangepicker, multidatepicker, duration, phoneinput, otp. All wired through
+          onDataChange.
         </Text>
       </YStack>
+      <WiredTable<ExtendedRow>
+        columns={extendedColumns}
+        enablePagination={false}
+        {...(args as any)}
+        data={extendedData}
+      />
+    </YStack>
+  ),
+};
+
+export const ReadOnlyExtended: Story = {
+  render: (args) => (
+    <YStack gap="$4" flex={1} minHeight={0}>
+      <YStack gap="$2">
+        <H3>Extended field types — read-only</H3>
+      </YStack>
       <YStack flex={1} minHeight={0}>
-        <DataTable<SampleRow> data={sampleData} columns={columns} />
+        <DataTable<ExtendedRow>
+          data={extendedData}
+          columns={extendedColumns}
+          enablePagination={false}
+          {...(args as any)}
+          readOnly
+        />
+      </YStack>
+    </YStack>
+  ),
+};
+
+// ── Heavy editors: cell shows a summary, click opens the modal editor ──
+
+interface HeavyRow extends DataTableData {
+  id: string;
+  note: string;
+  sku: string;
+  attachment: string;
+  photo: string;
+  signature: string;
+  site: { lat: number; lng: number };
+  brief: string;
+  readme: string;
+  snippet: string;
+}
+
+const heavyData: HeavyRow[] = [
+  {
+    id: "1",
+    note: "Ping @alice when the build is green",
+    sku: "0123456789012",
+    attachment: "report.pdf",
+    photo: "https://i.pravatar.cc/100?img=12",
+    signature: "",
+    site: { lat: 30.2672, lng: -97.7431 },
+    brief: "<p>Launch plan for <strong>Q4</strong></p>",
+    readme: "# Setup\n\nRun `make prepare`.",
+    snippet: "function add(a, b) {\n  return a + b;\n}",
+  },
+  {
+    id: "2",
+    note: "Waiting on @bob for the API keys",
+    sku: "9780201379624",
+    attachment: "",
+    photo: "",
+    signature: "",
+    site: { lat: 12.9716, lng: 77.5946 },
+    brief: "",
+    readme: "",
+    snippet: "",
+  },
+];
+
+const mentionUsers = [
+  { id: "alice", display: "Alice" },
+  { id: "bob", display: "Bob" },
+];
+
+const heavyColumns: DataTableColumn<HeavyRow>[] = [
+  {
+    accessorKey: "note",
+    header: "Note (mention)",
+    field: "mentioninput",
+    fieldProps: { mentions: mentionUsers },
+  },
+  { accessorKey: "sku", header: "SKU (barcode)", field: "barcode" },
+  { accessorKey: "attachment", header: "File", field: "fileupload" },
+  { accessorKey: "photo", header: "Photo (image)", field: "image" },
+  { accessorKey: "signature", header: "Signature", field: "signature" },
+  { accessorKey: "site", header: "Site (geo)", field: "geolocation" },
+  { accessorKey: "brief", header: "Brief (richtext)", field: "richtexteditor" },
+  { accessorKey: "readme", header: "Readme (markdown)", field: "markdowneditor" },
+  { accessorKey: "snippet", header: "Snippet (code)", field: "codeeditor" },
+];
+
+export const EditableHeavy: Story = {
+  render: (args) => (
+    <YStack gap="$4" flex={1} minHeight={0}>
+      <YStack gap="$2">
+        <H3>Heavy editors — mention, barcode, file, image, signature, geo, rich text, code</H3>
+        <Text color="$placeholderColor">
+          Edits too big for the cell: the cell shows a compact FieldDisplay summary and clicking
+          opens the modal editor (CellModalEditor). All wired through onDataChange.
+        </Text>
       </YStack>
+      <WiredTable<HeavyRow>
+        columns={heavyColumns}
+        enablePagination={false}
+        {...(args as any)}
+        data={heavyData}
+      />
     </YStack>
   ),
 };