@multiplatform.one/frappe-ui 7.34.1 → 7.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/frappe-ui",
-  "version": "7.34.1",
+  "version": "7.34.3",
   "description": "Pre-wired Tamagui components for Frappe doctypes with live data",
   "keywords": [
     "cross-platform",
@@ -72,42 +72,42 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/components": "7.34.1",
-    "@multiplatform.one/desktop": "7.34.1",
-    "@multiplatform.one/forms": "7.34.1",
-    "@multiplatform.one/frappe": "7.34.1",
-    "@multiplatform.one/i18n": "7.34.1",
-    "@multiplatform.one/markdown": "7.34.1",
-    "@multiplatform.one/platform": "7.34.1",
-    "@multiplatform.one/rich-text": "7.34.1",
-    "@multiplatform.one/router": "7.34.1",
-    "@multiplatform.one/store": "7.34.1",
-    "@multiplatform.one/table": "7.34.1",
-    "@multiplatform.one/theme": "7.34.1",
+    "@multiplatform.one/components": "^7.34.3",
+    "@multiplatform.one/desktop": "^7.34.3",
+    "@multiplatform.one/forms": "^7.34.3",
+    "@multiplatform.one/frappe": "^7.34.3",
+    "@multiplatform.one/i18n": "^7.34.3",
+    "@multiplatform.one/markdown": "^7.34.3",
+    "@multiplatform.one/platform": "^7.34.3",
+    "@multiplatform.one/rich-text": "^7.34.3",
+    "@multiplatform.one/router": "^7.34.3",
+    "@multiplatform.one/store": "^7.34.3",
+    "@multiplatform.one/table": "^7.34.3",
+    "@multiplatform.one/theme": "^7.34.3",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/colors": "2.7.6",
     "@tanstack/db": "0.8.0",
-    "@tanstack/form-core": "^1.29.1",
+    "@tanstack/form-core": "^1.33.5",
     "@tanstack/react-hotkeys": "^0.5.1",
-    "@tiptap/extension-image": "^3.30.0",
-    "@tiptap/extension-link": "^3.30.0",
-    "@tiptap/extension-placeholder": "^3.30.0",
-    "@tiptap/pm": "^3.30.0",
-    "@tiptap/react": "^3.30.0",
-    "@tiptap/starter-kit": "^3.30.0",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/extension-link": "^3.32.0",
+    "@tiptap/extension-placeholder": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/react": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
     "html5-qrcode": "^2.3.8",
-    "signature_pad": "^5.1.3",
+    "signature_pad": "^5.1.4",
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.34.1",
-    "@multiplatform.one/storybook": "7.34.1",
-    "@multiplatform.one/test-utils": "7.34.1",
+    "@multiplatform.one/config": "7.34.3",
+    "@multiplatform.one/storybook": "7.34.3",
+    "@multiplatform.one/test-utils": "7.34.3",
     "@tamagui/build": "2.7.6",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^4.1.5",
     "i18next": "^25.10.10",
     "react": "19.2.5",

package/src/FrappeTable.infiniteLoadError.spec.tsx

@@ -0,0 +1,118 @@
+// MPO-485 / LC-84: infinite serverSide hands loading and empty chrome to
+// DataTable, whose page loader swallowed a rejected page 0. A list whose read
+// failed said "No data available". A failed read is an error with the
+// server's reason and a Retry, and Retry loads the rows once the bench answers.
+import type { DataTableColumn } 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, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeProvider } from "./FrappeProvider";
+import { FrappeTable } from "./FrappeTable";
+
+const doctype = "Pokemon";
+
+interface Pokemon {
+  name: string;
+  doctype: string;
+  pokemon_name: string;
+}
+
+const columns: DataTableColumn<Partial<Pokemon>>[] = [
+  { id: "name", accessorKey: "name", header: "ID" },
+  { id: "pokemon_name", accessorKey: "pokemon_name", header: "Pokemon Name" },
+];
+
+const filterFields = [{ id: "pokemon_name", label: "Pokemon Name", type: "text" as const }];
+const readOnly = { create: false, write: false, delete: false };
+const settle = { timeout: 8000 };
+
+let run = 0;
+let failing: "count" | "rows" | null = null;
+
+function json(body: unknown, status = 200) {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  run += 1;
+  failing = null;
+  vi.stubGlobal("fetch", async (input: string | URL | Request) => {
+    const url = new URL(String(input instanceof Request ? input.url : input));
+    if (url.pathname === "/api/method/frappe.client.get_count") {
+      return failing === "count"
+        ? json({ exc_type: "ValidationError", exception: "Count timed out" }, 417)
+        : json({ message: 2 });
+    }
+    if (url.pathname === `/api/resource/${doctype}`) {
+      if (failing === "rows") {
+        return json({ exc_type: "ValidationError", exception: "Pokemon is being migrated" }, 417);
+      }
+      return json({
+        data: [
+          { name: "bulbasaur", pokemon_name: "Bulbasaur" },
+          { name: "ivysaur", pokemon_name: "Ivysaur" },
+        ],
+      });
+    }
+    return json({ exc_type: "PermissionError" }, 403);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+function renderTable() {
+  return renderWithProviders(
+    <FrappeProvider baseURL={`https://infinite-load-error-${run}.spec.test`} realtime={false}>
+      <FrappeTable<Pokemon>
+        doctype={doctype}
+        columns={columns}
+        filterableFields={filterFields}
+        rights={readOnly}
+        serverSide
+        enablePagination
+        paginationMode="infinite"
+      />
+    </FrappeProvider>,
+  );
+}
+
+describe("FrappeTable infinite server mode with a failed read", () => {
+  it("shows the server's reason with Retry when get_count answers 417", async () => {
+    failing = "count";
+    renderTable();
+    await waitFor(() => expect(screen.getByText(/Count timed out/)).toBeTruthy(), settle);
+    expect(screen.getByText("Retry")).toBeTruthy();
+    expect(screen.queryByText("No data available")).toBeNull();
+    expect(screen.queryByText("Bulbasaur")).toBeNull();
+  });
+
+  it("shows the server's reason when the /api/resource read fails, and Retry loads the rows", async () => {
+    failing = "rows";
+    const user = userEvent.setup();
+    renderTable();
+    await waitFor(() => expect(screen.getByText(/Pokemon is being migrated/)).toBeTruthy(), settle);
+    expect(screen.queryByText("No data available")).toBeNull();
+
+    failing = null;
+    await user.click(screen.getByText("Retry"));
+    await waitFor(() => expect(screen.getByText("Bulbasaur")).toBeTruthy(), settle);
+    expect(screen.queryByText(/Pokemon is being migrated/)).toBeNull();
+  });
+});

package/src/fields/Date/catalog.tsx

@@ -0,0 +1,190 @@
+/**
+ * Web `Date` field for the three Frappe date fieldtypes, and the native one
+ * when the optional `@react-native-community/datetimepicker` peer is absent.
+ *
+ * The field used to render ONE date-only calendar for all three types, with
+ * only the placeholder varying — so a `Datetime` silently dropped its time
+ * component from the picker and a `Time` rendered EMPTY, because the calendar
+ * adopts its value through `coerceToDate`, for which a bare `HH:mm` is not a
+ * date (SB-M-617). Each type now gets the house primitive that matches it:
+ *
+ *   date      → forms `DatePicker`      (month grid)
+ *   datetime  → forms `DatetimePicker`  (Date/Time tabs — grid, then columns)
+ *   time      → the package's own `TimePicker`, which is also what the field
+ *               registry routes the Frappe `Time` fieldtype to, so a
+ *               `Date type="time"` and a `Time` field are one control
+ *
+ * This mirrors what the native half already does (calendar / wheel /
+ * calendar-then-wheel), and every branch serializes through the one shared
+ * `wire.ts` body, so a web pick and a native pick of the same moment persist
+ * byte-identical strings.
+ */
+
+import {
+  DatePicker as FormsDatePicker,
+  DatetimePicker as FormsDatetimePicker,
+} from "@multiplatform.one/forms";
+import { useMemo } from "react";
+import { useProps } from "tamagui";
+import { TimePicker, type TimePickerProps } from "../TimePicker";
+import type { DateProps } from "./types";
+import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
+
+export type { DateProps } from "./types";
+
+/**
+ * Adopt a Frappe datetime wire string through the shared read body rather
+ * than handing the raw string to the picker, whose `coerceToDate` falls
+ * through to `new Date(string)` for anything that is not date-only —
+ * implementation-defined for the space-separated shape Frappe writes.
+ * Memoized by the caller so the Date identity is stable across renders: the
+ * picker re-seeds its display state from every new `value` identity, which
+ * would otherwise discard an in-progress edit on an unrelated re-render.
+ */
+function toPickerDate(value: string | undefined): Date | null {
+  if (!value) return null;
+  const date = fromFrappeDateValue(value, "datetime");
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+/**
+ * `TimePicker` speaks `HH:mm`; Frappe stores `HH:mm:ss`. Round-tripping
+ * through the shared wire body — rather than padding the string here — is
+ * what keeps the two platform halves byte-identical, since the native half
+ * serializes its wheel pick through exactly this call.
+ */
+function toTimeWireValue(picked: string): string {
+  if (!picked) return "";
+  const date = fromFrappeDateValue(picked, "time");
+  return Number.isNaN(date.getTime()) ? "" : toFrappeDateValue(date, "time");
+}
+
+export function Date<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DateProps<TData, TName>) {
+  const {
+    defaultValue,
+    form,
+    inputProps: _inputProps,
+    mode,
+    name,
+    onBlur,
+    onChange,
+    preserveValue,
+    validators,
+    disabled,
+    value,
+    type = "date",
+    ...fieldProps
+  } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
+
+  const wireValue = value as string | undefined;
+  const emit = onChange as ((v: string) => void) | undefined;
+  const datetimeValue = useMemo(
+    () => (type === "datetime" ? toPickerDate(wireValue) : null),
+    [type, wireValue],
+  );
+
+  const placeholder =
+    (fieldProps.placeholder as string | undefined) ??
+    (type === "time" ? "Select time" : type === "datetime" ? "Select date & time" : "Select date");
+
+  if (type === "time") {
+    return (
+      <TimePicker
+        // `TimePicker` is not generic over the form's data shape, so the
+        // three form props are re-cast to its own non-generic surface.
+        name={name as TimePickerProps["name"]}
+        form={form as TimePickerProps["form"]}
+        validators={validators as TimePickerProps["validators"]}
+        // The wire shape is what this control already speaks: `HH:mm[:ss]`,
+        // 24h. It adopts the string directly, so nothing has to widen the
+        // shared date parser to let a Time field display its own value.
+        value={wireValue}
+        onChange={(picked) => emit?.(toTimeWireValue(picked))}
+        defaultValue={defaultValue as string | undefined}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={fieldProps.error}
+        helperText={fieldProps.helperText}
+        readOnly={fieldProps.readOnly}
+        skeleton={fieldProps.skeleton}
+        compact={fieldProps.compact}
+        required={fieldProps.required}
+        id={fieldProps.id}
+        size={fieldProps.size}
+        disabled={disabled}
+        placeholder={placeholder}
+        onBlur={onBlur}
+      />
+    );
+  }
+
+  if (type === "datetime") {
+    return (
+      <FormsDatetimePicker
+        name={name}
+        form={form}
+        validators={validators}
+        value={datetimeValue}
+        // No `previousValue`: this picker owns both halves of the value and
+        // preserves an existing time across a day change itself, so carrying
+        // the old time part here would overwrite a time the user just set.
+        // The native half passes nothing for the same reason.
+        onChange={(date) => emit?.(date ? toFrappeDateValue(date, "datetime") : "")}
+        defaultValue={defaultValue as string}
+        label={fieldProps.label}
+        labelProps={fieldProps.labelProps}
+        error={fieldProps.error}
+        helperText={fieldProps.helperText}
+        readOnly={fieldProps.readOnly}
+        skeleton={fieldProps.skeleton}
+        compact={fieldProps.compact}
+        required={fieldProps.required}
+        id={fieldProps.id}
+        size={fieldProps.size}
+        disabled={disabled}
+        minDate={fieldProps.minDate}
+        maxDate={fieldProps.maxDate}
+        placeholder={placeholder}
+        onBlur={onBlur}
+        mode={mode}
+        preserveValue={preserveValue}
+      />
+    );
+  }
+
+  return (
+    <FormsDatePicker
+      name={name}
+      form={form}
+      validators={validators}
+      // Controlled pass-through: folding `value` into `defaultValue` was
+      // mount-only, so a value arriving after first paint (create-mode
+      // engine seeding) never displayed — and `onChange` was dropped, so
+      // picks never reached the consumer doc. `undefined` stays undefined so
+      // uncontrolled (defaultValue-only) use keeps its semantics.
+      value={wireValue}
+      onChange={(date) => emit?.(date ? toFrappeDateValue(date, "date") : "")}
+      defaultValue={defaultValue as string}
+      label={fieldProps.label}
+      labelProps={fieldProps.labelProps}
+      error={fieldProps.error}
+      helperText={fieldProps.helperText}
+      readOnly={fieldProps.readOnly}
+      skeleton={fieldProps.skeleton}
+      compact={fieldProps.compact}
+      required={fieldProps.required}
+      id={fieldProps.id}
+      size={fieldProps.size}
+      disabled={disabled}
+      minDate={fieldProps.minDate}
+      maxDate={fieldProps.maxDate}
+      placeholder={placeholder}
+      onBlur={onBlur}
+      mode={mode}
+      preserveValue={preserveValue}
+    />
+  );
+}

package/src/fields/Date/dateTimePickerLoader.ts

@@ -0,0 +1,25 @@
+export type DateTimePickerComponent =
+  typeof import("@react-native-community/datetimepicker").default;
+export type { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+
+let cached: DateTimePickerComponent | null | undefined;
+
+/**
+ * Loads the optional `@react-native-community/datetimepicker` peer at runtime,
+ * the same contract as forms' `nativeDateTime/dateTimePickerLoader.ts`. A
+ * static import of an absent peer stays external in the native bundle and
+ * hermesc rejects the leftover `import` statement (FZ-7357); the guarded
+ * `require` returns null instead, and the field renders its catalog half.
+ */
+export function loadDateTimePicker(): DateTimePickerComponent | null {
+  if (cached !== undefined) return cached;
+  try {
+    const mod = require("@react-native-community/datetimepicker") as {
+      default?: DateTimePickerComponent;
+    };
+    cached = mod?.default ?? null;
+  } catch {
+    cached = null;
+  }
+  return cached;
+}

package/src/fields/Date/index.native.tsx

@@ -25,9 +25,14 @@ import {
 } from "react-native";
 import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { platform } from "@multiplatform.one/platform";
-import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
 import { Text, View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
 import { useKeyboardInset } from "../../shared/useKeyboardInset";
+import { Date as CatalogDate } from "./catalog";
+import {
+  type DateTimePickerComponent,
+  type DateTimePickerEvent,
+  loadDateTimePicker,
+} from "./dateTimePickerLoader";
 import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
 import type { DateProps } from "./types";
 import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
@@ -104,10 +109,13 @@ function useNativePickerScheme(): "light" | "dark" {
  * written as `function Date` so the global `Date` constructor stays reachable
  * inside this module.
  */
-function DateField<
+function OsDateField<
   TData extends Record<string, unknown> = Record<string, unknown>,
   TName extends string = string,
->(props: DateProps<TData, TName>) {
+>({
+  DateTimePicker,
+  ...props
+}: DateProps<TData, TName> & { DateTimePicker: DateTimePickerComponent }) {
   const {
     compact,
     defaultValue,
@@ -421,4 +429,17 @@ function DateField<
   );
 }
 
+/**
+ * Without the optional `@react-native-community/datetimepicker` peer the
+ * field keeps working as the catalog picker the web half renders.
+ */
+function DateField<
+  TData extends Record<string, unknown> = Record<string, unknown>,
+  TName extends string = string,
+>(props: DateProps<TData, TName>) {
+  const DateTimePicker = loadDateTimePicker();
+  if (!DateTimePicker) return <CatalogDate {...props} />;
+  return <OsDateField {...props} DateTimePicker={DateTimePicker} />;
+}
+
 export { DateField as Date };

package/src/fields/Date/index.tsx

@@ -1,189 +1,2 @@
-/**
- * Web `Date` field for the three Frappe date fieldtypes.
- *
- * The field used to render ONE date-only calendar for all three types, with
- * only the placeholder varying — so a `Datetime` silently dropped its time
- * component from the picker and a `Time` rendered EMPTY, because the calendar
- * adopts its value through `coerceToDate`, for which a bare `HH:mm` is not a
- * date (SB-M-617). Each type now gets the house primitive that matches it:
- *
- *   date      → forms `DatePicker`      (month grid)
- *   datetime  → forms `DatetimePicker`  (Date/Time tabs — grid, then columns)
- *   time      → the package's own `TimePicker`, which is also what the field
- *               registry routes the Frappe `Time` fieldtype to, so a
- *               `Date type="time"` and a `Time` field are one control
- *
- * This mirrors what the native half already does (calendar / wheel /
- * calendar-then-wheel), and every branch serializes through the one shared
- * `wire.ts` body, so a web pick and a native pick of the same moment persist
- * byte-identical strings.
- */
-
-import {
-  DatePicker as FormsDatePicker,
-  DatetimePicker as FormsDatetimePicker,
-} from "@multiplatform.one/forms";
-import { useMemo } from "react";
-import { useProps } from "tamagui";
-import { TimePicker, type TimePickerProps } from "../TimePicker";
-import type { DateProps } from "./types";
-import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
-
+export { Date } from "./catalog";
 export type { DateProps } from "./types";
-
-/**
- * Adopt a Frappe datetime wire string through the shared read body rather
- * than handing the raw string to the picker, whose `coerceToDate` falls
- * through to `new Date(string)` for anything that is not date-only —
- * implementation-defined for the space-separated shape Frappe writes.
- * Memoized by the caller so the Date identity is stable across renders: the
- * picker re-seeds its display state from every new `value` identity, which
- * would otherwise discard an in-progress edit on an unrelated re-render.
- */
-function toPickerDate(value: string | undefined): Date | null {
-  if (!value) return null;
-  const date = fromFrappeDateValue(value, "datetime");
-  return Number.isNaN(date.getTime()) ? null : date;
-}
-
-/**
- * `TimePicker` speaks `HH:mm`; Frappe stores `HH:mm:ss`. Round-tripping
- * through the shared wire body — rather than padding the string here — is
- * what keeps the two platform halves byte-identical, since the native half
- * serializes its wheel pick through exactly this call.
- */
-function toTimeWireValue(picked: string): string {
-  if (!picked) return "";
-  const date = fromFrappeDateValue(picked, "time");
-  return Number.isNaN(date.getTime()) ? "" : toFrappeDateValue(date, "time");
-}
-
-export function Date<
-  TData extends Record<string, unknown> = Record<string, unknown>,
-  TName extends string = string,
->(props: DateProps<TData, TName>) {
-  const {
-    defaultValue,
-    form,
-    inputProps: _inputProps,
-    mode,
-    name,
-    onBlur,
-    onChange,
-    preserveValue,
-    validators,
-    disabled,
-    value,
-    type = "date",
-    ...fieldProps
-  } = useProps(props) as DateProps<TData, TName> & Record<string, unknown>;
-
-  const wireValue = value as string | undefined;
-  const emit = onChange as ((v: string) => void) | undefined;
-  const datetimeValue = useMemo(
-    () => (type === "datetime" ? toPickerDate(wireValue) : null),
-    [type, wireValue],
-  );
-
-  const placeholder =
-    (fieldProps.placeholder as string | undefined) ??
-    (type === "time" ? "Select time" : type === "datetime" ? "Select date & time" : "Select date");
-
-  if (type === "time") {
-    return (
-      <TimePicker
-        // `TimePicker` is not generic over the form's data shape, so the
-        // three form props are re-cast to its own non-generic surface.
-        name={name as TimePickerProps["name"]}
-        form={form as TimePickerProps["form"]}
-        validators={validators as TimePickerProps["validators"]}
-        // The wire shape is what this control already speaks: `HH:mm[:ss]`,
-        // 24h. It adopts the string directly, so nothing has to widen the
-        // shared date parser to let a Time field display its own value.
-        value={wireValue}
-        onChange={(picked) => emit?.(toTimeWireValue(picked))}
-        defaultValue={defaultValue as string | undefined}
-        label={fieldProps.label}
-        labelProps={fieldProps.labelProps}
-        error={fieldProps.error}
-        helperText={fieldProps.helperText}
-        readOnly={fieldProps.readOnly}
-        skeleton={fieldProps.skeleton}
-        compact={fieldProps.compact}
-        required={fieldProps.required}
-        id={fieldProps.id}
-        size={fieldProps.size}
-        disabled={disabled}
-        placeholder={placeholder}
-        onBlur={onBlur}
-      />
-    );
-  }
-
-  if (type === "datetime") {
-    return (
-      <FormsDatetimePicker
-        name={name}
-        form={form}
-        validators={validators}
-        value={datetimeValue}
-        // No `previousValue`: this picker owns both halves of the value and
-        // preserves an existing time across a day change itself, so carrying
-        // the old time part here would overwrite a time the user just set.
-        // The native half passes nothing for the same reason.
-        onChange={(date) => emit?.(date ? toFrappeDateValue(date, "datetime") : "")}
-        defaultValue={defaultValue as string}
-        label={fieldProps.label}
-        labelProps={fieldProps.labelProps}
-        error={fieldProps.error}
-        helperText={fieldProps.helperText}
-        readOnly={fieldProps.readOnly}
-        skeleton={fieldProps.skeleton}
-        compact={fieldProps.compact}
-        required={fieldProps.required}
-        id={fieldProps.id}
-        size={fieldProps.size}
-        disabled={disabled}
-        minDate={fieldProps.minDate}
-        maxDate={fieldProps.maxDate}
-        placeholder={placeholder}
-        onBlur={onBlur}
-        mode={mode}
-        preserveValue={preserveValue}
-      />
-    );
-  }
-
-  return (
-    <FormsDatePicker
-      name={name}
-      form={form}
-      validators={validators}
-      // Controlled pass-through: folding `value` into `defaultValue` was
-      // mount-only, so a value arriving after first paint (create-mode
-      // engine seeding) never displayed — and `onChange` was dropped, so
-      // picks never reached the consumer doc. `undefined` stays undefined so
-      // uncontrolled (defaultValue-only) use keeps its semantics.
-      value={wireValue}
-      onChange={(date) => emit?.(date ? toFrappeDateValue(date, "date") : "")}
-      defaultValue={defaultValue as string}
-      label={fieldProps.label}
-      labelProps={fieldProps.labelProps}
-      error={fieldProps.error}
-      helperText={fieldProps.helperText}
-      readOnly={fieldProps.readOnly}
-      skeleton={fieldProps.skeleton}
-      compact={fieldProps.compact}
-      required={fieldProps.required}
-      id={fieldProps.id}
-      size={fieldProps.size}
-      disabled={disabled}
-      minDate={fieldProps.minDate}
-      maxDate={fieldProps.maxDate}
-      placeholder={placeholder}
-      onBlur={onBlur}
-      mode={mode}
-      preserveValue={preserveValue}
-    />
-  );
-}

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

@@ -0,0 +1,23 @@
+/**
+ * The native `Date` field without the optional
+ * `@react-native-community/datetimepicker` peer (FZ-7357): it renders the
+ * catalog half instead of an OS picker it cannot load.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+vi.setConfig({ testTimeout: 240_000 });
+
+vi.mock("./dateTimePickerLoader", () => ({ loadDateTimePicker: () => null }));
+vi.mock("./catalog", () => ({
+  Date: ({ type }: { type?: string }) => <div data-testid="catalog-date" data-type={type} />,
+}));
+
+describe("native Date without the datetimepicker peer", () => {
+  it.each(["date", "datetime", "time"] as const)("renders the catalog %s field", async (type) => {
+    const { Date: DateField } = await import("./index.native");
+    const result = renderWithProviders(<DateField label="When" type={type} />);
+    expect(result.getByTestId("catalog-date").dataset.type).toBe(type);
+  });
+});