@multiplatform.one/frappe-ui 7.4.1 → 7.6.0

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%",
-  },
-});

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

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

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

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

package/src/fields/Date/sheetKeyboard.ts

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

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

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

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

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