@multiplatform.one/frappe-ui 7.65.2 → 7.67.0

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

@@ -1,278 +0,0 @@
-/**
- * What the native `Date` field asks the OS picker for.
- *
- * The file this covers was unreachable until it was renamed from
- * `date.native.tsx` to `index.native.tsx`, so nothing had ever exercised it.
- * These cases pin the presentation contract that rename makes live:
- *
- * - iOS `date` opens the iOS 14+ calendar (`display="inline"`), not the legacy
- *   wheel — the whole point of the change.
- * - iOS `time` keeps the wheel, which is still the correct iOS control.
- * - iOS `datetime` runs calendar → wheel across the sheet's Next button, and
- *   commits one Frappe wire string built from both halves.
- * - Android keeps `display="default"`, the Material dialog, and runs its own
- *   date-then-time sequence.
- *
- * The suite runs on web, so `react-native` resolves to `react-native-web` and
- * the two native-only edges are mocked: the picker itself (recorded rather
- * than rendered) and the platform flags.
- */
-
-import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
-
-// Same cold-fork budget as the sibling Date.spec.tsx: the first field-module
-// import transforms the whole fields graph.
-vi.setConfig({ testTimeout: 240_000 });
-
-const mockState = vi.hoisted(() => ({
-  isIos: true,
-  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("./dateTimePickerLoader", () => ({
-  loadDateTimePicker: () => (props: Record<string, unknown>) => {
-    mockState.picks.push(props);
-    return null;
-  },
-}));
-
-vi.mock("@multiplatform.one/platform", async (importOriginal) => {
-  const actual = (await importOriginal()) as Record<string, unknown>;
-  const real = actual.platform as Record<string, unknown>;
-  return {
-    ...actual,
-    platform: new Proxy(
-      {},
-      {
-        get(_target, prop) {
-          if (prop === "isIos") return mockState.isIos;
-          if (prop === "isAndroid") return mockState.isAndroid;
-          return real[prop as string];
-        },
-      },
-    ),
-  };
-});
-
-// Mock react-native-reanimated to prevent ESM module resolution failures
-// (same shim as tests/fieldRenderers.spec.tsx).
-vi.mock("react-native-reanimated", () => ({
-  default: {
-    useSharedValue: (init: any) => ({ value: init }),
-    useAnimatedStyle: () => ({}),
-    withTiming: (val: any) => val,
-    withSpring: (val: any) => val,
-    createAnimatedComponent: (component: any) => component,
-    runOnJS: (fn: any) => fn,
-    runOnUI: (fn: any) => fn,
-    useDerivedValue: (fn: () => any) => ({ value: fn() }),
-    useAnimatedRef: () => ({ current: null }),
-    Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
-    FadeIn: { duration: () => ({}) },
-    FadeOut: { duration: () => ({}) },
-    Layout: { duration: () => ({}) },
-    Extrapolation: { CLAMP: "clamp" },
-    measure: () => null,
-    scrollTo: () => {},
-    makeMutable: (init: any) => ({ value: init }),
-  },
-  useSharedValue: (init: any) => ({ value: init }),
-  useAnimatedStyle: () => ({}),
-  withTiming: (val: any) => val,
-  withSpring: (val: any) => val,
-  createAnimatedComponent: (component: any) => component,
-  runOnJS: (fn: any) => fn,
-  runOnUI: (fn: any) => fn,
-  useDerivedValue: (fn: () => any) => ({ value: fn() }),
-  useAnimatedRef: () => ({ current: null }),
-  Easing: { linear: (v: any) => v, ease: (v: any) => v, bezier: () => (v: any) => v },
-  FadeIn: { duration: () => ({}) },
-  FadeOut: { duration: () => ({}) },
-  Layout: { duration: () => ({}) },
-}));
-
-import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
-import React from "react";
-
-async function loadNativeDateField() {
-  return (await import("./index.native")).Date;
-}
-
-/** Intl puts a narrow no-break space before the meridiem; the test should not care. */
-const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
-
-/**
- * Press whatever pressable carries this text, once it exists. The wait is the
- * point: the first paint of this graph can take a while on a loaded machine,
- * and a bare query races it.
- */
-async function press(root: ParentNode, text: string) {
-  let target: Element | null = null;
-  await waitFor(
-    () => {
-      const node = Array.from(root.querySelectorAll("*")).find(
-        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
-      );
-      if (!node) throw new Error(`no element with text "${text}"`);
-      target = node.closest('button, [role="button"]') ?? node;
-    },
-    { timeout: 30_000 },
-  );
-  fireEvent.click(target!);
-}
-
-const lastPick = () => mockState.picks[mockState.picks.length - 1];
-const waitForPick = (predicate: () => void) => waitFor(predicate, { timeout: 30_000 });
-
-// Warm the graph here, not inside the first `it`: the transform is setup cost
-// (110-155s quiet, past 240s under load), and charging it to an assertion made
-// whichever case ran first time out.
-beforeAll(async () => {
-  await loadNativeDateField();
-}, 900_000);
-
-beforeEach(() => {
-  // The iOS sheet is a portal, so a previous case's chrome would otherwise
-  // still be in the document when the next one asserts on it.
-  cleanup();
-  mockState.picks.length = 0;
-  mockState.isIos = true;
-  mockState.isAndroid = false;
-  mockState.keyboardInset = 0;
-});
-
-describe("native Date field — iOS presentation", () => {
-  it("a date opens the calendar, not the legacy wheel", async () => {
-    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));
-    expect(lastPick().mode).toBe("date");
-    expect(lastPick().display).toBe("inline");
-    // `spinner` for a date is the pre-iOS-14 wheel this change removes.
-    expect(lastPick().display).not.toBe("spinner");
-    // The one styling channel an OS control exposes is still driven.
-    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(
-      <DateField label="Reminder" value="09:00:00" onChange={vi.fn()} type="time" />,
-    );
-
-    await press(result.container, "9:00 AM");
-
-    await waitForPick(() => expect(mockState.picks.length).toBeGreaterThan(0));
-    expect(lastPick().mode).toBe("time");
-    expect(lastPick().display).toBe("spinner");
-  });
-
-  it("a datetime runs calendar then wheel, and commits both halves", async () => {
-    const DateField = await loadNativeDateField();
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <DateField
-        label="Starts On"
-        value="2026-03-15 14:30:00"
-        onChange={onChange}
-        type="datetime"
-      />,
-    );
-
-    await press(result.container, "Mar 15, 2026, 2:30 PM");
-    await waitForPick(() => expect(mockState.picks.length).toBeGreaterThan(0));
-    expect(lastPick().mode).toBe("date");
-    expect(lastPick().display).toBe("inline");
-
-    await press(document.body, "Next");
-    await waitForPick(() => expect(lastPick().mode).toBe("time"));
-    expect(lastPick().display).toBe("spinner");
-
-    await press(document.body, "Done");
-    // Untouched, the sheet commits the value it opened on — the point is the
-    // wire shape, which carries both halves and no UTC rendering.
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("2026-03-15 14:30:00");
-  });
-});
-
-describe("native Date field — Android presentation", () => {
-  it("keeps the Material dialog and mounts inline, without the iOS sheet", async () => {
-    mockState.isIos = false;
-    mockState.isAndroid = true;
-
-    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));
-    expect(lastPick().mode).toBe("date");
-    expect(lastPick().display).toBe("default");
-    // No sheet on Android: the dialog is its own window, so there is no Done.
-    expect(result.container.textContent).not.toContain("Done");
-  });
-
-  it("a datetime advances from date to time after the first commit", async () => {
-    mockState.isIos = false;
-    mockState.isAndroid = true;
-
-    const DateField = await loadNativeDateField();
-    const onChange = vi.fn();
-    const result = renderWithProviders(
-      <DateField
-        label="Starts On"
-        value="2026-03-15 14:30:00"
-        onChange={onChange}
-        type="datetime"
-      />,
-    );
-
-    await press(result.container, "Mar 15, 2026, 2:30 PM");
-    await waitForPick(() => expect(mockState.picks.length).toBeGreaterThan(0));
-    expect(lastPick().mode).toBe("date");
-
-    const onPickerChange = lastPick().onChange as (event: unknown, date?: Date) => void;
-    await act(async () => {
-      onPickerChange({ type: "set" }, new Date(2026, 2, 20, 0, 0));
-    });
-    await waitForPick(() => expect(lastPick().mode).toBe("time"));
-    expect(onChange).not.toHaveBeenCalled();
-
-    const onTimeChange = lastPick().onChange as (event: unknown, date?: Date) => void;
-    await act(async () => {
-      onTimeChange({ type: "set" }, new Date(2026, 0, 1, 9, 45));
-    });
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("2026-03-20 09:45:00");
-  });
-});

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

@@ -1,60 +0,0 @@
-/**
- * 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, 47)).toBe(Math.round(800 * 0.85));
-  });
-
-  it("caps to the space above the keyboard, less the 48pt backdrop strip", () => {
-    expect(dateSheetMaxHeight(800, 400, 0)).toBe(800 - 400 - DATE_SHEET_BACKDROP_STRIP);
-    expect(dateSheetMaxHeight(800, 400, 0)).toBeLessThan(dateSheetMaxHeight(800, 0, 0));
-  });
-
-  it("keeps the backdrop strip below the status bar, not inside it", () => {
-    const windowHeight = 874;
-    const keyboardInset = 335;
-    const topInset = 62;
-    const sheetTop =
-      windowHeight - keyboardInset - dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
-    expect(sheetTop - topInset).toBe(DATE_SHEET_BACKDROP_STRIP);
-  });
-
-  it("never collapses below the minimum sheet height", () => {
-    expect(dateSheetMaxHeight(800, 700, 47)).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, 47);
-    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

@@ -1,45 +0,0 @@
-/**
- * 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 between the
- * status bar and 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,
-  topInset: 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 - topInset - 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/types/fields/Date/dateTimePickerLoader.d.ts

@@ -1,11 +0,0 @@
-export type DateTimePickerComponent = typeof import("@react-native-community/datetimepicker").default;
-export type { DateTimePickerEvent } from "@react-native-community/datetimepicker";
-/**
- * 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 declare function loadDateTimePicker(): DateTimePickerComponent | null;
-//# sourceMappingURL=dateTimePickerLoader.d.ts.map

package/types/fields/Date/dateTimePickerLoader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dateTimePickerLoader.d.ts","sourceRoot":"","sources":["../../../src/fields/Date/dateTimePickerLoader.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,uBAAuB,GACjC,cAAc,wCAAwC,EAAE,OAAO,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAIlF;;;;;;GAMG;AACH,wBAAgB,kBAAkB,IAAI,uBAAuB,GAAG,IAAI,CAWnE"}

package/types/fields/Date/index.native.d.ts

@@ -1,14 +0,0 @@
-import type { DateProps } from "./types";
-/**
- * Design-law: trigger and sheet actions are house Button. The OS picker stays
- * `Modal animationType="fade"` so the scrim plants in place (MPO-62); the
- * sheet caps above the keyboard via inset padding (MPO-64).
- */
-export type { DateProps } from "./types";
-/**
- * Without the optional `@react-native-community/datetimepicker` peer the
- * field keeps working as the catalog picker the web half renders.
- */
-declare function DateField<TData extends Record<string, unknown> = Record<string, unknown>, TName extends string = string>(props: DateProps<TData, TName>): import("react/jsx-runtime").JSX.Element;
-export { DateField as Date };
-//# sourceMappingURL=index.native.d.ts.map

package/types/fields/Date/index.native.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/fields/Date/index.native.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC;;;;GAIG;AAEH,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAiYzC;;;GAGG;AACH,iBAAS,SAAS,CAChB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,KAAK,SAAS,MAAM,GAAG,MAAM,EAC7B,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,2CAI/B;AAED,OAAO,EAAE,SAAS,IAAI,IAAI,EAAE,CAAC"}

package/types/fields/Date/sheetKeyboard.d.ts

@@ -1,20 +0,0 @@
-/**
- * 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 between the
- * status bar and the keyboard (less a strip of backdrop) and shrink the picker
- * to fit.
- */
-export declare const DATE_SHEET_MAX_HEIGHT_RATIO = 0.85;
-export declare const DATE_SHEET_BACKDROP_STRIP = 48;
-export declare const DATE_SHEET_MIN_HEIGHT = 180;
-export declare const DATE_SHEET_CHROME = 96;
-export declare const DATE_PICKER_CALENDAR_HEIGHT = 360;
-export declare const DATE_PICKER_WHEEL_HEIGHT = 200;
-export declare function dateSheetMaxHeight(windowHeight: number, keyboardInset: number, topInset: number): number;
-/** Home-indicator clearance; drop it while the keyboard already covers that band. */
-export declare function dateSheetBottomPadding(keyboardInset: number, isIos: boolean): number;
-export declare function datePickerHeight(mode: "date" | "time", maxHeight: number): number;
-//# sourceMappingURL=sheetKeyboard.d.ts.map

package/types/fields/Date/sheetKeyboard.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sheetKeyboard.d.ts","sourceRoot":"","sources":["../../../src/fields/Date/sheetKeyboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAChD,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAG5C,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,GACf,MAAM,CAWR;AAED,qFAAqF;AACrF,wBAAgB,sBAAsB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAGpF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAGjF"}