@multiplatform.one/table 7.11.0 → 7.16.0

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>
+    </>
+  );
+}

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

@@ -32,7 +32,8 @@ import type {
 } from "../../types";
 import { DataTableCell } from "../DataTableCell";
 import { withInterp } from "../../utils/withInterp";
-import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT } from "./shared";
+import { RowDetailEditor } from "./RowDetailEditor";
+import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT, type ChildCellHidden } from "./shared";
 
 export interface TableInputProps<TData extends DataTableData = DataTableData> {
   /** Data array for the table (ignored in favor of form state in the form branch) */
@@ -80,6 +81,12 @@ export interface TableInputProps<TData extends DataTableData = DataTableData> {
   compact?: boolean;
   /** Leading grab handle + keyboard reorder via kanbanDnd (web implements). */
   enableReorder?: boolean;
+  /** Per-row button that opens the row in a detail editor (MPO-22). */
+  rowDetail?: boolean;
+  /** Fields the detail editor shows. Defaults to `columns`. */
+  detailColumns?: DataTableColumn<TData>[];
+  /** Hides one row's cell, in the grid and in the detail editor. */
+  isCellHidden?: ChildCellHidden<TData>;
 }
 
 export function TableInput<TData extends DataTableData = DataTableData>({
@@ -103,6 +110,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
   emptyMessage,
   "aria-label": ariaLabel,
   compact = true,
+  rowDetail = false,
+  detailColumns,
+  isCellHidden,
 }: TableInputProps<TData>) {
   const { t } = useTranslation();
   const { resolvedForm } = useFormField({ form: formProp });
@@ -138,6 +148,9 @@ export function TableInput<TData extends DataTableData = DataTableData>({
     emptyMessage: emptyMessage ?? t("No rows"),
     ariaLabel: resolvedAriaLabel,
     compact,
+    rowDetail,
+    detailColumns: detailColumns ?? columns,
+    isCellHidden,
     t,
   };
 
@@ -191,6 +204,9 @@ interface TableInputInnerProps<TData extends DataTableData> {
   emptyMessage: string;
   ariaLabel: string;
   compact: boolean;
+  rowDetail: boolean;
+  detailColumns: DataTableColumn<TData>[];
+  isCellHidden?: ChildCellHidden<TData>;
   t: (key: string, options?: Record<string, unknown>) => string;
 }
 
@@ -210,6 +226,9 @@ function TableInputInner<TData extends DataTableData>({
   emptyMessage,
   ariaLabel,
   compact,
+  rowDetail,
+  detailColumns,
+  isCellHidden,
   t,
 }: TableInputInnerProps<TData>) {
   const theme = useTheme();
@@ -219,6 +238,7 @@ function TableInputInner<TData extends DataTableData>({
   const indexWidth = Math.max(36, chromePx);
   const actionWidth = chromePx + 16;
   const [activeRowId, setActiveRowId] = useState<string | null>(null);
+  const Detail = RowDetailEditor<TData>;
 
   const handleCellChange = useCallback(
     (rowIndex: number, columnId: string, value: unknown) => {
@@ -250,6 +270,16 @@ function TableInputInner<TData extends DataTableData>({
     [rows, commit, minRows],
   );
 
+  const handleRowDetailCommit = useCallback(
+    (rowIndex: number, next: TData, changed: string[]) => {
+      for (const columnId of changed) {
+        onCellChange?.(rowIndex, columnId, next[columnId as keyof TData]);
+      }
+      commit(rows.map((row, index) => (index === rowIndex ? next : row)));
+    },
+    [rows, commit, onCellChange],
+  );
+
   const canAddRow = !maxRows || rows.length < maxRows;
   const canDelete = !minRows || rows.length > (minRows || 0);
 
@@ -277,6 +307,7 @@ function TableInputInner<TData extends DataTableData>({
           </Text>
         </View>
       ))}
+      {rowDetail && <View width={actionWidth} />}
       {showDeleteRow && !readOnly && <View width={actionWidth} />}
     </XStack>
   );
@@ -304,6 +335,9 @@ function TableInputInner<TData extends DataTableData>({
           const field = (col.field || "input") as DataTableField;
           const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
 
+          if (isCellHidden?.(item, columnId, index)) {
+            return <View key={columnId} flex={1} paddingHorizontal="$1" />;
+          }
           return (
             <View key={columnId} flex={1} paddingHorizontal="$1">
               <DataTableCell
@@ -321,6 +355,19 @@ function TableInputInner<TData extends DataTableData>({
             </View>
           );
         })}
+        {rowDetail && (
+          <View width={actionWidth} justifyContent="center" alignItems="center">
+            <Detail
+              row={item}
+              rowIndex={index}
+              columns={detailColumns}
+              readOnly={readOnly}
+              compact={compact}
+              isCellHidden={isCellHidden}
+              onCommit={(next, changed) => handleRowDetailCommit(index, next, changed)}
+            />
+          </View>
+        )}
         {showDeleteRow && !readOnly && (
           <View width={actionWidth} justifyContent="center" alignItems="center">
             <Button
@@ -355,6 +402,7 @@ function TableInputInner<TData extends DataTableData>({
               <Skeleton variant="rounded" width="70%" height={16} />
             </View>
           ))}
+          {rowDetail && <View width={actionWidth} />}
           {showDeleteRow && !readOnly && <View width={actionWidth} />}
         </XStack>
       ))}