@multiplatform.one/frappe-ui 7.7.6 → 7.10.0

package/src/FrappeTable.autoHeight.spec.tsx

@@ -0,0 +1,142 @@
+/**
+ * MPO-229: FrappeTable must not collapse to a sliver in an auto-height parent.
+ *
+ * The wrapper YStack used `flex={1}`, which in React Native's flex model is
+ * `1 1 0` with a basis of ZERO. A basis-0 chain inside a parent that has no
+ * height of its own resolves to 0, so the whole table rendered as a one-row
+ * sliver. DataTableRoot's own root already avoids exactly this (grow 1 /
+ * shrink 1 / basis auto / minHeight 0, and it carries the note saying why).
+ * The FrappeTable wrapper sitting above it reintroduced the trap.
+ *
+ * Two halves here. The render cases pin the behaviour a caller sees: 12 rows
+ * in a plain auto-height parent, and the same table in a fixed-height parent.
+ * The source cases are the mechanical guard, because happy-dom runs no flex
+ * layout, so a basis-0 regression is invisible to a rendered assertion and
+ * only the geometry itself can be checked.
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { YStack } from "tamagui";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  if (!i18next.isInitialized) {
+    await i18next.use(initReactI18next).init({
+      lng: "en",
+      interpolation: { escapeValue: false },
+      resources: { en: { translation: {} } },
+    });
+  }
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+interface Customer {
+  name: string;
+  doctype: string;
+  customer_name: string;
+}
+
+const customers: Customer[] = Array.from({ length: 12 }, (_, index) => ({
+  name: `CUST-${String(index + 1).padStart(3, "0")}`,
+  doctype: "Customer",
+  customer_name: `Customer ${index + 1}`,
+}));
+
+const columns: DataTableColumn<Partial<Customer>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "customer_name", accessorKey: "customer_name", header: "Customer Name" },
+];
+
+// Supplied so the table does not go to useDocTypeMeta for the filter list.
+const filterFields = [{ id: "customer_name", label: "Customer Name", type: "text" as const }];
+
+function renderInParent(parent: React.ReactElement) {
+  return renderWithProviders(
+    <FrappeProvider
+      baseURL="https://frappetable-autoheight.spec.test"
+      fixtures={new InMemoryFixtureProvider({ Customer: customers })}
+    >
+      {parent}
+    </FrappeProvider>,
+  );
+}
+
+const table = (
+  <FrappeTable<Customer>
+    doctype="Customer"
+    columns={columns}
+    filterableFields={filterFields}
+    layout="table"
+    enablePagination={false}
+  />
+);
+
+const srcDir = path.resolve(__dirname, ".");
+
+function read(file: string): string {
+  return fs.readFileSync(path.resolve(srcDir, file), "utf-8");
+}
+
+function codeOnly(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "");
+}
+
+describe("FrappeTable in an auto-height parent (MPO-229)", () => {
+  it("renders every row inside a plain auto-height YStack", async () => {
+    renderInParent(<YStack>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+    expect(screen.queryByText(/No Customer records found/i)).toBeNull();
+  });
+
+  it("still renders every row inside a fixed-height parent", async () => {
+    renderInParent(<YStack height={400}>{table}</YStack>);
+    await screen.findByText("Customer 1");
+    for (const customer of customers) {
+      expect(screen.getByText(customer.customer_name)).toBeTruthy();
+    }
+  });
+
+  it("roots grow and shrink on a basis of auto, the same geometry as DataTableRoot", () => {
+    const source = codeOnly(read("FrappeTable.tsx"));
+
+    // flex={1} is 1 1 0 in RN. Basis 0 in an auto-height parent resolves to 0
+    // and the table collapses to a one-row sliver.
+    expect(source).not.toContain("flex={1}");
+
+    const tags = source.match(/<YStack\b[^>]*>/g) ?? [];
+    const roots = tags.filter((tag) => tag.includes("flexBasis"));
+    expect(roots.length).toBe(2);
+    for (const root of roots) {
+      expect(root).toContain("flexGrow={1}");
+      expect(root).toContain("flexShrink={1}");
+      expect(root).toContain('flexBasis="auto"');
+      expect(root).toContain("minHeight={0}");
+    }
+  });
+
+  it("DataTableRoot still carries the geometry FrappeTable copies", () => {
+    const source = codeOnly(read("../../table/src/components/DataTable/DataTableRoot.tsx"));
+    const tags = source.match(/<View\b[^>]*>/g) ?? [];
+    const root = tags.find((tag) => tag.includes("flexBasis"));
+    expect(root).toBeTruthy();
+    expect(root).toContain("flexGrow={1}");
+    expect(root).toContain("flexShrink={1}");
+    expect(root).toContain('flexBasis="auto"');
+    expect(root).toContain("minHeight={0}");
+  });
+});

package/src/FrappeTable.rowAccumulator.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * A running balance on a FrappeTable (MPO-250).
+ *
+ * The gap this closes: `FrappeTableProps` omits `data`, so before the row
+ * accumulator existed there was NO prop that reached the rows. A consumer who
+ * wanted a folded column on a Frappe doctype had to fetch the doctype again
+ * itself and hand the folded rows to a bare DataTable — a second read path, a
+ * second error path, and no saved filters or refresh channel.
+ *
+ * What this locks: `rowAccumulator` passes through FrappeTable to the table,
+ * folds the rows FrappeTable already fetched, and the figures continue onto
+ * page two.
+ *
+ * Fixture-hermetic: postings ride InMemoryFixtureProvider.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import type { DataTableColumn, RowAccumulator } from "@multiplatform.one/table";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => cleanup());
+
+interface Posting {
+  name: string;
+  doctype: string;
+  date: string;
+  payee: string;
+  amount: number;
+  /** Derived by the accumulator — declared on the doc type so a column can
+   *  name it in accessorKey. */
+  running?: number;
+}
+
+const postings: Posting[] = Array.from({ length: 8 }, (_, i) => ({
+  name: `POST-${String(i + 1).padStart(2, "0")}`,
+  doctype: "Posting",
+  date: `2026-02-${String(i + 1).padStart(2, "0")}`,
+  payee: `Payee ${i + 1}`,
+  amount: 10,
+}));
+
+const runningBalance: RowAccumulator<Partial<Posting>, number> = {
+  initial: 0,
+  reduce: (carried, row) => carried + (row.amount ?? 0),
+  derive: (carried) => ({ running: carried }),
+  order: (a, b) => String(a.date).localeCompare(String(b.date)),
+};
+
+const columns: DataTableColumn<Partial<Posting>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "amount", accessorKey: "amount", header: "Amount" },
+  {
+    id: "running",
+    accessorKey: "running",
+    header: "Balance",
+    sortable: false,
+    // Marked so an assertion can tell a balance of 10 from an amount of 10.
+    cell: ({ row }) => `bal ${row.original.running}`,
+  },
+];
+
+const filterFields = [{ id: "payee", label: "Payee", type: "text" as const }];
+
+describe("FrappeTable rowAccumulator", () => {
+  it("folds the rows FrappeTable fetched, and page two continues", async () => {
+    const user = userEvent.setup();
+    renderWithProviders(
+      <FrappeProvider
+        baseURL="https://frappetable-fold.spec.test"
+        fixtures={new InMemoryFixtureProvider({ Posting: postings })}
+      >
+        <FrappeTable<Posting>
+          doctype="Posting"
+          columns={columns}
+          fields={["name", "date", "payee", "amount"]}
+          filterableFields={filterFields}
+          rowAccumulator={runningBalance}
+          layout="table"
+          initialState={{ pagination: { pageIndex: 0, pageSize: 4 } }}
+        />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("POST-01")).toBeTruthy());
+    expect(screen.getByText("bal 10")).toBeTruthy();
+    expect(screen.getByText("bal 40")).toBeTruthy();
+    expect(screen.queryByText("bal 50")).toBeNull();
+
+    await user.click(screen.getByLabelText("Go to next page"));
+    await waitFor(() => expect(screen.getByText("POST-05")).toBeTruthy());
+    expect(screen.getByText("bal 50"), "page two continues the fold").toBeTruthy();
+    expect(screen.getByText("bal 80")).toBeTruthy();
+    expect(screen.queryByText("bal 10"), "page one's opening balance is gone").toBeNull();
+  });
+});

package/src/FrappeTable.tsx

@@ -3,9 +3,7 @@ import {
   Order,
   matchesFilters,
   useDocTypeMeta,
-  useFrappeCollection,
   useFrappeDoctypeEvents,
-  useLiveQuery,
 } from "@multiplatform.one/frappe";
 import {
   DataTable,
@@ -25,12 +23,31 @@ import { FilterManager, SavedFilterDropdown, useSavedFilters } from "@multiplatf
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { docFieldsToFilterFields } from "./filterFields";
-import { toLiveLoadError } from "./liveErrors";
+import { useFrappeRows } from "./useFrappeRows";
 
 /**
  * Props for the FrappeTable component.
  *
- * @typeParam TDoc - The document type with at least name and doctype fields
+ * `data` is omitted because FrappeTable fetches its own rows. Everything else
+ * on `DataTableProps` passes straight through — including `rowAccumulator`
+ * (MPO-250), so a Frappe-bound table CAN carry a folded column (a running
+ * balance, a per-row cumulative count) without the caller re-fetching the
+ * doctype and hand-assembling a DataTable. Declare the derived field on
+ * `TDoc` so a column can name it in `accessorKey`:
+ *
+ * ```tsx
+ * const balance: RowAccumulator<Partial<Posting>, string> = {
+ *   initial: "0",
+ *   reduce: (carried, row) => addMoney(carried, row.amount ?? "0"),
+ *   derive: (carried) => ({ running: carried }),
+ *   order: (a, b) => compareByDateThenName(a, b),
+ * };
+ * <FrappeTable<Posting & { running?: string }> doctype="Posting" rowAccumulator={balance} … />
+ * ```
+ *
+ * The fold runs over the rows the table HOLDS, before pagination. In
+ * `serverSide` mode that is one page, so a running balance there needs the
+ * server to send the figure — the fold cannot invent rows it never got.
  */
 export interface FrappeTableProps<TDoc extends { name: string; doctype: string }> extends Omit<
   DataTableProps<Partial<TDoc>>,
@@ -310,8 +327,10 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   const finalAuth = auth ?? config?.auth;
   const finalSyncOptions = syncOptions ?? config?.syncOptions;
 
-  if (!finalBaseURL) {
-    throw new Error("FrappeTable requires baseURL prop or FrappeProvider with baseURL");
+  // A fixture corpus is a complete data source, so it satisfies the same
+  // requirement a baseURL does: fixture mode never dials a server.
+  if (!finalBaseURL && !config?.fixtures) {
+    throw new Error("FrappeTable requires baseURL prop or FrappeProvider with baseURL or fixtures");
   }
 
   // One connection config for the live subscription (client mode), the
@@ -594,32 +613,31 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // Always call the hook — toggling `savedFilters` must not change hook order (SB-M-012).
   const savedFiltersHook = useSavedFilters({ userId });
 
-  // Honest error surface: the collection swallows initial-sync failures
-  // (renders as empty otherwise); onSyncError turns 403/PermissionError and
-  // network failures into a visible error state.
-  const handleSyncError = useCallback(
-    (err: unknown) => {
-      setErrorState(
-        toLiveLoadError(err, {
-          permissionMessage: t("You do not have permission to view {{doctype}}", { doctype }),
-          genericMessage: t("Error loading {{doctype}}", { doctype }),
-        }),
-      );
-    },
+  // The client/live-collection read is the SHARED one (MPO-251): collection
+  // + live query + the honest error surface a bare collection swallows
+  // (without onSyncError a 403 or a dead server renders as an empty table).
+  // `limit: null` keeps the bench's own page length rather than the hook's
+  // default — FrappeTable paginates on the rows it is handed, and moving its
+  // row ceiling here would move it for every existing consumer.
+  const rowsMessages = useMemo(
+    () => ({
+      permission: t("You do not have permission to view {{doctype}}", { doctype }),
+      generic: t("Error loading {{doctype}}", { doctype }),
+      queryFailed: t("Failed to load {{doctype}}", { doctype }),
+    }),
     [doctype, t],
   );
-
-  const collection = useFrappeCollection<TDoc>(
-    serverSide ? undefined : connectionConfig,
-    serverSide ? "" : doctype,
-    serverSide ? undefined : { fields, filters: activeFilters, onSyncError: handleSyncError },
-  );
   const {
-    data: rawData,
-    isLoading: isRowsLoading,
-    isError: isLiveError,
-  } = useLiveQuery((q) => (collection ? q.from({ _list: collection }) : null), [collection]);
-  const clientRows = useMemo(() => (rawData as TDoc[] | undefined) ?? [], [rawData]);
+    rows: clientRows,
+    isQueryLoading: isRowsLoading,
+    error: liveError,
+  } = useFrappeRows<TDoc>(serverSide ? undefined : connectionConfig, doctype, {
+    fields,
+    filters: activeFilters,
+    limit: null,
+    enabled: !serverSide,
+    messages: rowsMessages,
+  });
 
   // Keep-rows-and-reconcile for client/live-collection mode: a filter change
   // swaps the collection (new subscription), which reports loading from
@@ -661,19 +679,6 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     ? !infiniteServerMode && serverLoading && hasLoadedOnce
     : isRowsLoading && lastGoodClientRows.current !== null;
 
-  // Reset stale errors when the underlying collection changes (new doctype
-  // or filters) so a recovered query doesn't keep showing the old failure.
-  useEffect(() => {
-    if (!serverSide) setErrorState(null);
-  }, [collection, serverSide]);
-
-  // Fallback surface for live-query failures the collection itself reports
-  // (onSyncError above carries the specific message when available).
-  useEffect(() => {
-    if (serverSide || !isLiveError) return;
-    setErrorState((prev) => prev ?? new Error(t("Failed to load {{doctype}}", { doctype })));
-  }, [serverSide, isLiveError, doctype, t]);
-
   const handleSelectFilter = (filter: any) => {
     if (filter) {
       setActiveFilters(filter.filters);
@@ -697,8 +702,12 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
     await savedFiltersHook.deleteFilter(name);
   };
 
-  if (errorState && error) {
-    return <>{error(errorState)}</>;
+  // serverSide failures come from the fetch above; client/live failures come
+  // from useFrappeRows. Only one path is ever live at a time.
+  const resolvedError = serverSide ? errorState : liveError;
+
+  if (resolvedError && error) {
+    return <>{error(resolvedError)}</>;
   }
 
   const rowData = rows ?? [];
@@ -706,8 +715,8 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   // Infinite serverSide delegates loading/empty chrome to DataTable.
   // After the first load, NEVER replace DataTable with empty/loading chrome
   // while a refetch is in flight — that was the named blank-the-list defect.
-  const boundaryState = errorState
-    ? { error: errorState }
+  const boundaryState = resolvedError
+    ? { error: resolvedError }
     : isRowsLoadingResolved
       ? { loading: loading ?? true }
       : rowData.length === 0 && !infiniteServerMode && !isFetching
@@ -715,7 +724,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
         : null;
   if (boundaryState) {
     return (
-      <YStack {...knobProps.gap} flex={1}>
+      <YStack
+        {...knobProps.gap}
+        // flexBasis auto, not flex={1}: a basis-0 chain resolves to 0 in an
+        // auto-height parent and collapses the table to a sliver. Same
+        // geometry as DataTableRoot's own root.
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis="auto"
+        minHeight={0}
+      >
         <FrappeReconnectIndicator config={connectionConfig} />
         <AsyncBoundary
           layout={layout === "list" || layout === "cards" ? "list" : "table"}
@@ -728,7 +746,16 @@ export function FrappeTable<TDoc extends { name: string; doctype: string }>({
   }
 
   return (
-    <YStack {...knobProps.gap} flex={1}>
+    <YStack
+      {...knobProps.gap}
+      // flexBasis auto, not flex={1}: a basis-0 chain resolves to 0 in an
+      // auto-height parent and collapses the table to a sliver. Same
+      // geometry as DataTableRoot's own root.
+      flexGrow={1}
+      flexShrink={1}
+      flexBasis="auto"
+      minHeight={0}
+    >
       <FrappeReconnectIndicator config={connectionConfig} />
       {savedFilters && savedFiltersHook && (
         <XStack {...knobProps.gap} padding="$2">

package/src/FrappeTreeView.stories.tsx

@@ -75,10 +75,23 @@ function regionMeta(name: string, isTree: boolean) {
   };
 }
 
+/** A chart of accounts: no parent field, no is_tree, the name is the path. */
+function accountMeta(name: string) {
+  return {
+    name,
+    module: "QA",
+    title_field: "name",
+    is_tree: 0,
+    fields: [{ fieldname: "balance", fieldtype: "Currency", label: "Balance", in_list_view: 1 }],
+    permissions: [{ role: "All", read: 1 }],
+  };
+}
+
 function handleMetaRequest(url: URL): Response | null {
   const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
   if (!metaMatch) return null;
   const name = decodeURIComponent(metaMatch[1]);
+  if (name === "QaAccount") return jsonResponse({ data: accountMeta(name) });
   return jsonResponse({ data: regionMeta(name, name !== "QaFlatDoc") });
 }
 
@@ -143,6 +156,52 @@ export const NotATree = () => (
   </FrappeProvider>
 );
 
+interface Account {
+  name: string;
+  doctype: string;
+  balance: string;
+}
+
+/**
+ * Seven rows, and every one of them is a leaf. "Assets", "Assets:Personal"
+ * and "Assets:Personal:Bank" are not documents at all.
+ */
+const accountDocs: Account[] = [
+  { name: "Assets:Personal:Bank:Checking", doctype: "QaAccount", balance: "4,120.55" },
+  { name: "Assets:Personal:Bank:Savings", doctype: "QaAccount", balance: "18,300.00" },
+  { name: "Assets:Personal:Cash", doctype: "QaAccount", balance: "260.00" },
+  { name: "Expenses:Groceries", doctype: "QaAccount", balance: "612.40" },
+  { name: "Expenses:Utilities:Power", doctype: "QaAccount", balance: "148.90" },
+  { name: "Income:Salary", doctype: "QaAccount", balance: "9,000.00" },
+  { name: "Liabilities:Credit Card", doctype: "QaAccount", balance: "-732.10" },
+];
+
+/** Colon-path doctype: is_tree is 0, there is no parent field, tree renders. */
+export const ColonPath = () => (
+  <FrappeProvider
+    baseURL={MOCK_HOST}
+    fixtures={new InMemoryFixtureProvider({ QaAccount: accountDocs })}
+  >
+    <FrappeTreeView
+      doctype="QaAccount"
+      pathSeparator=":"
+      pathField="name"
+      valueField="balance"
+      expandByDefault
+      onNodeClick={action("onNodeClick")}
+      onPathSelect={action("onPathSelect")}
+    />
+  </FrappeProvider>
+);
+ColonPath.parameters = {
+  docs: {
+    description: {
+      story:
+        "The account IS its path (Assets:Personal:Bank:Checking). Meta reports is_tree 0 and the doctype has no parent field, so the parent-field path would paint the unsupported state instead. pathSeparator synthesises the branches client-side from each row's own key. A synthesised branch carries no document: clicking it fires onPathSelect with the path and no doc, and onNodeClick stays silent. The balances hang off the leaves, which are the only real rows.",
+    },
+  },
+};
+
 /** Tree doctype with zero root nodes: empty message. */
 export const EmptyTree = () => (
   <FrappeProvider baseURL={MOCK_HOST} fixtures={new InMemoryFixtureProvider({ QaRegionEmpty: [] })}>