@multiplatform.one/frappe-ui 7.4.0 → 7.5.0

package/src/fieldRegistry.ts

@@ -9,7 +9,7 @@
 import React, { useMemo } from "react";
 import type { ComponentType } from "react";
 import { useDocTypeMeta } from "@multiplatform.one/frappe";
-import { CheckboxGroup, Combobox, ImageField } from "@multiplatform.one/forms";
+import { CheckboxGroup, Combobox, ImageField, Skeleton } from "@multiplatform.one/forms";
 
 import { Barcode } from "./fields/Barcode";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -165,6 +165,10 @@ function disabledInputBlock(props: FieldRenderProps) {
   return props.disabled ? { inputProps: { readOnly: true, tabIndex: -1 } } : undefined;
 }
 
+function disabledTextAreaBlock(props: FieldRenderProps) {
+  return props.disabled ? { textAreaProps: { readOnly: true, tabIndex: -1 } } : undefined;
+}
+
 function DataAdapter(props: FieldRenderProps) {
   return React.createElement(Data, {
     label: props.label,
@@ -400,7 +404,7 @@ function SmallTextAdapter(props: FieldRenderProps) {
     required: props.required,
     error: props.error,
     ...passthroughProps(props),
-    ...disabledInputBlock(props),
+    ...disabledTextAreaBlock(props),
   });
 }
 
@@ -413,14 +417,20 @@ function LongTextAdapter(props: FieldRenderProps) {
     required: props.required,
     error: props.error,
     ...passthroughProps(props),
-    ...disabledInputBlock(props),
+    ...disabledTextAreaBlock(props),
   });
 }
 
 function TextEditorAdapter(props: FieldRenderProps) {
   return React.createElement(
     React.Suspense,
-    { fallback: React.createElement("div", null, "Loading editor...") },
+    {
+      fallback: React.createElement(Skeleton, {
+        width: "100%",
+        height: 160,
+        "aria-label": "Loading editor",
+      }),
+    },
     React.createElement(LazyTextEditor, {
       label: props.label,
       value: props.value ?? "",

package/src/fields/Barcode/Barcode.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 { Barcode, type BarcodeProps } from ".";
 
 export default {
@@ -73,3 +76,32 @@ ContractProbe.args = {
   value: "5901234123457",
   enableScan: false,
 } as Partial<StoryProps>;
+
+type BarcodeRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<BarcodeRow[]>([
+      { id: "1", label: "Alpha", value: "5901234123457" },
+      { id: "2", label: "Beta", value: "0123456789012" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<BarcodeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "SKU", ...fieldtypeToTableField("Barcode") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Check/Check.spec.tsx

@@ -0,0 +1,27 @@
+// Design-law: Check is a thin Checkbox adapter. Never circular at any radius.
+import { Preset } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Check } from "./index";
+
+afterEach(cleanup);
+
+describe("Check design-law — compose forms Checkbox", () => {
+  it("renders the house checkbox glyph box", () => {
+    const result = renderWithProviders(<Check label="Accept" />);
+    expect(result.container.querySelector("[data-checkbox-box='true']")).toBeTruthy();
+  });
+
+  it("stays non-circular at radius=full (checkbox override)", () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Check label="Accept" value />
+      </Preset>,
+    );
+    const box = result.container.querySelector("[data-checkbox-box='true']") as HTMLElement | null;
+    expect(box).toBeTruthy();
+    const radius = box?.style.borderRadius || getComputedStyle(box as Element).borderRadius;
+    expect(radius).not.toMatch(/50%|9999|999px/);
+  });
+});

package/src/fields/Check/Check.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 { Check, type CheckProps } from ".";
 
 export default {
@@ -58,3 +61,58 @@ AllStates.parameters = {
     },
   },
 };
+
+interface CheckCellRow {
+  id: string;
+  label: string;
+  value: boolean;
+}
+
+const checkCellRows: CheckCellRow[] = [
+  { id: "1", label: "Alpha", value: true },
+  { id: "2", label: "Beta", value: false },
+  { id: "3", label: "Gamma", value: false },
+];
+
+const checkCellColumns: DataTableColumn<CheckCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Check",
+    ...fieldtypeToTableField("Check"),
+  } as DataTableColumn<CheckCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(checkCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={checkCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as CheckCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Check cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Check") — in-cell checkbox. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Check inside a table cell: the registry maps the fieldtype to an in-cell checkbox. Three rows of mock DocType data; toggles commit through onDataChange.",
+    },
+  },
+};

package/src/fields/Check/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Frappe Check field — thin adapter over forms Checkbox.
+ *
+ * Design-law lives on this file: compose Checkbox, do not fork its chrome.
+ * Radius stays NEVER circular (Checkbox clamp / per-component override).
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { Checkbox as FormsCheckbox } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
@@ -75,7 +81,7 @@ export function Check<
       id={fieldProps.id}
       size={fieldProps.size}
       checked={value}
-      onCheckedChange={(checked) => onChange?.(checked === true)}
+      onChange={(checked) => onChange?.(checked === true)}
       onBlur={onBlur}
       disabled={disabled}
       checkboxProps={checkboxProps as any}

package/src/fields/CodeEditor/CodeEditor.stories.tsx

@@ -1,8 +1,11 @@
 import { Form, type AnyFormApi } from "@multiplatform.one/forms";
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Theme, YStack } from "tamagui";
+import { fieldtypeToTableField } from "../../fieldRegistry";
+import { FrappeStoryProvider } from "../../frappeStoryTarget";
 import { CodeEditorField, frappeCodeLanguage, type CodeEditorFieldProps } from ".";
 
 const PYTHON_FIXTURE = `import frappe
@@ -141,3 +144,32 @@ DarkScheme.args = {
   value: PYTHON_FIXTURE,
   language: "python",
 } as Partial<StoryProps>;
+
+type CodeRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<CodeRow[]>([
+      { id: "1", label: "Alpha", value: PYTHON_FIXTURE },
+      { id: "2", label: "Beta", value: JSON_FIXTURE },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<CodeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Script", ...fieldtypeToTableField("Code") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={320}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Color/Color.spec.tsx

@@ -0,0 +1,21 @@
+// Design-law: Color is a thin ColorPicker adapter. Do not fork picker chrome.
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Color } from "./index";
+
+afterEach(cleanup);
+
+describe("Color design-law — compose forms ColorPicker", () => {
+  it("renders the house color field (hex input, no forked chrome)", () => {
+    const result = renderWithProviders(<Color label="Brand" value="#10B981" onChange={vi.fn()} />);
+    const input = result.container.querySelector("input") as HTMLInputElement | null;
+    expect(input).toBeTruthy();
+    expect(screen.getByText("Brand")).toBeTruthy();
+  });
+
+  it("forwards skeleton and hides the input", () => {
+    const result = renderWithProviders(<Color label="Brand" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+  });
+});

package/src/fields/Color/Color.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 { Color, type ColorProps } from ".";
 
 export default {
@@ -68,3 +71,33 @@ AllStates.parameters = {
     },
   },
 };
+
+interface ColorRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+export const InTable = () => {
+  const [data, setData] = useState<ColorRow[]>([
+    { id: "1", label: "Alpha", value: "#10B981" },
+    { id: "2", label: "Beta", value: "#F59E0B" },
+    { id: "3", label: "Gamma", value: "" },
+  ]);
+  const columns: DataTableColumn<ColorRow>[] = [
+    { accessorKey: "label", header: "Row" },
+    {
+      accessorKey: "value",
+      header: "Color",
+      ...fieldtypeToTableField("Color"),
+    },
+  ];
+  return (
+    <FrappeStoryProvider>
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    </FrappeStoryProvider>
+  );
+};
+InTable.storyName = "In table";

package/src/fields/Color/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Frappe Color field — thin adapter over forms ColorPicker.
+ *
+ * Design-law lives on this file: compose ColorPicker, do not fork its chrome.
+ * Canonical change is `onChange` (LC-14); a chosen hex is value data.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { ColorPicker as FormsColorPicker } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";
@@ -68,7 +74,7 @@ export function Color<
       form={form}
       validators={validators}
       value={value as string | undefined}
-      onValueChange={onChange as ((v: string) => void) | undefined}
+      onChange={onChange as ((v: string) => void) | undefined}
       defaultValue={defaultValue as string}
       label={fieldProps.label}
       labelProps={fieldProps.labelProps}

package/src/fields/Data/Data.spec.tsx

@@ -0,0 +1,26 @@
+// Design-law: Data is a thin Input adapter. Do not fork Input chrome.
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Data } from "./index";
+
+afterEach(cleanup);
+
+describe("Data design-law — compose forms Input", () => {
+  it("renders the house Input box (data-ring-target=box)", () => {
+    const result = renderWithProviders(<Data label="Name" />);
+    expect(result.container.querySelector("input")).toBeTruthy();
+    expect(result.container.querySelector("[data-ring-target='box']")).toBeTruthy();
+  });
+
+  it("forwards skeleton and hides the input", () => {
+    const result = renderWithProviders(<Data label="Name" skeleton />);
+    expect(result.container.querySelector("input")).toBeNull();
+  });
+
+  it("forwards readOnly onto the input", () => {
+    const result = renderWithProviders(<Data label="Name" readOnly value="locked" />);
+    const input = result.container.querySelector("input") as HTMLInputElement | null;
+    expect(input?.readOnly || input?.getAttribute("aria-readonly")).toBeTruthy();
+  });
+});

package/src/fields/Data/Data.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 { Data, type DataProps } from ".";
 
 export default {
@@ -73,3 +76,58 @@ AllStates.parameters = {
     },
   },
 };
+
+interface DataCellRow {
+  id: string;
+  label: string;
+  value: string;
+}
+
+const dataCellRows: DataCellRow[] = [
+  { id: "1", label: "Alpha", value: "SKU-100" },
+  { id: "2", label: "Beta", value: "Ada Lovelace" },
+  { id: "3", label: "Gamma", value: "" },
+];
+
+const dataCellColumns: DataTableColumn<DataCellRow>[] = [
+  { accessorKey: "label", header: "Row" },
+  {
+    accessorKey: "value",
+    header: "Data",
+    ...fieldtypeToTableField("Data"),
+  } as DataTableColumn<DataCellRow>,
+];
+
+function InTableStory() {
+  const [data, setData] = useState(dataCellRows);
+  return (
+    <YStack width="100%" height={280}>
+      <DataTable
+        data={data}
+        columns={dataCellColumns as DataTableColumn<Record<string, any>>[]}
+        enablePagination={false}
+        onDataChange={(next: Record<string, any>[]) => {
+          setData(next as DataCellRow[]);
+          action("onDataChange")(next);
+        }}
+        aria-label="Data cell editor table"
+      />
+    </YStack>
+  );
+}
+
+/** 3-row DataTable mapped through fieldtypeToTableField("Data") — chromeless in-cell input. */
+export const InTable = () => (
+  <FrappeStoryProvider>
+    <InTableStory />
+  </FrappeStoryProvider>
+);
+InTable.storyName = "In table";
+InTable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Data inside a table cell: the registry maps the Data fieldtype to an in-cell input. Three rows of mock DocType data; edits commit through onDataChange.",
+    },
+  },
+};

package/src/fields/Data/index.tsx

@@ -1,3 +1,9 @@
+/**
+ * Frappe Data field — thin adapter over forms Input.
+ *
+ * Design-law lives on this file: compose Input, do not fork its chrome.
+ * D/R/E/Q/S/C and the DEFAULT-class field box all inherit.
+ */
 import type { FormFieldProps, FieldComponentProps } from "@multiplatform.one/forms";
 import { Input as FormsInput } from "@multiplatform.one/forms";
 import type { DeepKeys } from "@tanstack/form-core";

package/src/fields/Date/Date.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 { Date, type DateProps } from ".";
 
 export default {
@@ -152,3 +155,32 @@ EventSchedulingExample.parameters = {
     },
   },
 };
+
+type DateRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<DateRow[]>([
+      { id: "1", label: "Alpha", value: "2026-02-14" },
+      { id: "2", label: "Beta", value: "2026-06-15" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<DateRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Date", ...fieldtypeToTableField("Date") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

package/src/fields/Date/Datetime.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 { Date as DateField, type DateProps } from ".";
 
 export default {
@@ -79,3 +82,32 @@ ContractProbe.args = {
   type: "datetime",
   value: "2026-01-24T14:30",
 } as Partial<StoryProps>;
+
+type DatetimeRow = { id: string; label: string; value: string };
+
+export const InTable = {
+  name: "In table",
+  render: function InTableRender() {
+    const [data, setData] = useState<DatetimeRow[]>([
+      { id: "1", label: "Alpha", value: "2026-01-24T14:30" },
+      { id: "2", label: "Beta", value: "2026-03-01T09:00" },
+      { id: "3", label: "Gamma", value: "" },
+    ]);
+    const columns: DataTableColumn<DatetimeRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      { accessorKey: "value", header: "Datetime", ...fieldtypeToTableField("Datetime") },
+    ];
+    return (
+      <FrappeStoryProvider>
+        <YStack width="100%" height={280}>
+          <DataTable
+            data={data}
+            columns={columns}
+            enablePagination={false}
+            onDataChange={setData}
+          />
+        </YStack>
+      </FrappeStoryProvider>
+    );
+  },
+};

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

@@ -4,6 +4,7 @@ import {
   formatTimeOfDay,
 } from "@multiplatform.one/theme";
 import {
+  Button,
   Field,
   FieldLayout,
   Skeleton,
@@ -14,13 +15,28 @@ import {
   useResolvedValidators,
 } from "@multiplatform.one/forms";
 import { useState } from "react";
-import { Modal, Pressable, StyleSheet, useColorScheme } from "react-native";
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  useColorScheme,
+  useWindowDimensions,
+  View as RNView,
+} from "react-native";
 import { platform } from "@multiplatform.one/platform";
 import DateTimePicker, { type DateTimePickerEvent } from "@react-native-community/datetimepicker";
-import { Button, Text, View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
+import { Text, View, XStack, YStack, useProps, useTheme, useThemeName } from "tamagui";
+import { useKeyboardInset } from "../../shared/useKeyboardInset";
+import { datePickerHeight, dateSheetBottomPadding, dateSheetMaxHeight } from "./sheetKeyboard";
 import type { DateProps } from "./types";
 import { fromFrappeDateValue, toFrappeDateValue } from "./wire";
 
+/**
+ * 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";
 
 type FieldType = "date" | "datetime" | "time";
@@ -124,6 +140,10 @@ function DateField<
   const themeVariant = useNativePickerScheme();
   const theme = useTheme();
   const accentColor = theme.accentBackground?.val;
+  // MPO-64 leftover: the sheet must end ABOVE the keyboard, not run under it.
+  const keyboardInset = useKeyboardInset();
+  const { height: windowHeight } = useWindowDimensions();
+  const maxHeight = dateSheetMaxHeight(windowHeight, keyboardInset);
 
   const [showPicker, setShowPicker] = useState(false);
   const [showTimePicker, setShowTimePicker] = useState(false);
@@ -131,6 +151,7 @@ function DateField<
 
   const fieldType = type as FieldType;
   const isIOS = platform.isIos;
+  const sheetBottomPadding = dateSheetBottomPadding(keyboardInset, isIOS);
   const pickerMode: "date" | "time" =
     fieldType === "time" || (fieldType === "datetime" && showTimePicker) ? "time" : "date";
   // iOS 14 made the calendar the date presentation and left the wheel to time;
@@ -266,17 +287,18 @@ function DateField<
 
         {/* iOS: the picker has no chrome of its own, so it rides a sheet. */}
         {showPicker && isIOS && (
-          <Modal transparent animationType="slide" visible={showPicker} onRequestClose={cancel}>
-            <Pressable style={styles.modalOverlay} onPress={cancel}>
-              <View
-                pointerEvents="none"
-                position="absolute"
-                top={0}
-                right={0}
-                bottom={0}
-                left={0}
-                backgroundColor="$shadow6"
-              />
+          <Modal transparent animationType="fade" visible={showPicker} onRequestClose={cancel}>
+            {/*
+              A plain padded column, not KeyboardAvoidingView: inside a Modal
+              the latter pads the container while the sheet keeps its own
+              fixed height, so the sheet overflows off the TOP instead of
+              shrinking (MPO-64). Fade keeps the scrim planted (MPO-62);
+              only the panel sits at the bottom, capped above the keyboard.
+            */}
+            <RNView style={{ flex: 1, justifyContent: "flex-end", paddingBottom: keyboardInset }}>
+              <Pressable style={StyleSheet.absoluteFill} onPress={cancel}>
+                <View pointerEvents="none" flex={1} backgroundColor="$shadow6" />
+              </Pressable>
               <Pressable onPress={(e) => e.stopPropagation()}>
                 <YStack
                   {...knobProps.elevatedSurface}
@@ -284,6 +306,10 @@ function DateField<
                   // surface fragment's radius, the visible pair keeps it.
                   borderBottomLeftRadius={0}
                   borderBottomRightRadius={0}
+                  maxHeight={maxHeight}
+                  flexShrink={1}
+                  minHeight={0}
+                  paddingBottom={sheetBottomPadding}
                 >
                   <XStack justifyContent="space-between" {...knobProps.panelPadding}>
                     <Button size="$3" chromeless onPress={cancel}>
@@ -303,7 +329,7 @@ function DateField<
                     )}
                   </XStack>
 
-                  <YStack {...knobProps.panelPadding}>
+                  <YStack {...knobProps.panelPadding} flexShrink={1} minHeight={0}>
                     <DateTimePicker
                       value={tempDate || seed}
                       mode={pickerMode}
@@ -313,12 +339,15 @@ function DateField<
                       onChange={handleIOSChange}
                       minimumDate={fieldType !== "time" ? minDate : undefined}
                       maximumDate={fieldType !== "time" ? maxDate : undefined}
-                      style={pickerMode === "time" ? styles.wheel : styles.calendar}
+                      style={{
+                        width: "100%",
+                        height: datePickerHeight(pickerMode, maxHeight),
+                      }}
                     />
                   </YStack>
                 </YStack>
               </Pressable>
-            </Pressable>
+            </RNView>
           </Modal>
         )}
       </YStack>
@@ -391,20 +420,3 @@ function DateField<
 }
 
 export { DateField as Date };
-
-const styles = StyleSheet.create({
-  modalOverlay: {
-    flex: 1,
-    justifyContent: "flex-end",
-  },
-  // The OS picker sizes itself from its presentation: the inline calendar
-  // needs a grid's worth of height, the wheel needs a wheel's.
-  calendar: {
-    height: 360,
-    width: "100%",
-  },
-  wheel: {
-    height: 200,
-    width: "100%",
-  },
-});