@multiplatform.one/forms 7.65.2 → 7.67.0

package/src/fields/ToggleGroup/ToggleGroup.system.native.spec.tsx

@@ -0,0 +1,192 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { useForm } from "@tanstack/react-form";
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { TamaguiProvider } from "tamagui";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Form } from "../../Form";
+import { ToggleGroup } from "./index";
+
+const system = vi.hoisted(() => ({
+  os: "ios" as "ios" | "android" | null,
+  installed: true,
+}));
+
+// UISegmentedControl as a probe: it shows the props it got and selects a
+// segment through onChange, the way a tap on a segment does.
+const SegmentedProbe = vi.hoisted(
+  () =>
+    function SegmentedProbe(props: Record<string, any>) {
+      return (
+        <div
+          data-testid="system-segmented"
+          data-selected={props.selectedIndex}
+          data-enabled={String(props.enabled)}
+          data-tint={props.tintColor}
+          data-ink={props.activeFontStyle?.color}
+          data-appearance={props.appearance}
+          data-label={props.accessibilityLabel ?? ""}
+        >
+          {props.values.map((value: string, index: number) => (
+            <button
+              key={value}
+              type="button"
+              onClick={() => props.onChange?.({ nativeEvent: { selectedSegmentIndex: index } })}
+            >
+              {value}
+            </button>
+          ))}
+        </div>
+      );
+    },
+);
+
+vi.mock("../../shared/systemControls", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../../shared/systemControls")>()),
+  systemControlPlatform: () => system.os,
+}));
+
+vi.mock("../../shared/systemControlModules", () => ({
+  loadSystemSlider: () => null,
+  loadSystemSegmentedControl: () => (system.installed ? SegmentedProbe : null),
+}));
+
+const mpoTheme = createDefaultThemeConfig();
+const renderInScheme = (ui: ReactElement, scheme: "light" | "dark") =>
+  render(
+    <TamaguiProvider config={mpoTheme.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {ui}
+    </TamaguiProvider>,
+  );
+
+afterEach(cleanup);
+beforeEach(() => {
+  system.os = "ios";
+  system.installed = true;
+});
+
+const views = [
+  { label: "Day", value: "day" },
+  { label: "Week", value: "week" },
+  { label: "Month", value: "month" },
+];
+
+const literal = (value: string | null) => Boolean(value) && !value!.startsWith("$");
+const segmented = (result: ReturnType<typeof renderWithProviders>) =>
+  result.queryByTestId("system-segmented");
+
+function FormToggleGroup({ onSubmit }: { onSubmit: (value: { view: string }) => void }) {
+  const form = useForm({
+    defaultValues: { view: "day" },
+    onSubmit: ({ value }) => onSubmit(value),
+  });
+  return (
+    <Form form={form}>
+      <ToggleGroup name="view" label="View" options={views} />
+      <button type="button" onClick={() => form.handleSubmit()}>
+        Save
+      </button>
+    </Form>
+  );
+}
+
+// LC-266 PLATFORM-ERGONOMICS (FZ-8119). On iOS a short single choice is
+// UISegmentedControl when the binary carries the module, painted with the
+// LC-131 selected tint and ink. Without it, the MPO segmented control.
+describe("ToggleGroup on iOS", () => {
+  it.each(["light", "dark"] as const)(
+    "renders UISegmentedControl with the %s theme's selected tint, ink and scheme",
+    (scheme) => {
+      const result = renderInScheme(
+        <ToggleGroup label="View" options={views} defaultValue="week" />,
+        scheme,
+      );
+      const view = result.getByTestId("system-segmented");
+      expect(view.dataset).toMatchObject({ selected: "1", enabled: "true", label: "View" });
+      expect(literal(view.getAttribute("data-tint"))).toBe(true);
+      expect(literal(view.getAttribute("data-ink"))).toBe(true);
+      expect(view.dataset.appearance).toBe(scheme);
+    },
+  );
+
+  it("selects uncontrolled and reports the option value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <ToggleGroup options={views} defaultValue="day" onChange={onChange} />,
+    );
+    fireEvent.click(result.getByText("Month"));
+    expect(onChange).toHaveBeenCalledExactlyOnceWith("month");
+    expect(segmented(result)!.dataset.selected).toBe("2");
+  });
+
+  it("follows a controlled value", () => {
+    const result = renderWithProviders(<ToggleGroup options={views} value="day" />);
+    fireEvent.click(result.getByText("Week"));
+    expect(segmented(result)!.dataset.selected).toBe("0");
+    result.rerender(<ToggleGroup options={views} value="month" />);
+    expect(segmented(result)!.dataset.selected).toBe("2");
+  });
+
+  it("writes the form field it is bound to", async () => {
+    const onSubmit = vi.fn();
+    const result = renderWithProviders(<FormToggleGroup onSubmit={onSubmit} />);
+    expect(segmented(result)!.dataset.selected).toBe("0");
+    fireEvent.click(result.getByText("Week"));
+    fireEvent.click(result.getByText("Save"));
+    await vi.waitFor(() => expect(onSubmit).toHaveBeenCalledWith({ view: "week" }));
+  });
+
+  it("disables the control and never changes a disabled or read-only value", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <>
+        <ToggleGroup
+          options={views}
+          value="day"
+          onChange={onChange}
+          disabled
+          disabledReason="Locked"
+        />
+        <ToggleGroup options={views} value="day" onChange={onChange} readOnly />
+      </>,
+    );
+    const [disabledView, readOnlyView] = result.getAllByTestId("system-segmented");
+    expect(disabledView!.dataset.enabled).toBe("false");
+    expect(readOnlyView!.dataset.enabled).toBe("true");
+    for (const week of result.getAllByText("Week")) fireEvent.click(week);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("falls back to the MPO control when the binary lacks the module", () => {
+    system.installed = false;
+    const result = renderWithProviders(<ToggleGroup options={views} defaultValue="day" />);
+    expect(segmented(result)).toBeNull();
+    expect(result.getByText("Week")).toBeTruthy();
+  });
+
+  it("keeps the MPO control for multi-select, icons, a disabled segment, six segments and native={false}", () => {
+    const six = ["a", "b", "c", "d", "e", "f"].map((value) => ({ label: value, value }));
+    const result = renderWithProviders(
+      <>
+        <ToggleGroup type="multiple" options={views} defaultValue={["day"]} />
+        <ToggleGroup options={[{ ...views[0]!, icon: <span>i</span> }, views[1]!]} />
+        <ToggleGroup
+          options={[views[0]!, { ...views[1]!, disabled: true, disabledReason: "Locked" }]}
+        />
+        <ToggleGroup options={six} />
+        <ToggleGroup options={views} native={false} />
+      </>,
+    );
+    expect(segmented(result)).toBeNull();
+  });
+
+  it("keeps the MPO control on Android, web and GNOME", () => {
+    for (const os of ["android", null] as const) {
+      system.os = os;
+      const result = renderWithProviders(<ToggleGroup options={views} defaultValue="day" />);
+      expect(segmented(result)).toBeNull();
+      result.unmount();
+    }
+  });
+});

package/src/fields/ToggleGroup/index.tsx

@@ -33,6 +33,13 @@ import {
 } from "../../shared/colorRamps";
 import { warnBareDisabled } from "../../shared/devWarn";
 import { choiceItemA11y, composeA11yName } from "../../shared/nativeA11y";
+import { loadSystemSegmentedControl } from "../../shared/systemControlModules";
+import {
+  type SystemSegmentedControlComponent,
+  systemControlPlatform,
+  useSystemControlScheme,
+  useThemeLiteral,
+} from "../../shared/systemControls";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -100,6 +107,69 @@ function ToggleItemWithElevation({
   return <ToggleItemFrame {...props} {...groupedRadius} />;
 }
 
+/** HIG: a segmented control holds about five segments at most. */
+const SYSTEM_SEGMENT_LIMIT = 5;
+
+/**
+ * LC-266: UISegmentedControl, so iOS draws its own segmented control (iOS 26
+ * glass included) with the LC-131 selected paint: the soft accent tint behind
+ * the chosen segment and the accent ink on its label. It follows the app's
+ * scheme, not the OS's. It spans the row, as segmented controls in iOS forms do.
+ */
+function SystemSegmentedControl({
+  Component,
+  id,
+  options,
+  value,
+  controlled,
+  disabled,
+  readOnly,
+  accessibilityLabel,
+  accessibilityHint,
+  onSelect,
+}: {
+  Component: SystemSegmentedControlComponent;
+  id: string;
+  options: ToggleGroupOption[];
+  value: string | undefined;
+  controlled: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onSelect: (value: string) => void;
+}) {
+  const literal = useThemeLiteral();
+  const appearance = useSystemControlScheme();
+  const [uncontrolledValue, setUncontrolledValue] = useState(value);
+  const current = controlled ? value : uncontrolledValue;
+  return (
+    <View
+      alignSelf="stretch"
+      {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+      data-mp-system-control="segmented"
+    >
+      <Component
+        id={id}
+        values={options.map((option) => option.label)}
+        selectedIndex={options.findIndex((option) => option.value === current)}
+        enabled={!disabled}
+        appearance={appearance}
+        tintColor={literal("$selectedBackground")}
+        activeFontStyle={{ color: literal("$selectedColor") }}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        onChange={(event) => {
+          const next = options[event.nativeEvent.selectedSegmentIndex]?.value;
+          if (next === undefined || disabled || readOnly) return;
+          if (!controlled) setUncontrolledValue(next);
+          onSelect(next);
+        }}
+      />
+    </View>
+  );
+}
+
 export interface ToggleGroupOption {
   label: string;
   value: string;
@@ -177,6 +247,13 @@ export interface ToggleGroupProps {
   "aria-labelledby"?: string;
   /** Extra spoken context for the group (native `accessibilityHint`). */
   accessibilityHint?: string;
+  /**
+   * LC-266: on iOS a single-choice group of two to five text segments, none
+   * disabled, renders UISegmentedControl when the binary carries
+   * `@react-native-segmented-control/segmented-control`. `false` keeps the MPO
+   * control there. Android keeps the MPO control, which is Material 3's form.
+   */
+  native?: boolean;
 }
 
 export function ToggleGroup({
@@ -207,6 +284,7 @@ export function ToggleGroup({
   accessibilityHint,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  native = true,
 }: ToggleGroupProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
   // single emit site below (same reconciliation as Switch).
@@ -289,6 +367,18 @@ export function ToggleGroup({
     const index = uniqueItemReasons.indexOf(reason.trim());
     return index >= 0 ? `${id}-item-reason-${index}` : undefined;
   };
+  const SystemSegmented =
+    native &&
+    type === "single" &&
+    orientation === "horizontal" &&
+    !children &&
+    options &&
+    options.length >= 2 &&
+    options.length <= SYSTEM_SEGMENT_LIMIT &&
+    options.every((option) => !option.icon && !option.disabled) &&
+    systemControlPlatform() === "ios"
+      ? loadSystemSegmentedControl()
+      : null;
   const optionDisabledByValue = (val: string) =>
     Boolean(options?.find((o) => o.value === val)?.disabled);
 
@@ -527,6 +617,27 @@ export function ToggleGroup({
   ) => {
     const emptyValue = type === "multiple" ? [] : "";
 
+    if (SystemSegmented && options) {
+      return (
+        <SystemSegmentedControl
+          Component={SystemSegmented}
+          id={id}
+          options={options}
+          value={typeof resolvedValue === "string" ? resolvedValue : undefined}
+          controlled={isControlled}
+          disabled={disabled}
+          readOnly={readOnly}
+          accessibilityLabel={groupA11yName ?? (typeof label === "string" ? label : undefined)}
+          accessibilityHint={accessibilityHint}
+          onSelect={(val) => {
+            handleChange?.(val);
+            handleValueChange(val);
+            handleBlur?.();
+          }}
+        />
+      );
+    }
+
     const toggleProps: any = {
       // LC-71: the ring rides the focused segment, never the group. A
       // container ring is square over the rounded frame and paints on mouse

package/src/fields/nativeDateTime/OsDateTimeSheet.presentation.spec.tsx

@@ -0,0 +1,167 @@
+/**
+ * What the OS date/time sheet asks the native picker for. Every MPO date,
+ * time and datetime field on iOS and Android opens through this sheet, the
+ * Frappe `Date` field included (FZ-8000 retired its private copy).
+ *
+ * - iOS `date` opens the iOS 14+ calendar (`display="inline"`), not the legacy
+ *   wheel; `time` keeps the wheel.
+ * - iOS `datetime` runs calendar → wheel across the sheet's Next button and
+ *   commits one moment built from both halves.
+ * - The iOS sheet ends above the keyboard and the calendar shrinks to fit
+ *   (MPO-64).
+ * - 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`;
+ * the picker is recorded rather than rendered and the platform flags are mocked.
+ */
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mockState = vi.hoisted(() => ({
+  os: "ios" as "ios" | "android",
+  /** Props of every mounted picker, newest last. */
+  picks: [] as Record<string, unknown>[],
+  keyboardInset: 0,
+}));
+
+vi.mock("../../shared/useKeyboardInset", () => ({
+  useKeyboardInset: () => mockState.keyboardInset,
+}));
+
+// jsdom lays nothing out, so react-native-web reports a 0pt window and the
+// keyboard cap would floor the picker on both sides of the comparison.
+vi.mock("react-native-web", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-native")>()),
+  useWindowDimensions: () => ({ width: 390, height: 844, scale: 3, fontScale: 1 }),
+}));
+
+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.os === "ios";
+          if (prop === "isAndroid") return mockState.os === "android";
+          return real[prop as string];
+        },
+      },
+    ),
+  };
+});
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { OsDateTimeSheet, type OsDateTimeMode } from "./OsDateTimeSheet";
+
+const norm = (value: string) => value.replace(/\s+/gu, " ").trim();
+
+async function press(text: string) {
+  let target: Element | null = null;
+  await waitFor(() => {
+    const node = Array.from(document.body.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;
+  });
+  fireEvent.click(target!);
+}
+
+const lastPick = () => mockState.picks[mockState.picks.length - 1];
+
+function open(mode: OsDateTimeMode, value: Date, onConfirm = vi.fn()) {
+  renderWithProviders(
+    <OsDateTimeSheet open mode={mode} value={value} onCancel={vi.fn()} onConfirm={onConfirm} />,
+  );
+  return onConfirm;
+}
+
+beforeEach(() => {
+  cleanup();
+  mockState.picks.length = 0;
+  mockState.os = "ios";
+  mockState.keyboardInset = 0;
+});
+
+describe("OS date/time sheet — iOS presentation", () => {
+  it("a date opens the calendar, not the legacy wheel", () => {
+    open("date", new Date(2026, 2, 15));
+    expect(lastPick().mode).toBe("date");
+    expect(lastPick().display).toBe("inline");
+    expect(["light", "dark"]).toContain(lastPick().themeVariant);
+  });
+
+  it("shrinks the calendar when the keyboard is up so the sheet can sit above it", () => {
+    open("date", new Date(2026, 2, 15));
+    const resting = (lastPick().style as { height: number }).height;
+    expect(resting).toBe(360);
+    cleanup();
+    mockState.picks.length = 0;
+    mockState.keyboardInset = 420;
+    open("date", new Date(2026, 2, 15));
+    const raised = (lastPick().style as { height: number }).height;
+    expect(raised).toBeLessThan(resting);
+  });
+
+  it("a time keeps the wheel", () => {
+    open("time", new Date(2026, 2, 15, 9, 0));
+    expect(lastPick().mode).toBe("time");
+    expect(lastPick().display).toBe("spinner");
+  });
+
+  it("a datetime runs calendar then wheel, and commits both halves", async () => {
+    const onConfirm = open("datetime", new Date(2026, 2, 15, 14, 30));
+    expect(lastPick().mode).toBe("date");
+    expect(lastPick().display).toBe("inline");
+
+    await press("Next");
+    await waitFor(() => expect(lastPick().mode).toBe("time"));
+    expect(lastPick().display).toBe("spinner");
+
+    await press("Done");
+    expect(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onConfirm).toHaveBeenCalledWith(new Date(2026, 2, 15, 14, 30));
+  });
+});
+
+describe("OS date/time sheet — Android presentation", () => {
+  it("keeps the Material dialog and mounts inline, without the iOS sheet", () => {
+    mockState.os = "android";
+    open("date", new Date(2026, 2, 15));
+    expect(lastPick().mode).toBe("date");
+    expect(lastPick().display).toBe("default");
+    expect(document.body.textContent).not.toContain("Done");
+  });
+
+  it("a datetime advances from date to time after the first commit", async () => {
+    mockState.os = "android";
+    const onConfirm = open("datetime", new Date(2026, 2, 15, 14, 30));
+    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 waitFor(() => expect(lastPick().mode).toBe("time"));
+    expect(onConfirm).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(onConfirm).toHaveBeenCalledTimes(1);
+    expect(onConfirm).toHaveBeenCalledWith(new Date(2026, 2, 20, 9, 45, 0));
+  });
+});

package/src/fields/nativeDateTime/OsDateTimeSheet.tsx

@@ -10,14 +10,25 @@
  * does a missing `@react-native-community/datetimepicker` (an optional peer,
  * loaded through `loadDateTimePicker`).
  */
-import { useCallback, useState } from "react";
-import { Modal, Pressable, StyleSheet, useColorScheme, Platform } from "react-native";
+import { useCallback, useContext, useState } from "react";
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  useColorScheme,
+  useWindowDimensions,
+  View as RNView,
+} from "react-native";
+import { platform } from "@multiplatform.one/platform";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs, Text } from "@multiplatform.one/theme";
 import { View, XStack, YStack, useTheme, useThemeName } from "tamagui";
 import { formCommonColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import { type DateTimePickerEvent, loadDateTimePicker } from "./dateTimePickerLoader";
 import { osDateTimeIosDisplay } from "./osDateTimeIosDisplay";
+import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
+import { useKeyboardInset } from "../../shared/useKeyboardInset";
 
 export type OsDateTimeMode = "date" | "time" | "datetime";
 
@@ -52,7 +63,12 @@ export function OsDateTimeSheet({
   const themeVariant = useNativePickerScheme();
   const theme = useTheme();
   const accentColor = theme.accentColor?.val;
-  const isIOS = Platform.OS === "ios";
+  const isIOS = platform.isIos;
+  // MPO-64: the sheet ends ABOVE the keyboard and the picker shrinks to fit.
+  const keyboardInset = useKeyboardInset();
+  const { height: windowHeight } = useWindowDimensions();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
+  const maxHeight = dateSheetMaxHeight(windowHeight, keyboardInset, topInset);
   const [showTimePicker, setShowTimePicker] = useState(false);
   const [temp, setTemp] = useState(value);
   const pickerMode: "date" | "time" =
@@ -172,21 +188,25 @@ export function OsDateTimeSheet({
 
   return (
     <Modal transparent animationType="fade" visible={open} onRequestClose={onCancel}>
-      <Pressable style={styles.modalOverlay} onPress={onCancel}>
-        <View
-          pointerEvents="none"
-          position="absolute"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          backgroundColor="$shadow6"
-        />
+      {/*
+        A plain padded column, not KeyboardAvoidingView: inside a Modal the
+        latter pads the container while the sheet keeps its own height, so the
+        sheet overflows off the top instead of shrinking (MPO-64).
+      */}
+      <RNView style={[styles.modalOverlay, { paddingBottom: keyboardInset }]}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={onCancel}>
+          <View pointerEvents="none" flex={1} backgroundColor="$shadow6" />
+        </Pressable>
         <Pressable onPress={(e) => e.stopPropagation()}>
           <YStack
+            testID="os-date-time-sheet"
             {...knobProps.elevatedSurface}
             borderBottomLeftRadius={0}
             borderBottomRightRadius={0}
+            maxHeight={maxHeight}
+            flexShrink={1}
+            minHeight={0}
+            paddingBottom={dateSheetBottomPadding(keyboardInset, isIOS)}
           >
             <XStack justifyContent="space-between" {...knobProps.panelPadding}>
               <Pressable onPress={onCancel} accessibilityRole="button">
@@ -202,7 +222,7 @@ export function OsDateTimeSheet({
                 </Pressable>
               )}
             </XStack>
-            <YStack {...knobProps.panelPadding}>
+            <YStack {...knobProps.panelPadding} flexShrink={1} minHeight={0}>
               <DateTimePicker
                 value={temp}
                 mode={pickerMode}
@@ -212,12 +232,12 @@ export function OsDateTimeSheet({
                 onChange={handleIOSChange}
                 minimumDate={mode !== "time" ? minDate : undefined}
                 maximumDate={mode !== "time" ? maxDate : undefined}
-                style={pickerMode === "time" ? styles.wheel : styles.calendar}
+                style={{ width: "100%", height: datePickerHeight(pickerMode, maxHeight) }}
               />
             </YStack>
           </YStack>
         </Pressable>
-      </Pressable>
+      </RNView>
     </Modal>
   );
 }
@@ -227,6 +247,4 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-end",
   },
-  wheel: { height: 216 },
-  calendar: { height: 360 },
 });

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

@@ -0,0 +1,60 @@
+/**
+ * MPO-64 leftover: the OS date/time 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);
+  });
+});