@multiplatform.one/frappe-ui 7.4.1 → 7.5.0

package/src/fields/Date/nativePresentation.spec.tsx

@@ -29,6 +29,11 @@ const mockState = vi.hoisted(() => ({
   isAndroid: false,
   /** Props of every mounted picker, newest last. */
   picks: [] as Record<string, unknown>[],
+  keyboardInset: 0,
+}));
+
+vi.mock("../../shared/useKeyboardInset", () => ({
+  useKeyboardInset: () => mockState.keyboardInset,
 }));
 
 vi.mock("@react-native-community/datetimepicker", () => ({
@@ -134,6 +139,7 @@ beforeEach(() => {
   mockState.picks.length = 0;
   mockState.isIos = true;
   mockState.isAndroid = false;
+  mockState.keyboardInset = 0;
 });
 
 describe("native Date field — iOS presentation", () => {
@@ -154,6 +160,20 @@ describe("native Date field — iOS presentation", () => {
     expect(["light", "dark"]).toContain(lastPick().themeVariant);
   });
 
+  it("shrinks the calendar when the keyboard is up so the sheet can sit above it", async () => {
+    mockState.keyboardInset = 420;
+    const DateField = await loadNativeDateField();
+    const result = renderWithProviders(
+      <DateField label="Due Date" value="2026-03-15" onChange={vi.fn()} type="date" />,
+    );
+
+    await press(result.container, "Mar 15, 2026");
+
+    await waitForPick(() => expect(mockState.picks.length).toBeGreaterThan(0));
+    const style = lastPick().style as { height: number };
+    expect(style.height).toBeLessThan(360);
+  });
+
   it("a time keeps the wheel", async () => {
     const DateField = await loadNativeDateField();
     const result = renderWithProviders(

package/src/fields/Date/sheetKeyboard.spec.ts

@@ -0,0 +1,51 @@
+/**
+ * MPO-64 leftover: the frappe-ui Date iOS sheet must use the same keyboard
+ * cap as FloatingPanel / SheetModal. KeyboardAvoidingView cannot shrink a
+ * fixed-height calendar, so the cap is the only thing that keeps the sheet
+ * above the suggestion strip.
+ */
+import { describe, expect, it } from "vitest";
+import {
+  datePickerHeight,
+  dateSheetBottomPadding,
+  dateSheetMaxHeight,
+  DATE_PICKER_CALENDAR_HEIGHT,
+  DATE_SHEET_BACKDROP_STRIP,
+  DATE_SHEET_MIN_HEIGHT,
+} from "./sheetKeyboard";
+
+describe("dateSheetMaxHeight", () => {
+  it("uses the 85% detent when the keyboard is down", () => {
+    expect(dateSheetMaxHeight(800, 0)).toBe(Math.round(800 * 0.85));
+  });
+
+  it("caps to the space above the keyboard, less the 48pt backdrop strip", () => {
+    expect(dateSheetMaxHeight(800, 400)).toBe(800 - 400 - DATE_SHEET_BACKDROP_STRIP);
+    expect(dateSheetMaxHeight(800, 400)).toBeLessThan(dateSheetMaxHeight(800, 0));
+  });
+
+  it("never collapses below the minimum sheet height", () => {
+    expect(dateSheetMaxHeight(800, 700)).toBe(DATE_SHEET_MIN_HEIGHT);
+  });
+});
+
+describe("datePickerHeight", () => {
+  it("keeps the calendar grid when the sheet is tall enough", () => {
+    expect(datePickerHeight("date", 700)).toBe(DATE_PICKER_CALENDAR_HEIGHT);
+  });
+
+  it("shrinks the calendar so the sheet can sit above the keyboard", () => {
+    const maxHeight = dateSheetMaxHeight(800, 400);
+    const height = datePickerHeight("date", maxHeight);
+    expect(height).toBeLessThan(DATE_PICKER_CALENDAR_HEIGHT);
+    expect(height).toBeLessThanOrEqual(maxHeight);
+  });
+});
+
+describe("dateSheetBottomPadding", () => {
+  it("drops the home-indicator inset while the keyboard covers it", () => {
+    expect(dateSheetBottomPadding(0, true)).toBe(24);
+    expect(dateSheetBottomPadding(336, true)).toBe(8);
+    expect(dateSheetBottomPadding(0, false)).toBe(16);
+  });
+});

package/src/fields/Date/sheetKeyboard.ts

@@ -0,0 +1,37 @@
+/**
+ * MPO-64 leftover: same keyboard cap as FloatingPanel / SheetModal.
+ *
+ * The Date iOS sheet used to give the calendar a fixed 360pt height inside a
+ * Modal. KeyboardAvoidingView cannot shrink that shape — it pads the container
+ * and the sheet overflows off the top. Cap the sheet to the space ABOVE the
+ * keyboard (less a strip of backdrop) and shrink the picker to fit.
+ */
+
+export const DATE_SHEET_MAX_HEIGHT_RATIO = 0.85;
+export const DATE_SHEET_BACKDROP_STRIP = 48;
+export const DATE_SHEET_MIN_HEIGHT = 180;
+export const DATE_SHEET_CHROME = 96;
+export const DATE_PICKER_CALENDAR_HEIGHT = 360;
+export const DATE_PICKER_WHEEL_HEIGHT = 200;
+const minPickerHeight = 120;
+
+export function dateSheetMaxHeight(windowHeight: number, keyboardInset: number): number {
+  const available = Math.max(0, windowHeight - keyboardInset);
+  return Math.max(
+    DATE_SHEET_MIN_HEIGHT,
+    Math.round(
+      Math.min(windowHeight * DATE_SHEET_MAX_HEIGHT_RATIO, available - DATE_SHEET_BACKDROP_STRIP),
+    ),
+  );
+}
+
+/** Home-indicator clearance; drop it while the keyboard already covers that band. */
+export function dateSheetBottomPadding(keyboardInset: number, isIos: boolean): number {
+  if (keyboardInset > 0) return 8;
+  return isIos ? 24 : 16;
+}
+
+export function datePickerHeight(mode: "date" | "time", maxHeight: number): number {
+  const preferred = mode === "time" ? DATE_PICKER_WHEEL_HEIGHT : DATE_PICKER_CALENDAR_HEIGHT;
+  return Math.min(preferred, Math.max(minPickerHeight, maxHeight - DATE_SHEET_CHROME));
+}

package/src/fields/DateRange/DateRange.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { DateRangeField, type DateRangeFieldProps } from ".";
 
 export default {
@@ -67,3 +70,41 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Date Range", placeholder: "Select range" } as Partial<StoryProps>;
+
+type DateRangeValue = { start: Date; end: Date } | null;
+type DateRangeRow = { id: string; label: string; value: DateRangeValue };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<DateRangeRow[]>([
+      {
+        id: "1",
+        label: "Alpha",
+        value: { start: new Date("2026-01-01"), end: new Date("2026-01-15") },
+      },
+      {
+        id: "2",
+        label: "Beta",
+        value: { start: new Date("2026-02-01"), end: new Date("2026-02-28") },
+      },
+      { id: "3", label: "Gamma", value: null },
+    ]);
+    const columns: DataTableColumn<DateRangeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Date Range", ...fieldtypeToTableField("Date Range") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Duration/Duration.stories.tsx

@@ -1,6 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useState } from "react";
 import { YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { Duration, type DurationProps } from ".";
 
 export default {
@@ -70,3 +73,32 @@ export const ContractProbe = (args: StoryProps) => (
   </YStack>
 );
 ContractProbe.args = { label: "Duration", value: 3720, showSeconds: false } as Partial<StoryProps>;
+
+type DurationRow = { id: string; label: string; value: number };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<DurationRow[]>([
+      { id: "1", label: "Alpha", value: 3720 },
+      { id: "2", label: "Beta", value: 900 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<DurationRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Duration", ...fieldtypeToTableField("Duration") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/DynamicLink.stories.tsx

@@ -4,20 +4,9 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { YStack } from "tamagui";
 import { FrappeProvider } from "../FrappeProvider";
+import { FrappeStoryProvider } from "../frappeStoryTarget";
 import { DynamicLink, type DynamicLinkProps } from "./DynamicLink";
 
-const fixtures = new InMemoryFixtureProvider({
-  Contact: [
-    { name: "CONTACT-001", doctype: "Contact" },
-    { name: "CONTACT-002", doctype: "Contact" },
-  ],
-  Task: [
-    { name: "TASK-001", doctype: "Task" },
-    { name: "TASK-002", doctype: "Task" },
-    { name: "TASK-003", doctype: "Task" },
-  ],
-});
-
 export default {
   title: "FrappeUI/DynamicLink",
   component: DynamicLink,
@@ -27,7 +16,7 @@ export default {
     docs: {
       description: {
         component:
-          "Frappe Dynamic Link field: doctype selector + document selector, documents fetched live from the selected doctype (fixture-backed here).",
+          "Frappe Dynamic Link field: doctype selector + document selector. Fixture stories are network-hermetic (G-15/D-05): documents come from InMemoryFixtureProvider and DocType meta from an in-story fetch mock, so nothing leaves the machine. The separately-named Live story is the live-bench arm — it targets STORYBOOK_FRAPPE_URL when reachable and falls back to fixtures otherwise.",
       },
     },
   },
@@ -40,6 +29,93 @@ export default {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Hermetic story host (G-15 story honesty / D-05).
+//
+// Fixture-backed stories previously pointed at https://demo.frappe.cloud. The
+// fixture provider serves the *collection*, but DocType meta still resolves
+// over HTTP — so those stories fired a real cross-origin request. MOCK_HOST
+// keeps the same code path (real fetch, real meta shape) without leaving the
+// machine.
+// ---------------------------------------------------------------------------
+
+const MOCK_HOST = "https://frappedynamiclink.mock.test";
+
+function doctypeMeta(name: string) {
+  return {
+    name,
+    doctype: "DocType",
+    module: name === "Task" || name === "ToDo" ? "Projects" : "Contacts",
+    title_field: "name",
+    fields: [{ fieldname: "name", fieldtype: "Data", label: "Name", in_list_view: 1 }],
+    permissions: [{ role: "All", read: 1, write: 1, create: 1 }],
+  };
+}
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+(() => {
+  if (typeof window === "undefined") return;
+  const w = window as unknown as Record<string, unknown>;
+  if (w.__frappeDynamicLinkMockFetch) return;
+  w.__frappeDynamicLinkMockFetch = true;
+  const realFetch = window.fetch.bind(window);
+  window.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+    const urlStr =
+      typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+    if (urlStr.startsWith(MOCK_HOST)) {
+      const url = new URL(urlStr);
+      if (url.pathname === "/api/method/frappe.desk.form.load.getdoctype") {
+        const doctype = url.searchParams.get("doctype") || "Contact";
+        return jsonResponse({ docs: [doctypeMeta(doctype)] });
+      }
+      const metaMatch = url.pathname.match(/^\/api\/resource\/DocType\/(.+)$/);
+      if (metaMatch) return jsonResponse({ data: doctypeMeta(decodeURIComponent(metaMatch[1])) });
+      if (url.pathname === "/api/resource/DocType") {
+        return jsonResponse({
+          data: [
+            { name: "Contact", module: "Contacts" },
+            { name: "Task", module: "Projects" },
+          ],
+        });
+      }
+      // Everything else (guest field-peek, counts): empty, never the network.
+      return jsonResponse({ data: [] });
+    }
+    return realFetch(input as RequestInfo, init);
+  };
+})();
+
+const fixtures = new InMemoryFixtureProvider({
+  Contact: [
+    { name: "CONTACT-001", doctype: "Contact" },
+    { name: "CONTACT-002", doctype: "Contact" },
+  ],
+  Task: [
+    { name: "TASK-001", doctype: "Task" },
+    { name: "TASK-002", doctype: "Task" },
+    { name: "TASK-003", doctype: "Task" },
+  ],
+  DocType: [doctypeMeta("Contact"), doctypeMeta("Task")],
+});
+
+const liveFixtures = new InMemoryFixtureProvider({
+  ToDo: [
+    { name: "TODO-001", doctype: "ToDo" },
+    { name: "TODO-002", doctype: "ToDo" },
+  ],
+  User: [
+    { name: "Administrator", doctype: "User" },
+    { name: "Guest", doctype: "User" },
+  ],
+  DocType: [doctypeMeta("ToDo"), doctypeMeta("User")],
+});
+
 type StoryProps = DynamicLinkProps & Record<string, unknown>;
 
 function Controlled(props: Omit<StoryProps, "onChange">) {
@@ -58,7 +134,7 @@ function Controlled(props: Omit<StoryProps, "onChange">) {
 }
 
 const withProvider = (node: ReactNode) => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={fixtures}>
+  <FrappeProvider baseURL={MOCK_HOST} fixtures={fixtures}>
     {node}
   </FrappeProvider>
 );
@@ -97,3 +173,28 @@ export const States = (args: StoryProps) =>
     </YStack>,
   );
 States.args = { doctypes: ["Contact", "Task"] } as Partial<StoryProps>;
+
+/**
+ * Live Dynamic Link against the real bench (STORYBOOK_FRAPPE_URL, default
+ * the local dev bench proxied by the Storybook dev server) on stock ToDo and
+ * User doctypes. Falls back to fixtures when the bench is unreachable.
+ */
+export const Live = (args: StoryProps) => (
+  <FrappeStoryProvider fixtures={liveFixtures}>
+    <YStack maxWidth={420}>
+      <Controlled {...args} />
+    </YStack>
+  </FrappeStoryProvider>
+);
+Live.args = {
+  label: "Reference",
+  doctypes: ["ToDo", "User"],
+} as Partial<StoryProps>;
+Live.parameters = {
+  docs: {
+    description: {
+      story:
+        "Live Dynamic Link over stock ToDo and User: picking a doctype lists documents from the bench (or fixtures when the bench is down).",
+    },
+  },
+};

package/src/fields/DynamicLink.tsx

@@ -1,10 +1,14 @@
-import { useFrappeCollection, useLiveQuery } from "@multiplatform.one/frappe";
-import { Skeleton } from "@multiplatform.one/forms";
-import { CaretDownIcon } from "@phosphor-icons/react";
+/**
+ * Frappe Dynamic Link: a doctype Select plus a Link over the chosen DocType.
+ *
+ * Design-law lives here: compose forms Select + the Frappe Link (Combobox)
+ * adapter. Do not fork tamagui Select chrome. R10: no frappe.ui.form.on.
+ */
+import { Select as FormsSelect } from "@multiplatform.one/forms";
+import { useState } from "react";
+import { YStack } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useMemo, useState } from "react";
-import { Label, Select, Text, YStack } from "tamagui";
-import { useFrappeConfig } from "../FrappeProvider";
+import { Link } from "./Link";
 
 export interface DynamicLinkProps {
   label?: string;
@@ -42,137 +46,51 @@ export function DynamicLink({
   compact = false,
 }: DynamicLinkProps) {
   const { knobProps } = useResolvedKnobs();
-  const config = useFrappeConfig();
   const [selectedDoctype, setSelectedDoctype] = useState<string>(doctypeFieldValue || "");
   const isLocked = disabled || readOnly;
-  const minHeight = compact ? 32 : 40;
+  const doctypeOptions = doctypes.map((doctype) => ({ label: doctype, value: doctype }));
 
-  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
-  const finalConfig = finalBaseURL
-    ? {
-        baseURL: finalBaseURL,
-        socketPort: config?.socketPort,
-        siteName: config?.siteName,
-        socketBaseURL: config?.socketBaseURL,
-        auth: auth ?? config?.auth,
-        syncOptions: config?.syncOptions,
-        fixtures: config?.fixtures,
-      }
-    : undefined;
-
-  const documentsCollection = useFrappeCollection<{ name: string; doctype: string }>(
-    finalConfig,
-    selectedDoctype,
-    selectedDoctype ? { fields: ["name"] } : undefined,
-  );
-  const { data: rawDocuments } = useLiveQuery(
-    (q) => (documentsCollection ? q.from({ _list: documentsCollection }) : null),
-    [documentsCollection],
-  );
-  const documents = useMemo(
-    () => (rawDocuments as { name: string; doctype: string }[]) ?? [],
-    [rawDocuments],
-  );
-
-  const handleDoctypeChange = (doctype: string) => {
+  const handleDoctypeChange = (next: string | string[]) => {
     if (isLocked) return;
+    const doctype = Array.isArray(next) ? (next[0] ?? "") : next;
     setSelectedDoctype(doctype);
     onDoctypeChange?.(doctype);
     onChange("");
   };
 
-  if (skeleton) {
-    return (
-      <YStack {...knobProps.gap}>
-        {label ? <Skeleton variant="text" width="30%" height={14} /> : null}
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </YStack>
-    );
-  }
+  const documentPicked = !!selectedDoctype;
 
   return (
     <YStack {...knobProps.gap}>
-      {label ? (
-        <Label>
-          {label}
-          {required ? <Text color="$red10"> *</Text> : null}
-        </Label>
-      ) : null}
-
-      <YStack {...knobProps.gap}>
-        <Select
-          size={knobProps.sizeToken}
-          {...({
-            value: selectedDoctype,
-            onValueChange: handleDoctypeChange,
-            disabled: isLocked,
-          } as any)}
-        >
-          <Select.Trigger iconAfter={CaretDownIcon} disabled={isLocked} {...knobProps.borderRadius}>
-            <Select.Value placeholder="Select DocType" />
-          </Select.Trigger>
-
-          <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
-            <Select.Viewport>
-              <Select.Group>
-                <Select.Label>DocType</Select.Label>
-                {doctypes.map((doctype, i) => (
-                  <Select.Item key={doctype} index={i} value={doctype}>
-                    <Select.ItemText>{doctype}</Select.ItemText>
-                  </Select.Item>
-                ))}
-              </Select.Group>
-            </Select.Viewport>
-          </Select.Content>
-        </Select>
-
-        {/* Ternary, not `&&`: with no doctype picked `selectedDoctype` is ""
-            and `{"" && …}` renders an empty text node inside this View —
-            which breaks the native render contract (UX-P16 / Axiom 13:
-            "A text node cannot be a child of a View"). */}
-        {selectedDoctype ? (
-          <Select
-            size={knobProps.sizeToken}
-            {...({
-              value,
-              onValueChange: isLocked ? undefined : onChange,
-              disabled: isLocked || !documents || documents.length === 0,
-            } as any)}
-          >
-            <Select.Trigger
-              iconAfter={CaretDownIcon}
-              disabled={isLocked || !documents || documents.length === 0}
-              {...knobProps.borderRadius}
-            >
-              <Select.Value placeholder={`Select ${selectedDoctype}`} />
-            </Select.Trigger>
-
-            <Select.Content {...{ backgroundColor: "$background" }} {...knobProps.borderRadius}>
-              <Select.Viewport>
-                <Select.Group>
-                  <Select.Label>{selectedDoctype}</Select.Label>
-                  {documents?.map((doc, i) => (
-                    <Select.Item key={doc.name} index={i} value={doc.name || ""}>
-                      <Select.ItemText>{doc.name}</Select.ItemText>
-                    </Select.Item>
-                  ))}
-                </Select.Group>
-              </Select.Viewport>
-            </Select.Content>
-          </Select>
-        ) : null}
-      </YStack>
-
-      {helperText && !error ? (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      ) : null}
-      {error ? (
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
+      <FormsSelect
+        label={label}
+        value={selectedDoctype}
+        onChange={handleDoctypeChange}
+        options={doctypeOptions}
+        placeholder="Select DocType"
+        disabled={isLocked}
+        required={required}
+        readOnly={readOnly}
+        skeleton={skeleton}
+        compact={compact}
+        error={documentPicked ? undefined : error}
+        helperText={documentPicked ? undefined : helperText}
+      />
+      {documentPicked ? (
+        <Link
+          doctype={selectedDoctype}
+          value={value}
+          onChange={onChange}
+          disabled={isLocked}
+          readOnly={readOnly}
+          skeleton={skeleton}
+          compact={compact}
+          placeholder={`Select ${selectedDoctype}`}
+          error={error}
+          helperText={helperText}
+          baseURL={baseURL}
+          auth={auth}
+        />
       ) : null}
     </YStack>
   );