@multiplatform.one/table 7.29.0 → 7.30.0

package/src/components/DataTableCell/index.tsx

@@ -1107,12 +1107,19 @@ function DraftFieldEditor({
   const onCommitRef = useRef(onCommit);
   onCommitRef.current = onCommit;
   const blurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const shownRef = useRef(committed);
 
   // External value updates (a commit landing, row edits) clear the draft so
-  // the field tracks the new committed value.
+  // the field tracks the new committed value. A value the field did not emit
+  // itself also remounts it: Stepper and PhoneInput only read defaultValue on
+  // mount, and the grid keeps its cells mounted across row commits (MPO-475).
   if (!Object.is(prevCommitted, committed)) {
     setPrevCommitted(committed);
     if (draft) setDraft(null);
+    if (!Object.is(shownRef.current, committed)) {
+      shownRef.current = committed;
+      setResetKey((key) => key + 1);
+    }
   }
 
   const clearBlurTimer = useCallback(() => {
@@ -1144,6 +1151,7 @@ function DraftFieldEditor({
     setSessionActive(false);
     draftRef.current = null;
     setDraft(null);
+    shownRef.current = committedRef.current;
     // Remount the field: uncontrolled editors and popover-internal state
     // (DateRange mid-pick) hold edits that no prop change can reset.
     setResetKey((key) => key + 1);
@@ -1151,6 +1159,7 @@ function DraftFieldEditor({
 
   const handleDraftChange = useCallback(
     (value: any) => {
+      shownRef.current = value;
       if (mode === "change") {
         onCommitRef.current(value);
         return;

package/src/components/KnobDialog.tsx

@@ -6,10 +6,9 @@
  * borderRadius, elevation, and sizing across the table package.
  */
 
-import { DialogShowFocus } from "@multiplatform.one/components";
+import { Dialog, DialogShowFocus } from "@multiplatform.one/components";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import type React from "react";
-import { Dialog } from "tamagui";
 
 export interface KnobDialogProps {
   open: boolean;

package/src/components/TableInput/RowDetailEditor.tsx

@@ -7,6 +7,10 @@
  * 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".
+ *
+ * The pencil is the dialog's `Dialog.Trigger`: tamagui's modal close returns
+ * focus to the trigger ref and nowhere else, so without it every close
+ * dropped focus on <body> (MPO-471).
  */
 
 import { DialogContent, DialogOverlay, ScrollView } from "@multiplatform.one/components";
@@ -99,75 +103,72 @@ export function RowDetailEditor<TData extends DataTableData>({
   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>
-    </>
+    <Dialog open={draft !== null} onOpenChange={handleOpenChange} modal>
+      <Dialog.Trigger asChild>
+        <Button
+          chromeless
+          compact={compact}
+          hitSlop={knobProps.nestedControl.hitSlop}
+          aria-label={triggerLabel}
+        >
+          <PencilSimpleIcon size={16} />
+        </Button>
+      </Dialog.Trigger>
+      <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.tsx

@@ -35,7 +35,13 @@ import {
   useResolvedValidators,
   type AnyFormApi,
 } from "@multiplatform.one/forms";
-import { flexRender, getCoreRowModel, useReactTable, type ColumnDef } from "@tanstack/react-table";
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type CellContext,
+  type ColumnDef,
+} from "@tanstack/react-table";
 import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
 import { useTranslation } from "react-i18next";
 import { Table, getTableCellPadding } from "@multiplatform.one/table-primitives";
@@ -53,6 +59,7 @@ import { RowDetailEditor } from "./RowDetailEditor";
 import {
   childRowAttrs,
   childTableKeyAction,
+  columnKey,
   generateRowId,
   isEmptyRows,
   SKELETON_ROW_COUNT,
@@ -61,6 +68,113 @@ import {
 
 const chromeColumnIds = new Set(["_reorder", "_rowNumber", "_detail", "_actions"]);
 
+/**
+ * What the cell renderers read at render time. It rides on TanStack's table
+ * meta so the column definitions depend on the schema alone.
+ */
+interface GridMeta<TData extends DataTableData> {
+  readOnly: boolean;
+  compact: boolean;
+  canDelete: boolean;
+  deleteColor: string;
+  knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
+  sortable: ReturnType<typeof useSortableRows<TData>>;
+  detailColumns: DataTableColumn<TData>[];
+  isCellHidden?: ChildCellHidden<TData>;
+  t: (key: string, options?: Record<string, unknown>) => string;
+  changeCell: (rowIndex: number, columnId: string, value: unknown) => void;
+  deleteRow: (rowIndex: number) => void;
+  commitRowDetail: (rowIndex: number, next: TData, changed: string[]) => void;
+}
+
+type GridCellProps<TData extends DataTableData> = CellContext<TData, unknown>;
+
+const gridMeta = <TData extends DataTableData>({ table }: GridCellProps<TData>) =>
+  table.options.meta as GridMeta<TData>;
+
+// flexRender mounts each column's `cell` as a component, so these renderers
+// live at module scope: a renderer created per render remounts every cell on
+// a row commit, and the focused control goes with it (MPO-471, MPO-475).
+function ReorderCell<TData extends DataTableData>(props: GridCellProps<TData>) {
+  const { row } = props;
+  const { sortable, t, compact } = gridMeta(props);
+  return (
+    <SortableHandle
+      label={sortable.labels[row.index] ?? t("Row {{row}}", { row: row.index + 1 })}
+      itemId={String(row.original.id ?? row.id)}
+      compact={compact}
+      onPointerDown={(e) => sortable.onHandlePointerDown(row.index, e)}
+      onKeyDown={(e) => sortable.onHandleKeyDown(row.index, e)}
+    />
+  );
+}
+
+function RowNumberCell<TData extends DataTableData>(props: GridCellProps<TData>) {
+  const { knobProps } = gridMeta(props);
+  return (
+    <Text color="$color10" fontSize={knobProps.label.fontSize}>
+      {props.row.index + 1}
+    </Text>
+  );
+}
+
+function DataCell<TData extends DataTableData>(props: GridCellProps<TData>) {
+  const { row, column } = props;
+  const { isCellHidden, readOnly, compact, changeCell } = gridMeta(props);
+  const columnId = column.id;
+  if (isCellHidden?.(row.original, columnId, row.index)) return null;
+  const col = column.columnDef as DataTableColumn<TData>;
+  return (
+    <DataTableCell
+      value={row.original[columnId as keyof TData]}
+      onChange={(newValue) => changeCell(row.index, columnId, newValue)}
+      field={(col.field || "input") as DataTableField}
+      fieldProps={col.fieldProps as DataTableFieldProps | undefined}
+      readOnly={readOnly}
+      compact={compact}
+      columnId={columnId}
+      columnLabel={typeof col.header === "string" ? col.header : undefined}
+      rowIndex={row.index}
+      rowData={row.original}
+    />
+  );
+}
+
+function DetailCell<TData extends DataTableData>(props: GridCellProps<TData>) {
+  const { row } = props;
+  const { detailColumns, readOnly, compact, isCellHidden, commitRowDetail } = gridMeta(props);
+  return (
+    <RowDetailEditor
+      row={row.original}
+      rowIndex={row.index}
+      columns={detailColumns}
+      readOnly={readOnly}
+      compact={compact}
+      isCellHidden={isCellHidden}
+      onCommit={(next, changed) => commitRowDetail(row.index, next, changed)}
+    />
+  );
+}
+
+function DeleteCell<TData extends DataTableData>(props: GridCellProps<TData>) {
+  const { row } = props;
+  const { canDelete, compact, knobProps, deleteColor, deleteRow, t } = gridMeta(props);
+  return (
+    <Button
+      chromeless
+      compact={compact}
+      onPress={() => deleteRow(row.index)}
+      disabled={!canDelete}
+      hitSlop={knobProps.nestedControl.hitSlop}
+      aria-label={withInterp(t("Delete row {{row}}", { row: row.index + 1 }), {
+        row: row.index + 1,
+      })}
+    >
+      <TrashIcon size={16} color={deleteColor} />
+    </Button>
+  );
+}
+
 export interface TableInputProps<TData extends DataTableData = DataTableData> {
   /** Data array for the table (ignored in favor of form state in the form branch) */
   data?: TData[];
@@ -272,7 +386,6 @@ function TableInputInner<TData extends DataTableData>({
   const pendingFocusRef = useRef<string | null>(null);
   const gridRef = useRef<HTMLElement | null>(null);
   const reorderEnabled = enableReorder && !readOnly && !skeleton;
-  const Detail = RowDetailEditor<TData>;
 
   const firstDataKey = useMemo(() => {
     const first = columns[0];
@@ -307,13 +420,6 @@ function TableInputInner<TData extends DataTableData>({
     rowSelector: `[${childRowAttrs.row}]`,
   });
 
-  const handlePointerRef = useRef(sortable.onHandlePointerDown);
-  handlePointerRef.current = sortable.onHandlePointerDown;
-  const handleKeyRef = useRef(sortable.onHandleKeyDown);
-  handleKeyRef.current = sortable.onHandleKeyDown;
-  const labelsRef = useRef(sortable.labels);
-  labelsRef.current = sortable.labels;
-
   const lastDataColumnId = useMemo(() => {
     const last = columns[columns.length - 1];
     if (!last) return null;
@@ -428,133 +534,34 @@ function TableInputInner<TData extends DataTableData>({
 
   const tableColumns = useMemo(() => {
     const cols: ColumnDef<TData, unknown>[] = [];
+    const chrome = (id: string, header: string, size: number, cell: ColumnDef<TData>["cell"]) =>
+      cols.push({ id, header, size, cell });
 
-    if (reorderEnabled) {
-      cols.push({
-        id: "_reorder",
-        header: "",
-        size: chromePx + 16,
-        cell: ({ row }) => (
-          <SortableHandle
-            label={labelsRef.current[row.index] ?? t("Row {{row}}", { row: row.index + 1 })}
-            itemId={String((row.original as DataTableData).id ?? row.id)}
-            compact={compact}
-            onPointerDown={(e) => handlePointerRef.current(row.index, e)}
-            onKeyDown={(e) => handleKeyRef.current(row.index, e)}
-          />
-        ),
-      });
-    }
-
-    if (showRowNumbers) {
-      cols.push({
-        id: "_rowNumber",
-        header: "#",
-        size: Math.max(36, chromePx),
-        cell: ({ row }) => (
-          <Text color="$color10" fontSize={knobProps.label.fontSize}>
-            {row.index + 1}
-          </Text>
-        ),
-      });
-    }
-
-    columns.forEach((col) => {
-      const columnId =
-        typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
-
-      cols.push({
-        ...col,
-        id: columnId,
-        cell: ({ row }) => {
-          if (isCellHidden?.(row.original, columnId, row.index)) return null;
-          const value = row.original[columnId as keyof TData];
-          const field = (col.field || "input") as DataTableField;
-          const fieldProps = col.fieldProps as DataTableFieldProps | undefined;
-
-          return (
-            <DataTableCell
-              value={value}
-              onChange={(newValue) => handleCellChange(row.index, columnId, newValue)}
-              field={field}
-              fieldProps={fieldProps}
-              readOnly={readOnly}
-              compact={compact}
-              columnId={columnId}
-              columnLabel={typeof col.header === "string" ? col.header : undefined}
-              rowIndex={row.index}
-              rowData={row.original}
-            />
-          );
-        },
-      } as ColumnDef<TData, unknown>);
-    });
-
-    if (rowDetail) {
-      cols.push({
-        id: "_detail",
-        header: "",
-        size: chromePx + 16,
-        cell: ({ row }) => (
-          <Detail
-            row={row.original}
-            rowIndex={row.index}
-            columns={detailColumns}
-            readOnly={readOnly}
-            compact={compact}
-            isCellHidden={isCellHidden}
-            onCommit={(next, changed) => handleRowDetailCommit(row.index, next, changed)}
-          />
-        ),
-      });
-    }
-
-    if (showDeleteRow && !readOnly) {
-      cols.push({
-        id: "_actions",
-        header: "",
-        size: chromePx + 16,
-        cell: ({ row }) => {
-          const canDelete = !minRows || rows.length > minRows;
-          return (
-            <Button
-              chromeless
-              compact={compact}
-              onPress={() => handleDeleteRow(row.index)}
-              disabled={!canDelete}
-              hitSlop={knobProps.nestedControl.hitSlop}
-              aria-label={withInterp(t("Delete row {{row}}", { row: row.index + 1 }), {
-                row: row.index + 1,
-              })}
-            >
-              <TrashIcon size={16} color={theme.red10?.val ?? "currentColor"} />
-            </Button>
-          );
-        },
-      });
+    if (reorderEnabled) chrome("_reorder", "", chromePx + 16, ReorderCell<TData>);
+    if (showRowNumbers) chrome("_rowNumber", "#", Math.max(36, chromePx), RowNumberCell<TData>);
+    for (const col of columns) {
+      cols.push({ ...col, id: columnKey(col), cell: DataCell<TData> } as ColumnDef<TData, unknown>);
     }
+    if (rowDetail) chrome("_detail", "", chromePx + 16, DetailCell<TData>);
+    if (showDeleteRow && !readOnly) chrome("_actions", "", chromePx + 16, DeleteCell<TData>);
 
     return cols;
-  }, [
-    columns,
-    showRowNumbers,
-    showDeleteRow,
+  }, [columns, reorderEnabled, showRowNumbers, rowDetail, showDeleteRow, readOnly, chromePx]);
+
+  const meta: GridMeta<TData> = {
     readOnly,
-    handleCellChange,
-    handleDeleteRow,
-    rows.length,
-    minRows,
-    t,
     compact,
-    chromePx,
-    knobProps.label.fontSize,
-    knobProps.nestedControl.hitSlop,
-    reorderEnabled,
-    rowDetail,
+    canDelete: !minRows || rows.length > minRows,
+    deleteColor: theme.red10?.val ?? "currentColor",
+    knobProps,
+    sortable,
     detailColumns,
     isCellHidden,
-    handleRowDetailCommit,
-  ]);
+    t,
+    changeCell: handleCellChange,
+    deleteRow: handleDeleteRow,
+    commitRowDetail: handleRowDetailCommit,
+  };
 
   const table = useReactTable({
     data: rows,
@@ -563,6 +570,7 @@ function TableInputInner<TData extends DataTableData>({
     // Stable row identity: keeps in-cell editor drafts pinned to their data
     // row across deletes instead of following the positional index.
     getRowId: (row, index) => String((row as DataTableData).id ?? index),
+    meta,
   });
 
   // Empty state flips to flex so a single auto-width cell fills the row