@multiplatform.one/table 7.10.0 → 7.15.0

package/src/components/DataTableViewOptions/index.tsx

@@ -7,9 +7,9 @@ import {
 } from "@phosphor-icons/react";
 import { getGroupPosition, stackRadiusProps, useResolvedKnobs } from "@multiplatform.one/theme";
 import React, { useState } from "react";
-import { Button, Input, Slider, Switch } from "@multiplatform.one/forms";
+import { Button, FloatingPanel, Input, Slider, Switch } from "@multiplatform.one/forms";
 import { DropdownMenu } from "@multiplatform.one/components";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
+import { ScrollView, Separator, Text, View, XStack, YStack, useTheme } from "tamagui";
 import type { TableView } from "../../types";
 import { t } from "../../shared/t";
 import { iconSizeForToken } from "../../utils/chromeIcons";
@@ -415,47 +415,39 @@ function ViewManagementSection({
       </Text>
 
       {/* Save Current View */}
-      <Popover open={showSaveDialog} onOpenChange={setShowSaveDialog}>
-        <Popover.Trigger asChild>
+      <FloatingPanel
+        open={showSaveDialog}
+        onOpenChange={setShowSaveDialog}
+        trigger={
           <Button size={knobProps.sizeToken} icon={<FloppyDiskIcon size={iconPx} />}>
             {t("Save Current View")}
           </Button>
-        </Popover.Trigger>
-        <Popover.Content
-          {...knobProps.elevatedSurface}
-          enterStyle={{ x: 0, y: -10, opacity: 0 }}
-          exitStyle={{ x: 0, y: -10, opacity: 0 }}
-          transition={knobProps.transition}
-        >
-          <YStack {...knobProps.panelPadding} gap="$3" minWidth={250}>
-            <Text {...knobProps.label} fontWeight="400">
-              {t("Save View")}
-            </Text>
-            <Input
-              placeholder={t("Enter view name...")}
-              value={viewName}
-              onChangeText={setViewName}
-              inputProps={{
-                onKeyDown: (e: React.KeyboardEvent) => {
-                  if (e.key === "Enter" && viewName.trim()) handleSaveView();
-                },
-              }}
-            />
-            <XStack gap="$2" justifyContent="flex-end">
-              <Button size={knobProps.sizeToken} onPress={() => setShowSaveDialog(false)}>
-                {t("Cancel")}
-              </Button>
-              <Button
-                size={knobProps.sizeToken}
-                onPress={handleSaveView}
-                disabled={!viewName.trim()}
-              >
-                {t("Save")}
-              </Button>
-            </XStack>
-          </YStack>
-        </Popover.Content>
-      </Popover>
+        }
+      >
+        <YStack gap="$3" minWidth={250} data-dismiss-class="compose">
+          <Text {...knobProps.label} fontWeight="400">
+            {t("Save View")}
+          </Text>
+          <Input
+            placeholder={t("Enter view name...")}
+            value={viewName}
+            onChangeText={setViewName}
+            inputProps={{
+              onKeyDown: (e: React.KeyboardEvent) => {
+                if (e.key === "Enter" && viewName.trim()) handleSaveView();
+              },
+            }}
+          />
+          <XStack gap="$2" justifyContent="flex-end">
+            <Button size={knobProps.sizeToken} onPress={() => setShowSaveDialog(false)}>
+              {t("Cancel")}
+            </Button>
+            <Button size={knobProps.sizeToken} onPress={handleSaveView} disabled={!viewName.trim()}>
+              {t("Save")}
+            </Button>
+          </XStack>
+        </YStack>
+      </FloatingPanel>
 
       {/* Saved Views List */}
       {views.length > 0 && (

package/src/components/FilterOperatorValueEditor/FilterOperatorValueEditor.spec.tsx

@@ -7,6 +7,7 @@
 
 import { fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { type Knobs, Preset } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import type { DataTableColumnType, FilterOperator } from "../../types";
@@ -28,14 +29,16 @@ const selectTriggers = (container: HTMLElement) =>
 const textInputs = (container: HTMLElement) =>
   Array.from(container.querySelectorAll("input")) as HTMLInputElement[];
 
+/** The listbox portals out to the page (MPO-335, LC-90), so options are read from it. */
 async function openSelect(container: HTMLElement, trigger: HTMLElement) {
+  const page = container.ownerDocument.body;
   fireEvent.pointerDown(trigger);
   fireEvent.mouseDown(trigger);
   fireEvent.click(trigger);
   await waitFor(() => {
-    expect(container.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
+    expect(page.querySelectorAll('[role="option"]').length).toBeGreaterThan(0);
   });
-  return Array.from(container.querySelectorAll('[role="option"]')) as HTMLElement[];
+  return Array.from(page.querySelectorAll('[role="option"]')) as HTMLElement[];
 }
 
 /**
@@ -258,4 +261,63 @@ describe("FilterOperatorValueEditor", () => {
       await waitFor(() => expect(onValue).toHaveBeenLastCalledWith("in-progress"));
     });
   });
+  describe("knob laws (MPO-118)", () => {
+    const valueBox = (container: HTMLElement) =>
+      container.querySelector("[data-mp-input-field='true']") as HTMLElement;
+
+    const padX = (el: Element) =>
+      String((el as HTMLElement).className || "")
+        .split(" ")
+        .filter((c) => c.startsWith("_px-") || c.startsWith("_pl-") || c.startsWith("_pr-"))
+        .sort();
+
+    function renderAtKnobs(overrides: Partial<Knobs>) {
+      return renderWithProviders(
+        <Preset overrides={overrides}>
+          <FilterOperatorValueEditor
+            fieldType="text"
+            operator="contains"
+            value=""
+            onOperatorChange={vi.fn()}
+            onValueChange={vi.fn()}
+          />
+        </Preset>,
+      );
+    }
+
+    it("size small: Condition and Value both paint the small recipe", () => {
+      const { container } = renderAtKnobs({ size: "small" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-size")).toBe("$3");
+      expect(box.getAttribute("data-visual-height")).toBe("36");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("36");
+    });
+
+    it("size large: the Value input follows the knob instead of a pinned $3", () => {
+      const { container } = renderAtKnobs({ size: "large" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-size")).toBe("$5");
+      expect(box.getAttribute("data-visual-height")).toBe("52");
+      expect(selectTriggers(container)[0].getAttribute("data-visual-height")).toBe("52");
+    });
+
+    it("density comfortable: compact is not forced on the inner fields", () => {
+      const { container } = renderAtKnobs({ density: "comfortable" });
+      expect(valueBox(container).getAttribute("data-density")).toBe("comfortable");
+    });
+
+    it("density compact: the inner fields step with the density knob and keep their height", () => {
+      const comfortable = renderAtKnobs({ density: "comfortable", size: "medium" });
+      const comfortablePad = padX(selectTriggers(comfortable.container)[0]);
+      const comfortableHeight = valueBox(comfortable.container).getAttribute("data-visual-height");
+      comfortable.unmount();
+
+      const { container } = renderAtKnobs({ density: "compact", size: "medium" });
+      const box = valueBox(container);
+      expect(box.getAttribute("data-density")).toBe("compact");
+      expect(box.getAttribute("data-visual-height")).toBe(comfortableHeight);
+      expect(comfortablePad.length).toBeGreaterThan(0);
+      expect(padX(selectTriggers(container)[0])).not.toEqual(comfortablePad);
+    });
+  });
 });

package/src/components/FilterOperatorValueEditor/index.tsx

@@ -72,8 +72,6 @@ export function FilterOperatorValueEditor({
           }
         }}
         options={operatorOptions}
-        size="$3"
-        compact
       />
 
       {needsValueInput && (
@@ -89,8 +87,6 @@ export function FilterOperatorValueEditor({
               }}
               options={booleanOptions}
               placeholder={t("Select...")}
-              size="$3"
-              compact
             />
           ) : fieldType === "select" && options ? (
             <Select
@@ -103,8 +99,6 @@ export function FilterOperatorValueEditor({
               }}
               options={selectOptions}
               placeholder={t("Select...")}
-              size="$3"
-              compact
             />
           ) : (
             <Input
@@ -118,8 +112,6 @@ export function FilterOperatorValueEditor({
                     ? t("0.00")
                     : t("Enter value...")
               }
-              size="$3"
-              compact
               {...((fieldType === "number" || fieldType === "money") && {
                 keyboardType: "numeric",
               })}

package/src/components/SimpleTable/index.tsx

@@ -14,6 +14,7 @@ import {
   ensureFocusVisibleRing,
   useResolvedKnobs,
   type DisabledRecipe,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import { useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
@@ -331,7 +332,7 @@ function SimpleTableMobileCards({
   const tableZebraOn = knobProps.tableZebra === "on";
   const [titleCol, ...detailCols] = columns;
   const typeSize = knobProps.label.fontSize;
-  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
+  const motion = transitionProps(knobProps.transition);
 
   if (data.length === 0) {
     return (
@@ -478,7 +479,7 @@ export function SimpleTableDesktop({
   const tableZebraOn = knobProps.tableZebra === "on";
   const ariaLabel = caption ? undefined : props["aria-label"];
   const typeSize = knobProps.label.fontSize;
-  const motion = knobProps.transition ? { transition: knobProps.transition } : {};
+  const motion = transitionProps(knobProps.transition);
   const pad = cellPad(knobProps.gap.gap);
   const frameBorder = knobProps.surface.borderWidth;
 

package/src/components/SimpleTable/simpleTable.spec.tsx

@@ -417,4 +417,19 @@ describe("SimpleTable", () => {
     fireEvent.click(container.querySelector("tbody tr, [role='row']") as Element);
     expect(onRowPress).not.toHaveBeenCalled();
   });
+  it("survives the animation knob flipping live from none to bouncy (MPO-327)", () => {
+    const columns: SimpleTableColumn[] = [{ accessorKey: "name", header: "Name" }];
+    const data = [{ name: "Alice" }, { name: "Bob" }];
+    const Flip = ({ animation }: { animation: "none" | "bouncy" }) => (
+      <Preset overrides={{ animation }}>
+        <SimpleTableDesktop data={data} columns={columns} onRowPress={() => {}} />
+      </Preset>
+    );
+    const { container, rerender } = renderWithProviders(<Flip animation="none" />);
+    expect(container.querySelector("table")?.getAttribute("data-animation")).toBe("none");
+
+    expect(() => rerender(<Flip animation="bouncy" />)).not.toThrow();
+    expect(container.querySelector("table")?.getAttribute("data-animation")).toBe("on");
+    expect(container.textContent).toContain("Bob");
+  });
 });

package/src/components/Table/accessibility.spec.tsx

@@ -8,6 +8,7 @@
  */
 
 import { renderWithProviders, fireEvent } from "@multiplatform.one/test-utils";
+import { waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { Table } from "@multiplatform.one/table-primitives";
 import { useTableKeyboard } from "../../hooks/useTableKeyboard";
@@ -111,14 +112,7 @@ describe("Table Accessibility", () => {
     expect(true).toBe(true);
   });
 
-  it("Escape key behavior: Tamagui Popover handles Escape natively", () => {
-    // Tamagui's Popover component handles Escape key natively to close.
-    // We verify the popover can be opened (controlled state) and that
-    // the Escape key handler exists in the DOM event chain.
-    //
-    // Note: In happy-dom test environment, Tamagui popover portals may
-    // not fully render, so we test the controlled open/close pattern.
-
+  it("Escape closes the column filter panel", async () => {
     const onFilterChange = vi.fn();
 
     const { container } = renderWithProviders(
@@ -130,22 +124,16 @@ describe("Table Accessibility", () => {
       />,
     );
 
-    // The filter trigger should be present and clickable
     const trigger = container.querySelector('[aria-label="Filter column Status"]');
     expect(trigger).not.toBeNull();
 
-    // Click to open the popover
     fireEvent.click(trigger!);
+    const panel = () => document.querySelector('[data-testid="floating-panel-viewport"]');
+    await waitFor(() => expect(panel()).not.toBeNull());
 
-    // The popover content should now be controlled by internal state.
-    // In happy-dom, the Popover.Content may or may not portal into the DOM.
-    // The key verification is that the component structure supports Escape:
-    // ColumnHeaderFilter uses Tamagui Popover with controlled open/onOpenChange,
-    // which natively handles Escape key to call onOpenChange(false).
-    //
-    // We verify the pattern is correct by checking the trigger exists
-    // and the component renders without error after click interaction.
-    expect(trigger).not.toBeNull();
+    fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" });
+    await waitFor(() => expect(panel()).toBeNull());
+    expect(onFilterChange).not.toHaveBeenCalled();
   });
 
   it("semantic HTML and ARIA roles on table primitives", () => {

package/src/components/TableInput/RowDetailEditor.native.tsx

@@ -0,0 +1,134 @@
+/**
+ * RowDetailEditor (native) — the row form as a FloatingPanel bottom sheet,
+ * the same dialog/sheet split CellModalEditor.native makes. Props, staging
+ * and footer match ./RowDetailEditor.tsx; backdrop tap and Android back
+ * commit like "Done".
+ */
+
+import { Button, FloatingPanel } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PencilSimpleIcon } from "@phosphor-icons/react";
+import { useCallback, useRef, useState } from "react";
+import { Text, View, XStack, YStack } from "tamagui";
+import type { DataTableData, DataTableField, DataTableFieldProps } from "../../types";
+import { t } from "../../shared/t";
+import { withInterp } from "../../utils/withInterp";
+import { DataTableCell } from "../DataTableCell";
+import type { RowDetailEditorProps } from "./RowDetailEditor";
+import { changedColumns, columnKey } from "./shared";
+
+export type { RowDetailEditorProps } from "./RowDetailEditor";
+
+export function RowDetailEditor<TData extends DataTableData>({
+  row,
+  rowIndex,
+  columns,
+  readOnly,
+  compact,
+  isCellHidden,
+  onCommit,
+}: RowDetailEditorProps<TData>) {
+  const { knobProps } = useResolvedKnobs({ compact });
+  const [draft, setDraft] = useState<TData | null>(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const rowRef = useRef(row);
+  rowRef.current = row;
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  const discardRef = useRef(false);
+  const rowNumber = rowIndex + 1;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        discardRef.current = false;
+        const seeded = { ...rowRef.current };
+        draftRef.current = seeded;
+        setDraft(seeded);
+        return;
+      }
+      const active = draftRef.current;
+      if (!discardRef.current && !readOnly && active) {
+        const changed = changedColumns(rowRef.current, active, columns);
+        if (changed.length > 0) onCommitRef.current(active, changed);
+      }
+      discardRef.current = false;
+      draftRef.current = null;
+      setDraft(null);
+    },
+    [columns, readOnly],
+  );
+
+  const handleCancel = useCallback(() => {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  const setDraftValue = useCallback((columnId: string, value: unknown) => {
+    const current = draftRef.current;
+    if (!current) return;
+    const next = { ...current, [columnId]: value } as TData;
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+
+  const triggerLabel = withInterp(
+    t(readOnly ? "View row {{row}}" : "Edit row {{row}}", { row: rowNumber }),
+    { row: rowNumber },
+  );
+  const current = draft ?? row;
+
+  return (
+    <FloatingPanel
+      open={draft !== null}
+      onOpenChange={handleOpenChange}
+      scrollable
+      triggerSizing="content"
+      triggerA11y={{ label: triggerLabel }}
+      trigger={
+        <View alignItems="center" justifyContent="center">
+          <PencilSimpleIcon size={16} />
+        </View>
+      }
+    >
+      <YStack {...knobProps.gapLg}>
+        <Text {...knobProps.heading}>
+          {withInterp(t("Row {{row}}", { row: rowNumber }), { row: rowNumber })}
+        </Text>
+        {columns.map((col) => {
+          const columnId = columnKey(col);
+          if (isCellHidden?.(current, columnId, rowIndex)) return null;
+          const label = typeof col.header === "string" ? col.header : columnId;
+          return (
+            <YStack key={columnId} {...knobProps.gap}>
+              <Text {...knobProps.label}>{label}</Text>
+              <DataTableCell
+                value={current[columnId as keyof TData]}
+                onChange={(value) => setDraftValue(columnId, value)}
+                field={(col.field || "input") as DataTableField}
+                fieldProps={col.fieldProps as DataTableFieldProps | undefined}
+                readOnly={readOnly}
+                compact={false}
+                columnId={columnId}
+                columnLabel={label}
+                rowIndex={rowIndex}
+                rowData={current}
+              />
+            </YStack>
+          );
+        })}
+        <XStack {...knobProps.gap} justifyContent="flex-end">
+          {readOnly ? (
+            <Button onPress={handleCancel}>{t("Close")}</Button>
+          ) : (
+            <>
+              <Button onPress={handleCancel}>{t("Cancel")}</Button>
+              <Button onPress={() => handleOpenChange(false)}>{t("Done")}</Button>
+            </>
+          )}
+        </XStack>
+      </YStack>
+    </FloatingPanel>
+  );
+}

package/src/components/TableInput/RowDetailEditor.tsx

@@ -0,0 +1,173 @@
+/**
+ * RowDetailEditor — the child-table row opened as a form (Frappe's grid
+ * row "Edit" form). The grid shows the list-view columns; the detail editor
+ * shows every `columns` entry for one row, full-size, in a dialog.
+ *
+ * Same staging contract as CellModalEditor (UX-023): the fields edit a draft
+ * copy of the row seeded on open. "Done" and an outside click commit the
+ * draft once; "Cancel" and Escape discard it. A read-only row opens for
+ * viewing with a single "Close".
+ */
+
+import { DialogContent, DialogOverlay } from "@multiplatform.one/components";
+import { Button } from "@multiplatform.one/forms";
+import { TableCellContext } from "@multiplatform.one/table-primitives";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { PencilSimpleIcon } from "@phosphor-icons/react";
+import { useCallback, useRef, useState } from "react";
+import { Dialog, ScrollView, Text, XStack, YStack } from "tamagui";
+import type {
+  DataTableColumn,
+  DataTableData,
+  DataTableField,
+  DataTableFieldProps,
+} from "../../types";
+import { t } from "../../shared/t";
+import { withInterp } from "../../utils/withInterp";
+import { DataTableCell } from "../DataTableCell";
+import { changedColumns, columnKey, type ChildCellHidden } from "./shared";
+
+export interface RowDetailEditorProps<TData extends DataTableData> {
+  row: TData;
+  rowIndex: number;
+  columns: DataTableColumn<TData>[];
+  readOnly: boolean;
+  compact: boolean;
+  isCellHidden?: ChildCellHidden<TData>;
+  /** Receives the edited row once per session, only when a value changed. */
+  onCommit: (row: TData, changed: string[]) => void;
+}
+
+export function RowDetailEditor<TData extends DataTableData>({
+  row,
+  rowIndex,
+  columns,
+  readOnly,
+  compact,
+  isCellHidden,
+  onCommit,
+}: RowDetailEditorProps<TData>) {
+  const { knobProps } = useResolvedKnobs({ compact });
+  const [draft, setDraft] = useState<TData | null>(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const rowRef = useRef(row);
+  rowRef.current = row;
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  const discardRef = useRef(false);
+  const rowNumber = rowIndex + 1;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        discardRef.current = false;
+        const seeded = { ...rowRef.current };
+        draftRef.current = seeded;
+        setDraft(seeded);
+        return;
+      }
+      const active = draftRef.current;
+      if (!discardRef.current && !readOnly && active) {
+        const changed = changedColumns(rowRef.current, active, columns);
+        if (changed.length > 0) onCommitRef.current(active, changed);
+      }
+      discardRef.current = false;
+      draftRef.current = null;
+      setDraft(null);
+    },
+    [columns, readOnly],
+  );
+
+  const handleCancel = useCallback(() => {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  const setDraftValue = useCallback((columnId: string, value: unknown) => {
+    const current = draftRef.current;
+    if (!current) return;
+    const next = { ...current, [columnId]: value } as TData;
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+
+  const triggerLabel = withInterp(
+    t(readOnly ? "View row {{row}}" : "Edit row {{row}}", { row: rowNumber }),
+    { row: rowNumber },
+  );
+  const current = draft ?? row;
+
+  return (
+    <>
+      <Button
+        chromeless
+        compact={compact}
+        onPress={() => handleOpenChange(true)}
+        hitSlop={knobProps.nestedControl.hitSlop}
+        aria-label={triggerLabel}
+        aria-haspopup="dialog"
+        aria-expanded={draft !== null}
+      >
+        <PencilSimpleIcon size={16} />
+      </Button>
+      <Dialog open={draft !== null} onOpenChange={handleOpenChange} modal>
+        <Dialog.Portal>
+          <DialogOverlay opacity={0.5} />
+          <DialogContent
+            maxWidth={720}
+            maxHeight="80vh"
+            width="90vw"
+            onEscapeKeyDown={() => {
+              discardRef.current = true;
+            }}
+          >
+            <Dialog.Title {...knobProps.heading}>
+              {withInterp(t("Row {{row}}", { row: rowNumber }), { row: rowNumber })}
+            </Dialog.Title>
+            <ScrollView flexShrink={1} minHeight={0}>
+              <TableCellContext.Provider value={{ inTableCell: false }}>
+                <YStack {...knobProps.gapLg}>
+                  {columns.map((col) => {
+                    const columnId = columnKey(col);
+                    if (isCellHidden?.(current, columnId, rowIndex)) return null;
+                    const label = typeof col.header === "string" ? col.header : columnId;
+                    return (
+                      <YStack key={columnId} {...knobProps.gap}>
+                        <Text {...knobProps.label}>{label}</Text>
+                        <DataTableCell
+                          value={current[columnId as keyof TData]}
+                          onChange={(value) => setDraftValue(columnId, value)}
+                          field={(col.field || "input") as DataTableField}
+                          fieldProps={col.fieldProps as DataTableFieldProps | undefined}
+                          readOnly={readOnly}
+                          compact={false}
+                          columnId={columnId}
+                          columnLabel={label}
+                          rowIndex={rowIndex}
+                          rowData={current}
+                        />
+                      </YStack>
+                    );
+                  })}
+                </YStack>
+              </TableCellContext.Provider>
+            </ScrollView>
+            <XStack {...knobProps.gap} justifyContent="flex-end">
+              {readOnly ? (
+                <Button onPress={handleCancel}>{t("Close")}</Button>
+              ) : (
+                <>
+                  <Button onPress={handleCancel}>{t("Cancel")}</Button>
+                  <Button theme="accent" onPress={() => handleOpenChange(false)}>
+                    {t("Done")}
+                  </Button>
+                </>
+              )}
+            </XStack>
+          </DialogContent>
+        </Dialog.Portal>
+      </Dialog>
+    </>
+  );
+}