@multiplatform.one/table 7.8.0 → 7.10.0

package/src/components/DataTable/dataTableMobileCards.spec.tsx

@@ -8,10 +8,14 @@
  * delete cluster beside the title, the delete floor at `minRows`, and the two
  * distinct empty-state copies (no data vs no results) — plus the rule that an
  * in-flight refetch paints NO empty state over a momentarily blank body.
+ *
+ * It also pins `classifyCardField`, which decides whether a field prints its
+ * column name at all. In the grid a header is written once for a whole
+ * column; on a card it would be written once per value.
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor, within } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumn, TableFilter } from "../../types";
 import { DataTable } from "./index";
@@ -52,7 +56,7 @@ describe("DataTableMobileCards", () => {
     expect(cards(container).length).toBe(people.length);
   });
 
-  it("the first visible column is the card title, the rest are label/value rows", () => {
+  it("the first visible column is the card title, the rest are classified fields", () => {
     const { container } = renderCards();
     const first = cards(container)[0];
     expect(first.querySelector('[data-card-slot="title"]')?.textContent).toBe("John");
@@ -69,6 +73,50 @@ describe("DataTableMobileCards", () => {
     expect(first.textContent).not.toContain("Last Name");
   });
 
+  it("a self-naming string goes bare, into one wrapped flow with its name hidden", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    const meta = first.querySelector('[data-card-slot="meta"]');
+    expect(meta).not.toBeNull();
+    expect(meta!.textContent).toContain("Doe");
+    expect(within(first).queryByText("Last Name")).toBeNull();
+    expect(first.textContent).toContain("Last Name:");
+  });
+
+  it("a figure keeps its column name, inline beside the value", () => {
+    const { container } = renderCards();
+    const first = cards(container)[0];
+    const figure = first.querySelector('[data-card-slot="figure"]');
+    expect(figure).not.toBeNull();
+    expect(figure!.textContent).toContain("28");
+    expect(within(first).getByText("Age")).toBeDefined();
+  });
+
+  it("a field with no value spends no row at all", () => {
+    const { container } = renderCards({
+      data: [{ id: 1, firstName: "John", lastName: "", age: 28 }],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="meta"]')).toBeNull();
+    expect(first.textContent).not.toContain("Last Name");
+  });
+
+  it("a control keeps a row of its own and prints no label", () => {
+    // Explicit id on BOTH columns: DataTable seeds columnOrder from
+    // `col.id || ""`, so an id-less accessor column beside an id'd one would
+    // put `_actions` first and make the control the card title instead.
+    const { container } = renderCards({
+      columns: [
+        { id: "firstName", accessorKey: "firstName", header: "First Name" },
+        { id: "_actions", accessorKey: "lastName", header: "Actions", meta: { role: "actions" } },
+      ],
+    });
+    const first = cards(container)[0];
+    expect(first.querySelector('[data-card-slot="control"]')).not.toBeNull();
+    expect(within(first).queryByText("Actions")).toBeNull();
+    expect(first.textContent).toContain("Actions:");
+  });
+
   it("selection adds a select-all bar above the stack and a checkbox per card", () => {
     const { container } = renderCards({ enableRowSelection: true });
     expect(screen.getByLabelText("Select all rows")).toBeTruthy();

package/src/components/DataTable/index.native.tsx

@@ -17,12 +17,12 @@ import { FlashList, type FlashListRef } from "@shopify/flash-list";
 import { AsyncBoundary, EmptyState, useDirection } from "@multiplatform.one/components";
 import { Button, Field, useFormField } from "@multiplatform.one/forms";
 import { flexRender } from "@tanstack/react-table";
-import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useRef, useMemo, useCallback } from "react";
 import { ScrollView, Text, View, useMedia, withStaticProperties } from "tamagui";
 import { useTranslation } from "react-i18next";
 import { useDataTable } from "../../hooks/useDataTable";
-import type { DataTableColumn, DataTableField } from "../../types";
+import type { DataTableColumn, DataTableField, SelectAllScope } from "../../types";
 import { DEFAULT_PAGE_SIZE_OPTIONS } from "../../utils/paginationDefaults";
 import { withInterp } from "../../utils/withInterp";
 import { DataTableColumnPinning } from "../DataTableColumnPinning";
@@ -38,6 +38,7 @@ import { DataTableCell } from "../DataTableCell";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableContext } from "./DataTableContext";
 import { DataTableDocumentList } from "./DataTableDocumentList";
+import { DataTableMobileCards } from "./DataTableMobileCards";
 import { dataTableChrome, resolveDataTableIntent, rowIntentProps } from "./dataTableChrome";
 import { tableRowStateProps } from "./rowStateChrome";
 import { DataTableStateContext } from "./DataTableStateContext";
@@ -134,6 +135,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   virtualizationOverscan = 5,
   enableRowExpansion = false,
   renderSubComponent,
+  enableRowSelection = false,
+  selectAllScope: selectAllScopeProp,
   enableColumnPinning = false,
   maxPinnedColumns = 3,
   enableKeyboardNavigation: _enableKeyboardNavigation = false,
@@ -181,6 +184,9 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     compact,
   });
   const chrome = dataTableChrome(String(knobProps.sizeToken));
+  // House selectAllScope knob (DG-TBL-03): prop overrides knob; default page.
+  const selectAllScope: SelectAllScope =
+    selectAllScopeProp ?? (knobProps.selectAllScope === "filtered" ? "filtered" : "page");
   const rowHeightPx = chrome.rowPx;
   // Collapsed expand-caret points toward inline-end, so it mirrors in RTL via
   // glyph swap (useDirection, Axiom 15); rotation sign flips so expanded
@@ -216,6 +222,7 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     virtualizationOverscan,
     enableRowExpansion,
     renderSubComponent,
+    enableRowSelection,
     enableColumnPinning,
     maxPinnedColumns,
     enableKeyboardNavigation: false,
@@ -225,6 +232,25 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     isFetching: isFetchingProp,
   });
 
+  const selectAllChecked =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsAllRowsSelected()
+      : table.getIsAllPageRowsSelected());
+  const selectAllIndeterminate =
+    enableRowSelection &&
+    (selectAllScope === "filtered"
+      ? table.getIsSomeRowsSelected() && !table.getIsAllRowsSelected()
+      : table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected());
+
+  const toggleSelectAll = useCallback(() => {
+    if (selectAllScope === "filtered") {
+      table.toggleAllRowsSelected();
+    } else {
+      table.toggleAllPageRowsSelected();
+    }
+  }, [selectAllScope, table]);
+
   const resolvedSize: "sm" | "md" | "lg" =
     size ?? (knobProps.sizeToken === "$3" ? "sm" : knobProps.sizeToken === "$5" ? "lg" : "md");
 
@@ -493,8 +519,8 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
   // (see utils/rowPress.ts). Roving tabindex is a web-only concern.
   const rowPressActive = Boolean(onRowPress) && !disabled;
 
-  const deriveRowLabel = useCallback(
-    (row: (typeof tableRows)[0], index: number): string => {
+  const deriveRowIdentity = useCallback(
+    (row: (typeof tableRows)[0]): string | undefined => {
       const fromAccessor = rowLabel?.(row.original as TData);
       if (fromAccessor) return fromAccessor;
       let firstCellValue: unknown;
@@ -509,13 +535,33 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       ) {
         return String(firstCellValue);
       }
-      return withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 });
+      return undefined;
     },
-    [rowLabel, t],
+    [rowLabel],
+  );
+
+  const deriveRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string =>
+      deriveRowIdentity(row) ??
+      withInterp(t("Row {{row}}", { row: index + 1 }), { row: index + 1 }),
+    [deriveRowIdentity, t],
+  );
+
+  // Selection-toggle name: row identity beats a bare index ("Select row
+  // Bulbasaur", falling back to "Select row 3"), the same source the grid
+  // and the card list both read.
+  const deriveSelectRowLabel = useCallback(
+    (row: (typeof tableRows)[0], index: number): string => {
+      const identity = deriveRowIdentity(row) ?? String(index + 1);
+      return withInterp(t("Select row {{row}}", { row: identity }), { row: identity });
+    },
+    [deriveRowIdentity, t],
   );
 
   const getRowPressProps = useCallback(
-    (row: (typeof tableRows)[0], index: number) => {
+    // The card list asks for the "card" variant. Native carries no DOM row
+    // role for it to override, so both variants land on role="button".
+    (row: (typeof tableRows)[0], index: number, _variant: "row" | "card" = "row") => {
       if (!rowPressActive) return {};
       return {
         onPress: () => onRowPress?.(row.original as TData, index),
@@ -551,101 +597,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
     [renderRowContent, tableZebraOn, t, getRowPressProps],
   );
 
-  const renderMobileCard = useCallback(
-    (row: (typeof tableRows)[0], index: number, onDelete?: (idx: number) => void) => {
-      const rowData = row.original as TData;
-      const visibleCells = row.getVisibleCells();
-      return (
-        <View
-          key={`${row.id}-${index}`}
-          backgroundColor="$color1"
-          borderRadius="$4"
-          borderWidth={1}
-          borderColor="$borderColor"
-          padding="$3"
-          marginBottom="$2"
-          {...(getRowPressProps(row, index) as any)}
-          {...(rowIntentProps(rowData) as any)}
-        >
-          {showRowNumbers && (
-            <View
-              flexDirection="row"
-              justifyContent="space-between"
-              paddingBottom="$2"
-              {...hairline.bottom}
-              borderBottomColor="$borderColor"
-              marginBottom="$2"
-            >
-              <Text fontSize="$3" color="$color10" fontWeight="600">
-                #{index + 1}
-              </Text>
-              {showDeleteRow && !readOnly && (
-                <Button
-                  chromeless
-                  circular
-                  size="$2"
-                  icon={TrashIcon}
-                  disabled={disabled || tableRows.length <= minRows}
-                  onPress={() => onDelete?.(index)}
-                  aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                    row: index + 1,
-                  })}
-                />
-              )}
-            </View>
-          )}
-          {visibleCells.map((cell: any) => {
-            const columnDef = cell.column.columnDef as DataTableColumn;
-            const headerLabel =
-              typeof columnDef.header === "string"
-                ? columnDef.header
-                : columnDef.id || cell.column.id;
-            return (
-              <View
-                key={cell.id}
-                flexDirection="row"
-                alignItems="center"
-                paddingVertical="$1.5"
-                gap="$2"
-              >
-                <Text fontSize="$3" color="$color10" fontWeight="500" width="40%" flexShrink={0}>
-                  {headerLabel}
-                </Text>
-                <View flex={1}>{renderCellContent(cell, index, rowData)}</View>
-              </View>
-            );
-          })}
-          {!showRowNumbers && showDeleteRow && !readOnly && (
-            <View paddingTop="$2" alignItems="flex-end">
-              <Button
-                chromeless
-                circular
-                size="$2"
-                icon={TrashIcon}
-                disabled={disabled || tableRows.length <= minRows}
-                onPress={() => onDelete?.(index)}
-                aria-label={withInterp(t("Delete row {{row}}", { row: index + 1 }), {
-                  row: index + 1,
-                })}
-              />
-            </View>
-          )}
-        </View>
-      );
-    },
-    [
-      showRowNumbers,
-      showDeleteRow,
-      readOnly,
-      disabled,
-      tableRows.length,
-      minRows,
-      renderCellContent,
-      t,
-      getRowPressProps,
-    ],
-  );
-
   const renderToolbarComponent = () => {
     if (renderToolbar) {
       return renderToolbar({
@@ -777,36 +728,37 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
               {showList ? (
                 <DataTableDocumentList
                   tableRows={displayRows}
+                  enableRowSelection={enableRowSelection}
                   disabled={disabled}
                   hasActiveFilters={computed.hasActiveFilters}
                   renderCellContent={renderCellContent}
                   compact={isCompact}
+                  selectRowLabel={deriveSelectRowLabel}
                   queryInFlight={queryInFlight}
                   {...(rowPressActive ? { getRowPressProps } : {})}
                 />
               ) : showCards ? (
                 <View flexDirection="column" gap="$2">
-                  {displayRows.length === 0 ? (
-                    queryInFlight ? null : (
-                      <EmptyState
-                        compact
-                        backgroundColor="$color1"
-                        borderRadius="$4"
-                        aria-live="polite"
-                        title={
-                          computed.hasActiveFilters ? t("No results found") : t("No data available")
-                        }
-                      />
-                    )
-                  ) : (
-                    displayRows.map((row, index) =>
-                      renderMobileCard(
-                        row,
-                        index,
-                        isFormMode ? effectiveHandleDeleteRow : handleDeleteRow,
-                      ),
-                    )
-                  )}
+                  <DataTableMobileCards
+                    tableRows={displayRows}
+                    enableRowSelection={enableRowSelection}
+                    showRowNumbers={showRowNumbers}
+                    showDeleteRow={showDeleteRow}
+                    readOnly={readOnly}
+                    disabled={disabled}
+                    dataLength={tableData.length}
+                    minRows={minRows}
+                    hasActiveFilters={computed.hasActiveFilters}
+                    renderCellContent={renderCellContent}
+                    onDeleteRow={isFormMode ? effectiveHandleDeleteRow : handleDeleteRow}
+                    selectAllChecked={selectAllChecked}
+                    selectAllIndeterminate={selectAllIndeterminate}
+                    onToggleSelectAll={toggleSelectAll}
+                    compact={isCompact}
+                    selectRowLabel={deriveSelectRowLabel}
+                    queryInFlight={queryInFlight}
+                    {...(rowPressActive ? { getRowPressProps } : {})}
+                  />
                   {enablePagination && (
                     <View width="100%" {...(disabled ? disabledState.chromeKnobProps : {})}>
                       {renderPaginationComponent()}
@@ -1099,7 +1051,6 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       virtualizationHeight,
       virtualizationOverscan,
       renderRow,
-      renderMobileCard,
       renderSubComponent,
       footerGroups,
       sm,
@@ -1118,6 +1069,11 @@ function DataTableRoot<TData extends Record<string, any> = Record<string, any>>(
       renderCellContent,
       rowPressActive,
       getRowPressProps,
+      enableRowSelection,
+      selectAllChecked,
+      selectAllIndeterminate,
+      toggleSelectAll,
+      deriveSelectRowLabel,
       displayRows,
       queryInFlight,
       t,

package/src/components/DataTable/nativeCardParity.spec.tsx

@@ -0,0 +1,95 @@
+/**
+ * One card renderer, two platforms.
+ *
+ * DataTableRoot.tsx (web) and index.native.tsx (native) are separate roots
+ * because native virtualizes through FlashList. The CARD LIST is not part
+ * of that split — a card has no platform-specific anatomy — so both roots
+ * render the same DataTableMobileCards rather than each drawing a card.
+ *
+ * MPO-285 shared the field RULE (classifyCardField, getColumnLabel) while
+ * leaving two copies of the JSX, and the two had already drifted: the
+ * native copy hardcoded its surface, and shipped without zebra striping,
+ * the selection checkbox, the empty states, and the TableCellContext that
+ * makes a field render chromeless. Sharing the rule alone does not stop
+ * that, because a new slot still has to be added twice.
+ *
+ * These assertions read source rather than render: the native root pulls in
+ * FlashList and the suite runs under happy-dom, so index.native.tsx is
+ * never the module a spec resolves. What the card DOES on native is covered
+ * by dataTableMobileCards.spec.tsx, which now describes both platforms.
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const DIR = resolve(__dirname);
+
+function read(file: string): string {
+  return readFileSync(resolve(DIR, file), "utf-8");
+}
+
+/** A `<Component ... />` element at a call site, as text. */
+function callSite(source: string, component: string): string {
+  const start = source.indexOf(`<${component}`);
+  if (start === -1) return "";
+  const end = source.indexOf("/>", start);
+  return end === -1 ? "" : source.slice(start, end);
+}
+
+/** Prop names that call site passes. */
+function propNames(source: string, component: string): Set<string> {
+  const names = new Set<string>();
+  for (const match of callSite(source, component).matchAll(/(?:^|\s)([A-Za-z][A-Za-z0-9]*)=\{/g)) {
+    names.add(match[1]!);
+  }
+  return names;
+}
+
+const cardCallSite = (source: string) => callSite(source, "DataTableMobileCards");
+
+describe("DataTable card renderer parity", () => {
+  it("the native root renders DataTableMobileCards and carries no card of its own", () => {
+    const native = read("index.native.tsx");
+    expect(native).toMatch(
+      /import \{[^}]*DataTableMobileCards[^}]*\} from "\.\/DataTableMobileCards"/,
+    );
+    expect(cardCallSite(native)).not.toBe("");
+    expect(native).not.toMatch(/renderMobileCard/);
+  });
+
+  it("the native root reaches the card field rule through the component, not directly", () => {
+    // MPO-285 left index.native.tsx importing classifyCardField/getColumnLabel
+    // to feed its own JSX. With the JSX shared there is nothing left to feed:
+    // an import here again would mean a second card had grown back.
+    const native = read("index.native.tsx");
+    expect(native).not.toMatch(/\bclassifyCardField\b/);
+    expect(native).not.toMatch(/\bgetColumnLabel\b/);
+  });
+
+  it("exactly one file in the component draws a card", () => {
+    const drawers = readdirSync(DIR)
+      .filter(
+        (file) => file.endsWith(".tsx") && !file.includes(".spec.") && !file.includes(".stories."),
+      )
+      .filter((file) => read(file).includes('testID="data-table-card"'));
+    expect(drawers).toEqual(["DataTableMobileCards.tsx"]);
+  });
+
+  // Both roots hand their row views the same contract. A prop web passes and
+  // native does not is how the card lost selection and the empty states in
+  // the first place, so it is the drift worth failing a build over.
+  it.each(["DataTableMobileCards", "DataTableDocumentList"])(
+    "native passes every %s prop web passes",
+    (component) => {
+      const web = propNames(read("DataTableRoot.tsx"), component);
+      const native = propNames(read("index.native.tsx"), component);
+      expect(web.size).toBeGreaterThan(0);
+      expect([...web].filter((prop) => !native.has(prop)).sort()).toEqual([]);
+    },
+  );
+
+  it("native hands the card list its press props, so a card is pressable there too", () => {
+    expect(cardCallSite(read("index.native.tsx"))).toMatch(/getRowPressProps/);
+  });
+});

package/types/components/DataTable/DataTableMobileCards.d.ts

@@ -5,16 +5,50 @@
  * resolved layout is "cards" (below the `$sm` breakpoint with
  * layout="auto", or forced via layout="cards").
  *
- * Card anatomy (knobs system): `surface` + `cardSurface` fragments own
- * the card frame; the first visible column renders as the card title in
- * the header row (with selection checkbox / row number / delete), and
- * the remaining visible columns render as label/value rows. Column
- * visibility and order from table state apply unchanged — cells come
- * from `row.getVisibleCells()`. Values render through the same cell
- * renderers as the grid, inside `TableCellContext` so fields stay
- * chromeless (useIsInTableCell).
+ * Card anatomy: the first visible column is the card title in the header
+ * row (with selection checkbox / row number / delete). The remaining
+ * visible columns are NOT a stack of label/value rows any more — see
+ * `classifyCardField`. Column visibility and order from table state apply
+ * unchanged — cells come from `row.getVisibleCells()`. Values render
+ * through the same cell renderers as the grid, inside `TableCellContext`
+ * so fields stay chromeless (useIsInTableCell).
+ *
+ * The card is FLAT: no border, no elevation. A card list is drawn inside
+ * a panel that already has its own frame, and an outlined, shadowed card
+ * inside it reads as a box inside a box. The `cardSurface` fill and the
+ * gap between cards are what separate one row from the next.
  */
 import type React from "react";
+/**
+ * Resolve the human label for a column: `meta.label` → string header →
+ * column id. `meta.label` is the explicit label channel for columns whose
+ * header is a render function or a bare glyph (the liked heart) — without
+ * it a card field row would print the raw column id (`_liked_by`).
+ */
+export declare function getColumnLabel(cell: any): string;
+export type CardFieldKind = "skip" | "control" | "bare" | "figure";
+/**
+ * Whether a card field prints the column's name, and where it goes.
+ *
+ * A card is not the grid with its header repeated down the page. In the
+ * grid the header is written ONCE for a whole column of values; on a card
+ * it is written once per value, so a 12-column table prints 12 labels per
+ * record. That is what a label costs here, and most labels do not earn it.
+ *
+ *   skip     the raw value is absent. A field with nothing in it is not a
+ *            fact — "Rejected —" spends a row saying nothing.
+ *   control  a button, a switch, a rating. The control names itself and
+ *            needs its own tap target, so it keeps a row and takes no label.
+ *   bare     a string that is neither a number nor a date. "DIVIDEND
+ *            CREDIT" and "Income:Dividends" say what they are; "Payee" and
+ *            "Account" in front of them are the header printed twice. The
+ *            name is kept for assistive tech via VisuallyHidden, which
+ *            costs no layout.
+ *   figure   a number, a date, a boolean. "1,204" alone cannot be read, so
+ *            these DO keep their label — inline beside the figure, not in a
+ *            40%-wide column of its own.
+ */
+export declare function classifyCardField(cell: any): CardFieldKind;
 export interface DataTableMobileCardsProps<TData> {
     tableRows: any[];
     enableRowSelection?: boolean;

package/types/components/DataTable/DataTableMobileCards.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableMobileCards.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableMobileCards.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAMH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjG,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACtE,SAAS,EACT,kBAA0B,EAC1B,cAAc,EACd,aAAa,EACb,QAAQ,EACR,QAAgB,EAChB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAwB,EACxB,sBAA8B,EAC9B,iBAAiB,EACjB,OAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAqB,GACtB,EAAE,yBAAyB,CAAC,KAAK,CAAC,2CAqLlC"}
+{"version":3,"file":"DataTableMobileCards.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTableMobileCards.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,GAAG,GAAG,MAAM,CAKhD;AAsBD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,GAAG,GAAG,aAAa,CAgB1D;AAED,MAAM,WAAW,yBAAyB,CAAC,KAAK;IAC9C,SAAS,EAAE,GAAG,EAAE,CAAC;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,iBAAiB,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,KAAK,KAAK,CAAC,SAAS,CAAC;IACpF,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IACxD;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjG,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACtE,SAAS,EACT,kBAA0B,EAC1B,cAAc,EACd,aAAa,EACb,QAAQ,EACR,QAAgB,EAChB,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,gBAAwB,EACxB,sBAA8B,EAC9B,iBAAiB,EACjB,OAAe,EACf,cAAc,EACd,gBAAgB,EAChB,aAAqB,GACtB,EAAE,yBAAyB,CAAC,KAAK,CAAC,2CA+OlC"}

package/types/components/DataTable/index.native.d.ts

@@ -17,7 +17,7 @@ export { DataTableContext } from "./DataTableContext";
 export { DataTableStateContext, useDataTableState } from "./DataTableStateContext";
 export type { DataTableStateContextValue } from "./DataTableStateContext";
 export type { DataTableRootProps } from "./DataTableRoot";
-declare function DataTableRoot<TData extends Record<string, any> = Record<string, any>>({ data, columns, initialState, onStateChange, onRetry, isLoading: isLoadingProp, isFetching: isFetchingProp, syncWithUrl, urlDebounceMs, urlStrategy, manualFiltering, manualPagination, manualSorting, enableFiltering, enableSorting, enablePagination, pageSizeOptions, enableColumnVisibility, enableColumnOrdering, enableColumnResizing, enableGlobalSearch, enableViews, layout, enableVirtualization, virtualizationHeight, virtualizationOverscan, enableRowExpansion, renderSubComponent, enableColumnPinning, maxPinnedColumns, enableKeyboardNavigation: _enableKeyboardNavigation, onRowPress, rowLabel, readOnly, onCellChange, name, form: formProp, showRowNumbers, showAddRow, showDeleteRow, minRows, maxRows, defaultRow, onDataChange, rowCount, pageCount, renderToolbar, renderPagination, renderFilters, className: _className, size, compact, disabled, accent, error, warning, success, children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: DataTableRootProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableRoot<TData extends Record<string, any> = Record<string, any>>({ data, columns, initialState, onStateChange, onRetry, isLoading: isLoadingProp, isFetching: isFetchingProp, syncWithUrl, urlDebounceMs, urlStrategy, manualFiltering, manualPagination, manualSorting, enableFiltering, enableSorting, enablePagination, pageSizeOptions, enableColumnVisibility, enableColumnOrdering, enableColumnResizing, enableGlobalSearch, enableViews, layout, enableVirtualization, virtualizationHeight, virtualizationOverscan, enableRowExpansion, renderSubComponent, enableRowSelection, selectAllScope: selectAllScopeProp, enableColumnPinning, maxPinnedColumns, enableKeyboardNavigation: _enableKeyboardNavigation, onRowPress, rowLabel, readOnly, onCellChange, name, form: formProp, showRowNumbers, showAddRow, showDeleteRow, minRows, maxRows, defaultRow, onDataChange, rowCount, pageCount, renderToolbar, renderPagination, renderFilters, className: _className, size, compact, disabled, accent, error, warning, success, children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: DataTableRootProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare const DataTable: typeof DataTableRoot & {
     Toolbar: typeof DataTableToolbar;
     Filters: typeof DataTableFilters;

package/types/components/DataTable/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AASzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0D1D,iBAAS,aAAa,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAC9E,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,aAAoB,EACpB,gBAAuB,EACvB,eAAe,EACf,sBAA6B,EAC7B,oBAA4B,EAC5B,oBAA4B,EAC5B,kBAAyB,EACzB,WAAmB,EACnB,MAAe,EACf,oBAA4B,EAC5B,oBAAoB,EACpB,sBAA0B,EAC1B,kBAA0B,EAC1B,kBAAkB,EAClB,mBAA2B,EAC3B,gBAAoB,EACpB,wBAAwB,EAAE,yBAAiC,EAC3D,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,cAAsB,EACtB,UAAkB,EAClB,aAAqB,EACrB,OAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,SAAS,EAAE,UAAU,EACrB,IAAI,EACJ,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CA08B3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;CAUpB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.native.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAuBH,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACnF,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AA0D1D,iBAAS,aAAa,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EAC9E,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,WAAmB,EACnB,aAAmB,EACnB,WAAW,EACX,eAAuB,EACvB,gBAAwB,EACxB,aAAqB,EACrB,eAAsB,EACtB,aAAoB,EACpB,gBAAuB,EACvB,eAAe,EACf,sBAA6B,EAC7B,oBAA4B,EAC5B,oBAA4B,EAC5B,kBAAyB,EACzB,WAAmB,EACnB,MAAe,EACf,oBAA4B,EAC5B,oBAAoB,EACpB,sBAA0B,EAC1B,kBAA0B,EAC1B,kBAAkB,EAClB,kBAA0B,EAC1B,cAAc,EAAE,kBAAkB,EAClC,mBAA2B,EAC3B,gBAAoB,EACpB,wBAAwB,EAAE,yBAAiC,EAC3D,UAAU,EACV,QAAQ,EACR,QAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EAAE,QAAQ,EACd,cAAsB,EACtB,UAAkB,EAClB,aAAqB,EACrB,OAAW,EACX,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,SAAS,EAAE,UAAU,EACrB,IAAI,EACJ,OAAe,EACf,QAAgB,EAChB,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,EACnC,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,CAAC,2CA25B3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;CAUpB,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC"}