@multiplatform.one/frappe-ui 7.77.2 → 7.79.0

package/src/FrappeListView.projection.spec.tsx

@@ -0,0 +1,193 @@
+/**
+ * LC-183 DEFAULT-PROJECTION: a list opens on at most five declared data
+ * columns plus one encoding; the rest stay reachable, hidden in the column
+ * chooser. LC-184 SCOPE-HIDES-CONSTANT: a field the host's scope pins to one
+ * value draws no header cell and no row meta, and comes back when the scope
+ * clears. A filter the reader adds in the list's own controls hides nothing.
+ */
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+import {
+  defaultProjection,
+  defaultProjectionCap,
+  scopePinnedFields,
+} from "./list/defaultProjection";
+import { __resetFrappeDevWarnSeen } from "./shared/devWarn";
+
+interface Ticket {
+  name: string;
+  doctype: string;
+  [field: string]: unknown;
+}
+
+const declared = [
+  ["subject", "Subject"],
+  ["status", "Status"],
+  ["priority", "Priority"],
+  ["company", "Company"],
+  ["team", "Team"],
+  ["area", "Area"],
+  ["due", "Due Label"],
+] as const;
+
+const meta = {
+  name: "Help Ticket",
+  doctype: "DocType",
+  module: "Support",
+  title_field: "subject",
+  image_field: "photo",
+  fields: [
+    ...declared.map(([fieldname, label]) => ({
+      fieldname,
+      label,
+      fieldtype: "Data",
+      in_list_view: 1,
+    })),
+    { fieldname: "photo", label: "Photo", fieldtype: "Attach Image", in_list_view: 1 },
+  ],
+  permissions: [{ role: "All", read: 1, write: 1, create: 1, delete: 1 }],
+};
+
+function fixtures() {
+  return new InMemoryFixtureProvider({
+    DocType: [meta],
+    "Help Ticket": [
+      {
+        name: "T-1",
+        doctype: "Help Ticket",
+        subject: "Printer jam",
+        status: "Open",
+        priority: "High",
+        company: "Acme Corp",
+        team: "Ops Crew",
+        area: "Floor Two",
+        due: "Friday",
+      },
+    ],
+  });
+}
+
+const settle = { timeout: 5000 };
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  __resetFrappeDevWarnSeen();
+});
+
+function renderTable(provider: InMemoryFixtureProvider, filters?: Record<string, unknown>) {
+  return renderWithProviders(
+    <FrappeProvider baseURL="http://test" fixtures={provider}>
+      <FrappeListView<Ticket>
+        doctype="Help Ticket"
+        defaultViewMode="table"
+        filters={filters as never}
+      />
+    </FrappeProvider>,
+  );
+}
+
+function shownHeaders() {
+  return declared.map(([, label]) => label).filter((label) => screen.queryByText(label) !== null);
+}
+
+describe("the default projection (LC-183)", () => {
+  it("splits the declared fields at five and keeps the rest for the chooser", () => {
+    const fields = declared.map(([fieldname]) => ({ fieldname }));
+    const projection = defaultProjection(fields, new Set());
+    expect(defaultProjectionCap).toBe(5);
+    expect(projection.shown.map((field) => field.fieldname)).toEqual([
+      "subject",
+      "status",
+      "priority",
+      "company",
+      "team",
+    ]);
+    expect(projection.optIn.map((field) => field.fieldname)).toEqual(["area", "due"]);
+  });
+
+  it("opens the table on five data columns, warns in DEV and drops none", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderTable(fixtures());
+    await waitFor(
+      () => expect(screen.getAllByText("Printer jam").length).toBeGreaterThan(0),
+      settle,
+    );
+    await waitFor(
+      () => expect(shownHeaders()).toEqual(["Subject", "Status", "Priority", "Company", "Team"]),
+      settle,
+    );
+    expect(screen.queryByText("Floor Two")).toBeNull();
+    expect(
+      warn.mock.calls.some((call) => String(call[0]).includes("list-projection-over-cap")),
+    ).toBe(true);
+    expect(warn.mock.calls.find((call) => String(call[0]).includes("over-cap"))?.[0]).toContain(
+      "area, due",
+    );
+  });
+});
+
+describe("a scope pins a column (LC-184)", () => {
+  it("reads the pinned fields off the host's equality filters only", () => {
+    expect([...scopePinnedFields({ company: "Acme Corp" })]).toEqual(["company"]);
+    expect([...scopePinnedFields([["company", "=", "Acme Corp"]])]).toEqual(["company"]);
+    expect([...scopePinnedFields([["company", "in", ["A", "B"]]])]).toEqual([]);
+    expect([...scopePinnedFields([["company", "like", "%Ac%"]])]).toEqual([]);
+    expect([
+      ...scopePinnedFields([["Help Ticket", "team", "=", "Ops Crew"]], "Help Ticket"),
+    ]).toEqual(["team"]);
+    expect([...scopePinnedFields([["Other", "team", "=", "Ops Crew"]], "Help Ticket")]).toEqual([]);
+  });
+
+  it("hides the scoped column and brings it back when the scope clears", async () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    const provider = fixtures();
+    const view = renderTable(provider, { company: "Acme Corp" });
+    await waitFor(
+      () => expect(screen.getAllByText("Printer jam").length).toBeGreaterThan(0),
+      settle,
+    );
+    await waitFor(() => expect(shownHeaders()).toContain("Area"), settle);
+    expect(shownHeaders()).not.toContain("Company");
+    expect(screen.queryByText("Acme Corp")).toBeNull();
+    expect(shownHeaders()).toHaveLength(defaultProjectionCap);
+
+    view.rerender(
+      <FrappeProvider baseURL="http://test" fixtures={provider}>
+        <FrappeListView<Ticket> doctype="Help Ticket" defaultViewMode="table" />
+      </FrappeProvider>,
+    );
+    await waitFor(() => expect(shownHeaders()).toContain("Company"), settle);
+    expect(shownHeaders()).not.toContain("Area");
+  });
+
+  it("a list row's meta drops the scoped value", async () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(
+      <FrappeProvider baseURL="http://test" fixtures={fixtures()}>
+        <FrappeListView<Ticket>
+          doctype="Help Ticket"
+          defaultViewMode="list"
+          filters={{ company: "Acme Corp" } as never}
+        />
+      </FrappeProvider>,
+    );
+    await waitFor(() => expect(screen.getAllByText(/\bOpen\b/).length).toBeGreaterThan(0), settle);
+    expect(screen.queryByText(/Acme Corp/)).toBeNull();
+    expect(screen.getAllByText(/Ops Crew/).length).toBeGreaterThan(0);
+  });
+});

package/src/FrappeListView.sidebar.spec.tsx

@@ -1,6 +1,6 @@
 // A routed list whose filters live in the page's one sidebar: type facets
 // with counts, a generation band, a base-XP stock slider and favorites
-// beside the results from md up; below md a Filters button wearing the
+// beside the results from md up; below md a funnel glyph wearing the
 // active-filter count opens the same filters (sort included) in a bottom
 // sheet, and the header's secondary actions move to a ⋯ menu.
 import { renderWithProviders } from "@multiplatform.one/test-utils";
@@ -210,7 +210,25 @@ describe("FrappeListView phone filters", () => {
     );
   });
 
-  it("holds the secondary actions in a ⋯ menu beside the Filters button", async () => {
+  it("leaves the row to the search: the phone tools are two glyphs and no word (FZ-8660)", async () => {
+    renderList();
+    await sidebar();
+    const tools = screen.getByTestId("pokemon-phone-tools");
+    const filters = within(tools).getByTestId("pokemon-filters-button");
+    expect(filters.getAttribute("data-mp-action")).toBe("filter");
+    expect(filters.querySelector("svg")).not.toBeNull();
+    expect(tools.textContent).toBe("");
+    expect(tools.querySelectorAll("[aria-label]")).toHaveLength(2);
+    expect(tools.className).toContain("_fs-0");
+    const search = screen.getByRole("searchbox");
+    let field = search.parentElement as HTMLElement;
+    while (field.nextElementSibling === null) field = field.parentElement as HTMLElement;
+    expect(field.parentElement?.contains(tools)).toBe(true);
+    expect(field.className).toMatch(/_fg-1/);
+    expect(field.className).toMatch(/_miw-0px/);
+  });
+
+  it("holds the secondary actions in a ⋯ menu beside the filter glyph", async () => {
     renderList();
     await sidebar();
     const tools = screen.getByTestId("pokemon-phone-tools");

package/src/FrappeListView.spec.tsx

@@ -149,6 +149,23 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
     expect(refresh.querySelector("svg")).not.toBeNull();
   });
 
+  it("keeps refresh inside the toolbar: the switcher side shrinks, the tools side never does (FZ-8521)", async () => {
+    const { container } = renderListView();
+    const refresh = await refreshIn(container);
+    let tools = refresh.parentElement as HTMLElement;
+    while (tools && !/(?:^| )_fs-0(?: |$)/.test(String(tools.className))) {
+      tools = tools.parentElement as HTMLElement;
+    }
+    expect(tools).toBeTruthy();
+    const switcherSide = tools.previousElementSibling as HTMLElement;
+    const bar = tools.parentElement as HTMLElement;
+    expect(tools.className).toContain("_fs-0");
+    expect(switcherSide.className).toContain("_fs-1");
+    expect(switcherSide.className).toContain("_fg-1");
+    expect(switcherSide.className).toMatch(/_miw-0px/);
+    expect(bar.className).not.toContain("_jc-space-between");
+  });
+
   it("the Add glyph still activates (house div[role=button], LC-260)", async () => {
     const onAdd = vi.fn();
     const { container } = renderListView({ onAdd });

package/src/FrappeListView.successIsCallback.spec.tsx

@@ -0,0 +1,143 @@
+// LC-194 SUCCESS-IS-A-CALLBACK on the list: starring a record is its own
+// signal (the filled heart), so the list raises no success toast and opens
+// nothing. Only an unstar, which can drop the row out of a favorites filter,
+// offers an Undo.
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  createRosterFixtures,
+  rosterPokemonFields,
+  rosterPokemonMeta,
+  type RosterPokemon,
+} from "../tests/fixtures/pokemonRoster";
+import type { FrappeNavigation } from "./frappeNavigation";
+import { FrappeListView, type FrappeListViewProps } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+import { favoritesStore } from "./list/favorites";
+
+const feedback = vi.hoisted(() => ({ notify: vi.fn(), showToast: vi.fn() }));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@multiplatform.one/components")>();
+  return {
+    ...actual,
+    notify: (...args: Parameters<typeof actual.notify>) => {
+      feedback.notify(...args);
+      return actual.notify(...args);
+    },
+    showToast: (...args: Parameters<typeof actual.showToast>) => {
+      feedback.showToast(...args);
+      return actual.showToast(...args);
+    },
+  };
+});
+
+const host = "https://listview-callback.spec.test";
+const realFetch = globalThis.fetch;
+const favoritesKey = "callback-spec-favorites";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+  globalThis.fetch = (async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    if (url.startsWith(host)) {
+      const body = /\/api\/resource\/DocType\//.test(url)
+        ? { data: rosterPokemonMeta }
+        : { data: [] };
+      return new Response(JSON.stringify(body), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+    return realFetch(input as RequestInfo, init);
+  }) as typeof fetch;
+});
+
+afterAll(() => {
+  globalThis.fetch = realFetch;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  feedback.notify.mockClear();
+  feedback.showToast.mockClear();
+  favoritesStore(favoritesKey).setState(() => ({ names: [] }));
+});
+
+const look: FrappeListViewProps<RosterPokemon>["look"] = {
+  title: (doc) => (doc.pokemon_name ?? "").toUpperCase(),
+  code: (doc) => `#${String(doc.poke_id ?? 0).padStart(3, "0")}`,
+  subtitle: (doc) => doc.species,
+  images: (doc) => [`https://art.spec.test/${doc.poke_id}.png`, doc.sprite_front ?? ""],
+};
+
+function renderList(navigate = vi.fn()) {
+  const navigation: FrappeNavigation = {
+    usePathname: () => "/pokemon",
+    useNavigate: () => navigate,
+  };
+  return renderWithProviders(
+    <FrappeProvider baseURL={host} fixtures={createRosterFixtures()} navigation={navigation}>
+      <FrappeListView<RosterPokemon>
+        doctype="Pokemon"
+        route="/pokemon"
+        fields={rosterPokemonFields}
+        defaultViewMode="grid"
+        look={look}
+        favorites={favoritesKey}
+        facets={[
+          {
+            param: "type",
+            doctype: "Pokemon Poke Type",
+            field: "poke_type",
+            orderBy: "slot",
+            label: "Type",
+            options: ["grass", "poison", "fire", "water", "electric", "ghost", "normal"],
+            optionLabel: (value) => `type:${value}`,
+            tint: (value) => (value === "grass" ? "green" : "purple"),
+          },
+        ]}
+      />
+    </FrappeProvider>,
+  );
+}
+
+describe("FrappeListView reports a favorite without its own success feedback (LC-194)", () => {
+  it("a star fills the heart, raises no toast and navigates nowhere", async () => {
+    const navigate = vi.fn();
+    renderList(navigate);
+    const heart = await screen.findByTestId("pokemon-favorite-bulbasaur", {}, { timeout: 5000 });
+    fireEvent.click(heart);
+    await waitFor(() => expect(favoritesStore(favoritesKey).state.names).toEqual(["bulbasaur"]));
+    await waitFor(() =>
+      expect(screen.getByTestId("pokemon-favorite-bulbasaur").getAttribute("aria-pressed")).toBe(
+        "true",
+      ),
+    );
+    expect(feedback.showToast).not.toHaveBeenCalled();
+    expect(feedback.notify).not.toHaveBeenCalled();
+    expect(navigate).not.toHaveBeenCalled();
+  });
+
+  it("an unstar offers Undo, never a success toast", async () => {
+    favoritesStore(favoritesKey).setState(() => ({ names: ["bulbasaur"] }));
+    const navigate = vi.fn();
+    renderList(navigate);
+    const heart = await screen.findByTestId("pokemon-favorite-bulbasaur", {}, { timeout: 5000 });
+    fireEvent.click(heart);
+    await waitFor(() => expect(favoritesStore(favoritesKey).state.names).toEqual([]));
+    expect(feedback.showToast).toHaveBeenCalledTimes(1);
+    const toast = feedback.showToast.mock.calls[0]?.[0] as { intent?: string; action?: unknown };
+    expect(toast.intent).not.toBe("success");
+    expect(toast.action).toMatchObject({ label: "Undo" });
+    expect(navigate).not.toHaveBeenCalled();
+  });
+});

package/src/FrappeListView.tsx

@@ -61,6 +61,12 @@ import {
 import { ListFilterPanel } from "./list/ListFilterPanel";
 import { ListSidebarToolbar } from "./list/ListSidebarToolbar";
 import { ListToastHost } from "./list/ListToastHost";
+import {
+  defaultProjection,
+  defaultProjectionCap,
+  scopePinnedFields,
+} from "./list/defaultProjection";
+import { frappeDevWarn } from "./shared/devWarn";
 import { ShufflePanel } from "./list/ShufflePanel";
 import { useListControls } from "./list/useListControls";
 import { recordKeyLabel, useRecordShape } from "./recordShape";
@@ -436,6 +442,30 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     return peekedFields?.find((key) => /sprite|image|photo|avatar|logo/i.test(key));
   }, [meta, peekedFields]);
 
+  // LC-184: a column the host's scope pins to one value is not drawn; LC-183:
+  // the rest open on at most five, the others wait in the column chooser.
+  const scopeKey = JSON.stringify(filters ?? null);
+  const scopePinned = useMemo(
+    () => scopePinnedFields(JSON.parse(scopeKey) ?? undefined, doctype),
+    [scopeKey, doctype],
+  );
+  const projection = useMemo(
+    () =>
+      defaultProjection(
+        metaListFields.filter((field) => field.fieldname !== imageFieldName),
+        scopePinned,
+      ),
+    [metaListFields, imageFieldName, scopePinned],
+  );
+  useEffect(() => {
+    if (projection.optIn.length === 0) return;
+    frappeDevWarn("list-projection-over-cap", {
+      component: "FrappeListView",
+      doctype,
+      suggest: `flag at most ${defaultProjectionCap} in_list_view fields; ${projection.optIn.map((field) => field.fieldname).join(", ")} open hidden`,
+    });
+  }, [projection, doctype]);
+
   const effectiveFields = useMemo(() => {
     if (fields) return fields;
     const listFields = meta
@@ -451,7 +481,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   const effectiveDisplayFields = useMemo((): ListFieldConfig[] => {
     if (displayFields) return displayFields;
     if (meta && metaListFields.length > 0) {
-      return metaListFields.map((f) => ({
+      return projection.shown.map((f) => ({
         key: f.fieldname,
         label: f.label || f.fieldname,
       }));
@@ -463,7 +493,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
         .map((key) => ({ key, label: recordKeyLabel(key) }));
     }
     return [{ key: "name", label: t("Name") }];
-  }, [displayFields, meta, metaListFields, peekedFields, imageFieldName, t]);
+  }, [displayFields, meta, metaListFields, projection, peekedFields, imageFieldName, t]);
 
   const renderListItem = useCallback(
     (doc: Partial<TDoc>) => {
@@ -530,13 +560,15 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
   const effectiveColumns = useMemo((): DataTableColumn<Partial<TDoc>>[] => {
     if (columns) return columns;
     if (meta && metaListFields.length > 0) {
-      return metaListFields.map(
-        (f) =>
-          ({
-            accessorKey: f.fieldname as string,
-            header: f.label || f.fieldname,
-          }) as DataTableColumn<Partial<TDoc>>,
-      );
+      return metaListFields
+        .filter((f) => !scopePinned.has(f.fieldname))
+        .map(
+          (f) =>
+            ({
+              accessorKey: f.fieldname as string,
+              header: f.label || f.fieldname,
+            }) as DataTableColumn<Partial<TDoc>>,
+        );
     }
     if (peekedFields && peekedFields.length > 0) {
       return peekedFields
@@ -550,7 +582,15 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     return [{ accessorKey: "name" as string, header: t("Name") }] as DataTableColumn<
       Partial<TDoc>
     >[];
-  }, [columns, meta, metaListFields, peekedFields, imageFieldName, t]);
+  }, [columns, meta, metaListFields, scopePinned, peekedFields, imageFieldName, t]);
+
+  const projectionVisibility = useMemo(
+    () =>
+      columns || projection.optIn.length === 0
+        ? undefined
+        : Object.fromEntries(projection.optIn.map((field) => [field.fieldname, false])),
+    [columns, projection],
+  );
 
   const standardFilterFields = useMemo(() => {
     if (!meta) return [];
@@ -772,22 +812,17 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
       if (!name) return;
       const starred = isFavorite(name);
       toggleStar(name);
+      // LC-194: the filled heart is the add's own signal; only a removal,
+      // which can drop the record out of a favorites filter, offers an undo.
+      if (!starred) return;
       const titleValue = nameField ? (doc as Record<string, unknown>)[nameField] : undefined;
       const label = typeof titleValue === "string" && titleValue ? titleValue : name;
-      showToast(
-        starred
-          ? {
-              id: `${slug}-favorite-${name}`,
-              title: t("{{name}} removed from favorites", { name: label }),
-              intent: "accent",
-              action: { label: t("Undo"), onPress: () => toggleStar(name) },
-            }
-          : {
-              id: `${slug}-favorite-${name}`,
-              title: t("{{name}} added to favorites", { name: label }),
-              intent: "success",
-            },
-      );
+      showToast({
+        id: `${slug}-favorite-${name}`,
+        title: t("{{name}} removed from favorites", { name: label }),
+        intent: "accent",
+        action: { label: t("Undo"), onPress: () => toggleStar(name) },
+      });
     },
     [isFavorite, toggleStar, nameField, slug, t],
   );
@@ -1185,15 +1220,15 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
     return (
       <XStack
         {...knobProps.panelPadding}
+        {...knobProps.gap}
         alignItems="center"
-        justifyContent="space-between"
         // Frame owns SF-CARD; this band is flattened (zero box border, one
         // bottom hairline) so it does not paint a second surface.
         borderWidth={0}
         borderBottomWidth={1}
         borderBottomColor="$borderColor"
       >
-        <XStack alignItems="center" {...knobProps.gap}>
+        <XStack alignItems="center" flexGrow={1} flexShrink={1} minWidth={0} {...knobProps.gap}>
           <ViewSwitcher
             views={[
               ...(hasCards ? [{ type: "grid", label: t("Cards") }] : []),
@@ -1205,7 +1240,7 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
           />
         </XStack>
 
-        <XStack alignItems="center" {...knobProps.gap}>
+        <XStack alignItems="center" flexShrink={0} {...knobProps.gap}>
           {/* LC-54 (amendment 2026-08-13): house Button, own-box floor — the
               raw tamagui Button + grown transparent target painted its hover
               fill across the escaped 44px floor. `circular` makes the painted
@@ -1358,11 +1393,14 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
 
     return (
       <FrappeTable
-        key={`table-${refreshKey}`}
+        key={`table-${refreshKey}-${scopeKey}`}
         doctype={doctype}
         fields={effectiveFields}
         filters={resolvedFilters as Parameters<typeof FrappeTable<TDoc>>[0]["filters"]}
         columns={effectiveColumns}
+        {...(projectionVisibility
+          ? { initialState: { columnVisibility: projectionVisibility } }
+          : {})}
         onRowClick={onItemClick}
         rights={rights}
         baseURL={finalBaseURL}