@multiplatform.one/frappe-ui 7.34.3 → 7.35.0

package/src/FrappeForm.tsx

@@ -10,6 +10,7 @@ import {
   DetailPageLayout,
   EmptyState,
   PageHeader,
+  ScrollView,
   Tabs,
   type TabsItem,
 } from "@multiplatform.one/components";
@@ -23,7 +24,7 @@ import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
 import { FrappeReconnectIndicator } from "./FrappeReconnectIndicator";
 import { Timeline } from "./components/timeline";
@@ -36,7 +37,7 @@ import {
   resolveDocAction,
   resolveDocIndicator,
 } from "./formEngine/docLifecycle";
-import { FrappeFormActions } from "./FrappeFormActions";
+import { FrappeFormActions, FrappeFormActionsBar, FrappeFormIndicator } from "./FrappeFormActions";
 import { connectionFields, connectionsFromMeta, type FrappeConnection } from "./frappeConnections";
 import { FrappeFormConnections } from "./FrappeFormConnections";
 import { FrappeNotConfigured } from "./FrappeNotConfigured";
@@ -172,6 +173,18 @@ export interface FrappeFormProps<TDoc extends { name: string; doctype: string }>
   renderFieldWrapper?: SchemaFormProps["renderFieldWrapper"];
   /** Wraps each laid-out tab's body. */
   renderTab?: (tab: FormTab, content: React.ReactNode) => React.ReactNode;
+  /**
+   * `flat`: sections drop their card on phones and run full width under
+   * caps labels, columns hug their fields on wider screens and number
+   * fields hug their value. Defaults to `flat` on a routed page, `cards`
+   * elsewhere.
+   */
+  layout?: SchemaFormProps["layout"];
+  /**
+   * The action bar sticks to the bottom of the viewport while the form
+   * scrolls. Defaults to on for a routed page.
+   */
+  stickyActions?: boolean;
 }
 
 /**
@@ -447,6 +460,8 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   extraTabs,
   renderFieldWrapper,
   renderTab,
+  layout: layoutProp,
+  stickyActions: stickyActionsProp,
   loadingFallback,
   notFoundFallback,
   errorFallback,
@@ -454,6 +469,10 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
 }: FrappeFormBodyProps<TDoc> & { form: FrappeFormController<TDoc> }) {
   const { knobProps } = useResolvedKnobs();
   const { t } = useTranslation();
+  // A routed page is the record's own screen: flat sections and a Save
+  // bar that stays in reach.
+  const layout = layoutProp ?? (routePage ? "flat" : "cards");
+  const stickyActions = stickyActionsProp ?? Boolean(routePage);
   const {
     meta,
     metaLoading: isMetaLoading,
@@ -605,8 +624,64 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
   const titleField = meta?.title_field;
   const titleValue = titleField ? (localDoc as Record<string, unknown>)[titleField] : undefined;
   const pageTitle = isCreate ? t("New {{doctype}}", { doctype }) : String(titleValue || name);
-  const frame = (content: React.ReactNode, aside?: React.ReactNode) =>
-    routePage ? (
+  const editing = Boolean(routePage) && !onEdit;
+  const frame = (
+    content: React.ReactNode,
+    aside?: React.ReactNode,
+    chrome?: { badge?: React.ReactNode; footer?: React.ReactNode },
+  ) =>
+    routePage && editing ? (
+      <YStack flex={1} backgroundColor="$background" testID="frappe-form-route-editor">
+        <XStack alignItems="center" gap="$2" paddingHorizontal="$2" paddingVertical="$1">
+          <XStack flex={1} flexBasis={0} justifyContent="flex-start">
+            <Button
+              chromeless
+              onPress={onCancel ? handleCancel : routePage.onBack}
+              aria-label={onCancel ? undefined : t("Back to {{doctype}} list", { doctype })}
+            >
+              {t("Cancel")}
+            </Button>
+          </XStack>
+          <Text
+            flexShrink={1}
+            textAlign="center"
+            numberOfLines={1}
+            fontSize="$5"
+            fontWeight="600"
+            color="$color"
+            role="heading"
+            aria-level={1}
+          >
+            {isCreate ? pageTitle : t("Edit {{title}}", { title: pageTitle })}
+          </Text>
+          <XStack flex={1} flexBasis={0} justifyContent="flex-end" paddingRight="$2">
+            {chrome?.badge}
+          </XStack>
+        </XStack>
+        <ScrollView flex={1} contentContainerStyle={{ flexGrow: 1 }}>
+          <YStack paddingHorizontal="$4" paddingTop="$3" paddingBottom="$6" gap="$5">
+            {content}
+          </YStack>
+        </ScrollView>
+        {/* The footer is the editor's one Save bar. Sticky (the routed
+            default), it also pins on a scroll-flow web page; the sticky
+            bar then draws the top rule and the bottom inset. */}
+        {chrome?.footer ? (
+          <FrappeFormActionsBar sticky={stickyActions}>
+            <XStack
+              paddingHorizontal="$4"
+              paddingTop="$3"
+              paddingBottom={stickyActions ? 0 : "$3"}
+              borderTopWidth={stickyActions ? 0 : hairlineWidth}
+              borderColor="$borderColor"
+              backgroundColor="$background"
+            >
+              {chrome.footer}
+            </XStack>
+          </FrappeFormActionsBar>
+        ) : null}
+      </YStack>
+    ) : routePage ? (
       // flexBasis auto: see DeskFormPage (react-native-web's min-height:0
       // reset would cap the scroll page at viewport height).
       <DetailPageLayout
@@ -664,7 +739,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
         <EmptyState
           testID="frappe-form-not-permitted"
           title={t("You can't create {{doctype}}", { doctype })}
-          description={metaError.message}
+          description={t("You don't have permission to create this document.")}
         />
       ) : (
         <AsyncBoundary
@@ -778,6 +853,7 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
         sectionHeadingLevel={sectionHeadingLevel}
         order={order}
         renderFieldWrapper={renderFieldWrapper}
+        layout={layout}
       />
     );
     return {
@@ -935,9 +1011,41 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
             </Text>
           )}
 
-          {toolbarShown && (
+          {/* A routed editor carries its actions in the page footer instead. */}
+          {toolbarShown && !editing && (
+            <FrappeFormActionsBar sticky={stickyActions}>
+              <FrappeFormActions
+                indicator={indicator}
+                action={docAction}
+                busy={isSubmitting}
+                disabled={effectiveDisabled}
+                onSave={handleSave}
+                onSubmit={handleSubmitDocument}
+                onCancelDocument={handleCancelDocument}
+                onAmend={showAmend ? handleAmend : undefined}
+                amendedAs={amendedAs}
+                onDelete={showDelete ? handleDelete : undefined}
+                onEdit={showEdit ? onEdit : undefined}
+                onClose={showClose ? handleCancel : undefined}
+                closeDisabled={disabled}
+              />
+            </FrappeFormActionsBar>
+          )}
+        </YStack>
+      </XStack>
+
+      {/* Timeline (edit mode only) — live Comment/Version via useFrappeCollection */}
+      {showTimeline && name && !readsWithoutMeta && (
+        <Timeline doctype={doctype} docname={name} label={t("Activity")} />
+      )}
+    </YStack>,
+    routePage && !editing ? sidebar : undefined,
+    editing
+      ? {
+          badge: indicator ? <FrappeFormIndicator indicator={indicator} /> : null,
+          footer: toolbarShown ? (
             <FrappeFormActions
-              indicator={indicator}
+              placement="footer"
               action={docAction}
               busy={isSubmitting}
               disabled={effectiveDisabled}
@@ -947,19 +1055,11 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
               onAmend={showAmend ? handleAmend : undefined}
               amendedAs={amendedAs}
               onDelete={showDelete ? handleDelete : undefined}
-              onEdit={showEdit ? onEdit : undefined}
               onClose={showClose ? handleCancel : undefined}
               closeDisabled={disabled}
             />
-          )}
-        </YStack>
-      </XStack>
-
-      {/* Timeline (edit mode only) — live Comment/Version via useFrappeCollection */}
-      {showTimeline && name && !readsWithoutMeta && (
-        <Timeline doctype={doctype} docname={name} label={t("Activity")} />
-      )}
-    </YStack>,
-    routePage ? sidebar : undefined,
+          ) : null,
+        }
+      : undefined,
   );
 }

package/src/FrappeFormActions.tsx

@@ -1,5 +1,5 @@
 import { Chip, type ChipColor } from "@multiplatform.one/components";
-import { Button } from "@multiplatform.one/forms";
+import { Button, zIndex } from "@multiplatform.one/forms";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
@@ -10,8 +10,9 @@ import {
   TrashIcon,
   XIcon,
 } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { XStack } from "tamagui";
+import { XStack, YStack, isWeb } from "tamagui";
 import type { DocAction, DocStatusIndicator } from "./formEngine/docLifecycle";
 
 const indicatorColors: Record<DocStatusIndicator, ChipColor> = {
@@ -47,6 +48,29 @@ export interface FrappeFormActionsProps {
   /** The host's leave action (discards unsaved edits first). */
   onClose?: () => void;
   closeDisabled?: boolean;
+  /**
+   * `footer` is a routed editor's bottom bar: no state pill (the page header
+   * carries it), the leave button soft and the primary action filling the row.
+   */
+  placement?: "inline" | "footer";
+}
+
+/** Desk's state pill: Not Saved, Draft, Submitted or Cancelled. */
+export function FrappeFormIndicator({ indicator }: { indicator: DocStatusIndicator }) {
+  const { t } = useTranslation();
+  const labels: Record<DocStatusIndicator, string> = {
+    notSaved: t("Not Saved"),
+    draft: t("Draft"),
+    submitted: t("Submitted"),
+    cancelled: t("Cancelled"),
+  };
+  return (
+    <XStack alignItems="center" testID={`frappe-form-status-${indicator}`}>
+      <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
+        {labels[indicator]}
+      </Chip>
+    </XStack>
+  );
 }
 
 /**
@@ -69,31 +93,25 @@ export function FrappeFormActions({
   onEdit,
   onClose,
   closeDisabled,
+  placement = "inline",
 }: FrappeFormActionsProps) {
+  const footer = placement === "footer";
   const { t } = useTranslation();
   const { knobProps } = useResolvedKnobs();
   const readOnlyReason = t("Form is read-only");
 
-  const indicatorLabels: Record<DocStatusIndicator, string> = {
-    notSaved: t("Not Saved"),
-    draft: t("Draft"),
-    submitted: t("Submitted"),
-    cancelled: t("Cancelled"),
-  };
-
   return (
     <XStack
       {...knobProps.gap}
       justifyContent="flex-end"
       alignItems="center"
-      paddingTop="$3"
+      paddingTop={footer ? 0 : "$3"}
+      flex={footer ? 1 : undefined}
       testID="frappe-form-actions"
     >
-      {indicator && (
-        <XStack flex={1} alignItems="center" testID={`frappe-form-status-${indicator}`}>
-          <Chip size="$2" variant="subtle" color={indicatorColors[indicator]}>
-            {indicatorLabels[indicator]}
-          </Chip>
+      {indicator && !footer && (
+        <XStack flex={1}>
+          <FrappeFormIndicator indicator={indicator} />
         </XStack>
       )}
 
@@ -114,8 +132,8 @@ export function FrappeFormActions({
 
       {onClose && (
         <Button
-          outlined
-          icon={XIcon}
+          outlined={!footer}
+          icon={footer ? undefined : XIcon}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
@@ -186,6 +204,7 @@ export function FrappeFormActions({
         <Button
           accent
           icon={CheckCircleIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -200,7 +219,8 @@ export function FrappeFormActions({
       {(action === "save" || action === "update") && (
         <Button
           accent
-          icon={FloppyDiskIcon}
+          icon={footer ? undefined : FloppyDiskIcon}
+          flex={footer ? 1 : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
@@ -214,3 +234,36 @@ export function FrappeFormActions({
     </XStack>
   );
 }
+
+/**
+ * Holds the action bar. Sticky, it pins to the bottom of the scrolling page
+ * on a page surface with a top hairline, so Save stays in reach on a long
+ * form; the page scrolls under it.
+ */
+export function FrappeFormActionsBar({
+  sticky = false,
+  children,
+}: {
+  sticky?: boolean;
+  children: ReactNode;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  if (!sticky) return <>{children}</>;
+  return (
+    <YStack
+      testID="frappe-form-actions-sticky"
+      data-sticky-actions=""
+      backgroundColor="$background"
+      borderTopWidth={knobProps.surface.borderWidth}
+      borderColor="$borderColor"
+      paddingBottom="$3"
+      // Above the form's own stacked content (image tiles, remove discs).
+      zIndex={zIndex.stickyHeader}
+      {...(isWeb
+        ? { style: { position: "sticky", bottom: 0 } as never }
+        : { position: "relative" as const })}
+    >
+      {children}
+    </YStack>
+  );
+}

package/src/FrappeFormConnections.tsx

@@ -94,7 +94,7 @@ export function FrappeFormConnectionSection({
       <YStack {...knobProps.gap}>
         <AsyncBoundary
           layout="table"
-          compact
+          size="$3"
           loading={isLoading}
           error={error}
           errorTitle={

package/src/FrappeKPICard.tsx

@@ -145,7 +145,7 @@ export function FrappeKPICard({
   if (!connection) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error
         errorTitle={t("{{title}} is not configured", { title: config.title })}
         errorDescription={t(
@@ -164,7 +164,7 @@ export function FrappeKPICard({
   if (error) {
     return (
       <AsyncBoundary
-        compact
+        size="$3"
         error={error}
         errorTitle={
           isPermissionError

package/src/FrappeLikedBy.tsx

@@ -273,7 +273,7 @@ function FrappeLikedByBody({
     <YStack {...knobProps.gap} testID="frappe-liked-by" {...stackProps}>
       <FrappeReconnectIndicator config={connectionConfig} />
       <AsyncBoundary
-        compact
+        size="$3"
         loading={!!collection && isLoading}
         error={loadError}
         onRetry={onRetry}

package/src/FrappeListView.controls.spec.tsx

@@ -157,7 +157,9 @@ describe("FrappeListView controls write their state back", () => {
     const setParams = vi.fn();
     renderList({}, {}, navigationAt({}, setParams));
     await waitFor(() => expect(shownCards().length).toBe(6), { timeout: 5000 });
-    fireEvent.click(await screen.findByTestId("pokemon-type-fire"));
+    const chip = await screen.findByTestId("pokemon-type-fire");
+    expect(getComputedStyle(chip).height).toBe("32px");
+    fireEvent.click(chip);
     await expectCards(["charmander"]);
     expect(setParams).toHaveBeenCalledWith({ type: "fire" });
   });
@@ -223,3 +225,44 @@ describe("FrappeListView routed page with its toolbar off", () => {
     expect(navigate).toHaveBeenCalledWith("/pokemon/new");
   });
 });
+
+describe("FrappeListView on the house compact class (§ ListControls rows)", () => {
+  const initialWidth = window.innerWidth;
+  afterEach(() => {
+    window.innerWidth = initialWidth;
+  });
+
+  it("at 390 puts the view switcher icon-only on the one control row, with one chip row under it", async () => {
+    window.innerWidth = 390;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("compact");
+    const row = screen.getByTestId("pokemon-controls-row");
+    const switcher = screen.getByTestId("pokemon-view-switcher");
+    expect(row.contains(switcher)).toBe(true);
+    // Icon-only: the segments keep their names but paint no label text.
+    expect(switcher.textContent).toBe("");
+    expect(switcher.querySelector('[aria-label="List"]')).not.toBeNull();
+    expect(screen.queryByTestId("view-switcher")).toBeNull();
+    expect(row.contains(screen.getByTestId("pokemon-tools"))).toBe(true);
+    expect(band.children).toHaveLength(2);
+    expect(screen.getAllByRole("radiogroup", { name: "Type" })).toHaveLength(1);
+  });
+
+  it("at 700 keeps the switcher in the header and the controls on one row", async () => {
+    window.innerWidth = 700;
+    renderList({}, { route: "/pokemon", showToolbar: false, title: "Roster" });
+    const band = await screen.findByTestId("pokemon-controls");
+    expect(band.getAttribute("data-controls-layout")).toBe("wide");
+    expect(screen.getByTestId("view-switcher")).toBeTruthy();
+    expect(screen.queryByTestId("pokemon-view-switcher")).toBeNull();
+    expect(screen.queryByTestId("pokemon-tools")).toBeNull();
+  });
+
+  it("paints the surface card without an overflow clip, so the page scroll reaches every row", async () => {
+    renderList({}, { route: "/pokemon", surface: true, defaultViewMode: "list" });
+    const card = await screen.findByTestId("pokemon-list");
+    expect(getComputedStyle(card).overflow).not.toBe("hidden");
+    expect(card.getAttribute("data-constraint-container")).toBe("PageSection");
+  });
+});

package/src/FrappeListView.shape.spec.tsx

@@ -0,0 +1,67 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeListView } from "./FrappeListView";
+import { FrappeProvider } from "./FrappeProvider";
+
+let run = 0;
+let projections: string[][];
+let answerShape: ((response: Response) => void) | undefined;
+const record = { name: "move-1", move_name: "Tackle", power: 40 };
+
+beforeEach(() => {
+  run += 1;
+  projections = [];
+  answerShape = undefined;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    if (url.pathname === "/api/resource/Move") {
+      const fields = JSON.parse(url.searchParams.get("fields") ?? "[]") as string[];
+      if (fields.includes("*"))
+        return new Promise<Response>((resolve) => {
+          answerShape = resolve;
+        });
+      projections.push(fields);
+      return Response.json({ data: [record] });
+    }
+    return Response.json({ exc_type: "PermissionError" }, { status: 403 });
+  });
+});
+afterEach(() => vi.unstubAllGlobals());
+
+function mount(mode: "list" | "table", explicit = false) {
+  return renderWithProviders(
+    <FrappeProvider baseURL={`https://shape-delay-${run}.test`} realtime={false}>
+      <FrappeListView<{ name: string; doctype: string; move_name: string; power: number }>
+        doctype="Move"
+        viewMode={mode}
+        fields={explicit ? ["name", "move_name"] : undefined}
+        showToolbar={false}
+      />
+    </FrappeProvider>,
+  );
+}
+
+describe("guest list projection", () => {
+  it.each(["list", "table"] as const)(
+    "waits for the shape before mounting the %s collection",
+    async (mode) => {
+      mount(mode);
+      await waitFor(() => expect(answerShape).toBeDefined());
+      await act(async () => {});
+      expect(projections).toEqual([]);
+      expect(screen.getByLabelText("Loading")).toBeTruthy();
+      await act(async () => answerShape?.(Response.json({ data: [record] })));
+      await waitFor(() => expect(screen.getByText("Tackle")).toBeTruthy());
+      expect(projections).toHaveLength(1);
+      expect(projections[0]).toEqual(expect.arrayContaining(["name", "move_name", "power"]));
+    },
+  );
+
+  it("keeps explicit fields immediate while the shape is delayed", async () => {
+    mount("table", true);
+    await waitFor(() => expect(screen.getByText("move-1")).toBeTruthy());
+    expect(projections).toHaveLength(1);
+    expect(projections[0]).toEqual(expect.arrayContaining(["name", "move_name"]));
+  });
+});