@multiplatform.one/table 6.1.0 → 6.4.0

package/src/components/DataTableCell/index.tsx

@@ -32,6 +32,7 @@ import {
   Duration,
   PhoneInput,
   Barcode,
+  BarcodePreview,
   MentionInput,
   OTPInput,
   // Visual/feedback
@@ -47,12 +48,15 @@ import {
   FieldDisplay,
 } from "@multiplatform.one/forms";
 import { CellModalEditor } from "./CellModalEditor";
+import { CellOptionsEditor } from "./CellOptionsEditor";
 import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import React, { useCallback } from "react";
-import { View } from "tamagui";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { View, isWeb } from "tamagui";
 import type { DataTableFieldProps, DataTableField } from "../../types";
+import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign";
+import { t } from "../../shared/t";
 
 export interface DataTableCellProps {
   /** Current cell value */
@@ -69,6 +73,12 @@ export interface DataTableCellProps {
   disabled?: boolean;
   /** Column ID for accessibility */
   columnId: string;
+  /**
+   * Human-readable column header text. Chromeless in-cell fields have no
+   * field label, so sheet/popover triggers (select, combobox) use this as
+   * their accessible name instead of the technical columnId.
+   */
+  columnLabel?: string;
   /** Row index for accessibility */
   rowIndex: number;
   /** Row data for custom render */
@@ -95,7 +105,8 @@ export function DataTableCell({
   onChange,
   readOnly = false,
   disabled = false,
-  columnId: _columnId,
+  columnId,
+  columnLabel,
   rowIndex: _rowIndex,
   rowData,
   size,
@@ -129,17 +140,34 @@ export function DataTableCell({
     ...restProps
   } = fieldProps;
 
+  // Keep onChange behind a ref so handleChange's identity stays stable across
+  // parent re-renders. WiredTable/DataTable pass a fresh inline onChange every
+  // render; fields that sync via useEffect([onChange]) (OTP, Phone, …) would
+  // otherwise re-emit and loop (SB-T2-10).
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   const handleChange = useCallback(
     (newValue: any) => {
       if (readOnly || disabled) return;
-      onChange(newValue);
+      onChangeRef.current(newValue);
     },
-    [onChange, readOnly, disabled],
+    [readOnly, disabled],
   );
 
-  // Custom render function
+  // DG-TBL-01: default cell justification from field/data type (overridable via align).
+  const cellJustify = alignToFlex(getDefaultColumnAlign({ id: columnId, field, fieldProps }));
+
+  // Custom render function. This branch intentionally precedes the read-only
+  // branch (the renderer owns the cell's presentation in both modes), so the
+  // cell's honest state travels as the render context: commits are already
+  // blocked while readOnly/disabled (handleChange no-ops), and the renderer
+  // must mirror that by going non-interactive (D-18.4 — Axiom 6).
   if (field === "custom" && render) {
-    return <CellWrapper>{render(value, rowData, handleChange)}</CellWrapper>;
+    return (
+      <CellWrapper justify={cellJustify}>
+        {render(value, rowData, handleChange, { readOnly, disabled })}
+      </CellWrapper>
+    );
   }
 
   // Read-only cells route through FieldDisplay (lightweight, view-only) rather
@@ -147,12 +175,19 @@ export function DataTableCell({
   // large tables performant and gives heavy fields a purpose-built compact
   // representation. Edit-mode (below) still mounts the full field component.
   if (readOnly) {
+    // FieldDisplay formats currency via Intl.NumberFormat, which requires an
+    // ISO-4217 code — a raw symbol ("$") throws RangeError and crashes the
+    // whole table. Normalize symbols to codes and drop anything still invalid.
+    const displayFieldProps =
+      fieldProps.currency != null
+        ? { ...fieldProps, currency: normalizeCurrencyCode(fieldProps.currency) }
+        : fieldProps;
     return (
-      <CellWrapper justify={field === "stepper" || field === "slider" ? "flex-end" : "flex-start"}>
+      <CellWrapper justify={cellJustify}>
         <FieldDisplay
           field={field}
           value={value}
-          fieldProps={fieldProps}
+          fieldProps={displayFieldProps}
           linkedValue={_linkedValue}
         />
       </CellWrapper>
@@ -170,6 +205,12 @@ export function DataTableCell({
             onCheckedChange={handleChange}
             disabled={disabled || readOnly}
             {...restProps}
+            // Chromeless in-cell control has no field label — name it from
+            // the column header (same fallback chain as select/combobox).
+            checkboxProps={{
+              "aria-label": (restProps as any)["aria-label"] ?? columnLabel ?? columnId,
+              ...(restProps as any).checkboxProps,
+            }}
           />
         </CellWrapper>
       );
@@ -182,6 +223,12 @@ export function DataTableCell({
             onCheckedChange={handleChange}
             disabled={disabled || readOnly}
             {...restProps}
+            // Chromeless in-cell control has no field label — name it from
+            // the column header (same fallback chain as select/combobox).
+            switchProps={{
+              "aria-label": (restProps as any)["aria-label"] ?? columnLabel ?? columnId,
+              ...(restProps as any).switchProps,
+            }}
           />
         </CellWrapper>
       );
@@ -199,6 +246,7 @@ export function DataTableCell({
             placeholder={placeholder}
             size={knobProps.sizeToken}
             {...restProps}
+            aria-label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
           />
         </CellWrapper>
       );
@@ -215,22 +263,42 @@ export function DataTableCell({
             placeholder={placeholder}
             size={knobProps.sizeToken}
             {...restProps}
+            aria-label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
           />
         </CellWrapper>
       );
 
     case "radiogroup":
+      // UX-022 / LC-06 OVERSIZED-EDIT: a horizontal radio row is wider than
+      // narrow columns and the cell's overflow guard makes the clipped
+      // options unreachable. The editor escapes the anchor: the cell face is
+      // the current option label; options open in a popover (web) / sheet
+      // (native), seeded at the current value. A pick commits and closes
+      // (LC-21 COMMIT class — one value completes the contract).
       return (
         <CellWrapper>
-          <RadioGroup
-            value={value != null ? String(value) : ""}
-            onValueChange={handleChange}
-            options={options ?? []}
+          <CellOptionsEditor
+            field="radiogroup"
+            value={value}
+            fieldProps={fieldProps}
             disabled={disabled || readOnly}
-            size={knobProps.sizeToken}
-            orientation="horizontal"
-            {...restProps}
-          />
+            label={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+          >
+            {(close) => (
+              <RadioGroup
+                value={value != null ? String(value) : ""}
+                onValueChange={(next: string) => {
+                  handleChange(next);
+                  close();
+                }}
+                options={options ?? []}
+                disabled={disabled || readOnly}
+                size={knobProps.sizeToken}
+                orientation="vertical"
+                {...restProps}
+              />
+            )}
+          </CellOptionsEditor>
         </CellWrapper>
       );
 
@@ -251,30 +319,51 @@ export function DataTableCell({
 
     // ─── Numeric inputs ───────────────────────────────────────
     case "stepper":
+      // Free-entry numeric editor: buffer as a draft; commit on Enter/blur,
+      // Escape reverts (wheel/arrow ticks also stay in the draft until blur).
       return (
-        <CellWrapper>
-          <Stepper
-            defaultValue={value != null ? Number(value) : undefined}
-            onChange={(v: any) => handleChange(v)}
-            min={min}
-            max={max}
-            step={step ?? 1}
-            precision={precision ?? 0}
-            disabled={disabled}
-            readOnly={readOnly}
-            placeholder={placeholder || "0"}
-            size={knobProps.sizeToken}
-            // In-cell stepper renders as plain numeric input — full +/- buttons
-            // overflow narrow columns. Wheel and keyboard arrows still work.
-            showButtons={false}
-            {...restProps}
-          />
+        // Native keeps stretch (like the Slider fill-type opt-out below): RN
+        // TextInput has no intrinsic width, so the end-aligned (non-stretch)
+        // numeric column collapses the chromeless input to 0pt — invisible
+        // AND culled from the a11y tree (iOS strips zero-rect subtrees). Web
+        // inputs carry an intrinsic width, so numeric end-alignment stays.
+        <CellWrapper justify={isWeb ? cellJustify : "flex-start"}>
+          <DraftFieldEditor committed={value} onCommit={handleChange}>
+            {(draftValue, onDraftChange) => (
+              <Stepper
+                defaultValue={draftValue != null ? Number(draftValue) : undefined}
+                onChange={onDraftChange}
+                min={min}
+                max={max}
+                step={step ?? 1}
+                precision={precision ?? 0}
+                disabled={disabled}
+                readOnly={readOnly}
+                placeholder={placeholder || "0"}
+                size={knobProps.sizeToken}
+                // In-cell stepper renders as plain numeric input — full +/- buttons
+                // overflow narrow columns. Wheel and keyboard arrows still work.
+                showButtons={false}
+                {...restProps}
+                // Chromeless in-cell control has no field label — name it from
+                // the column header (same fallback chain as checkbox/select).
+                inputProps={{
+                  "aria-label": (restProps as any)["aria-label"] ?? columnLabel ?? columnId,
+                  ...(restProps as any).inputProps,
+                }}
+              />
+            )}
+          </DraftFieldEditor>
         </CellWrapper>
       );
 
     case "slider":
       return (
-        <CellWrapper minWidth={120}>
+        // Fill-type control: number columns justify flex-end, but flex-end
+        // kills cross-axis stretch and a Slider has no intrinsic width — the
+        // whole track collapses to 0. Sliders fill the cell instead of
+        // aligning (align-by-type governs content, not fill controls).
+        <CellWrapper justify="flex-start" minWidth={120}>
           <Slider
             value={[value != null ? Number(value) : (min ?? 0)]}
             onValueChange={readOnly ? undefined : (values) => handleChange(values[0])}
@@ -290,11 +379,16 @@ export function DataTableCell({
 
     case "progress":
       return (
-        <CellWrapper minWidth={120}>
+        <CellWrapper justify={cellJustify} minWidth={120}>
           <Progress
             value={value != null ? Number(value) : 0}
             size={knobProps.sizeToken}
             {...restProps}
+            // Tamagui Progress's size variant pins width/minWidth (~220px),
+            // overriding the frame's width="100%" and overflowing narrow
+            // columns. progressProps spreads after the size variant, so it
+            // wins and the bar adopts the cell width.
+            progressProps={{ width: "100%", minWidth: 0, ...restProps.progressProps }}
           />
         </CellWrapper>
       );
@@ -311,8 +405,9 @@ export function DataTableCell({
             onChange={(v: number) => handleChange(Math.round(v * stars))}
             disabled={disabled || readOnly}
             maxStars={stars}
-            starIcon={restProps.starIcon ?? Star}
+            starIcon={restProps.starIcon ?? CellStar}
             size={knobProps.sizeToken}
+            compact
           />
         </CellWrapper>
       );
@@ -327,7 +422,7 @@ export function DataTableCell({
             onValueChange={handleChange}
             disabled={disabled}
             readOnly={readOnly}
-            placeholder={placeholder || "Select date"}
+            placeholder={placeholder || t("Select date")}
             minDate={minDate}
             maxDate={maxDate}
             size={knobProps.sizeToken}
@@ -344,7 +439,7 @@ export function DataTableCell({
             onValueChange={handleChange}
             disabled={disabled}
             readOnly={readOnly}
-            placeholder={placeholder || "Select date & time"}
+            placeholder={placeholder || t("Select date & time")}
             minDate={minDate}
             maxDate={maxDate}
             timeFormat={timeFormat}
@@ -361,7 +456,7 @@ export function DataTableCell({
             value={value ?? ""}
             onChange={handleChange}
             disabled={disabled}
-            placeholder={placeholder || "Select time"}
+            placeholder={placeholder || t("Select time")}
             timeFormat={timeFormat}
             size={knobProps.sizeToken}
             {...restProps}
@@ -370,43 +465,59 @@ export function DataTableCell({
       );
 
     case "daterangepicker":
+      // The picker only emits complete {start,end} ranges (or null on clear),
+      // and completing a range closes the popover — those are the confirm
+      // gestures, so commits pass straight through. Escape remounts the
+      // picker to discard a half-picked range (start chosen, end pending).
       return (
         <CellWrapper>
-          <DateRangePicker
-            defaultValue={value}
-            disabled={disabled}
-            placeholder={placeholder || "Select range"}
-            minDate={minDate}
-            maxDate={maxDate}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          <DraftFieldEditor committed={value} onCommit={handleChange} mode="change">
+            {(draftValue, onDraftChange) => (
+              <DateRangePicker
+                value={draftValue}
+                onChange={onDraftChange}
+                disabled={disabled}
+                placeholder={placeholder || t("Select range")}
+                minDate={minDate}
+                maxDate={maxDate}
+                size={knobProps.sizeToken}
+                {...restProps}
+              />
+            )}
+          </DraftFieldEditor>
         </CellWrapper>
       );
 
     case "multidatepicker":
+      // Accumulating editor: day toggles build a draft; one commit fires when
+      // the cell is left/closed (blur or outside click), Escape discards.
       return (
         <CellWrapper>
-          <MultiDatePicker
-            defaultValue={value}
-            disabled={disabled}
-            placeholder={placeholder || "Select dates"}
-            minDate={minDate}
-            maxDate={maxDate}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          <DraftFieldEditor committed={value} onCommit={handleChange}>
+            {(draftValue, onDraftChange) => (
+              <MultiDatePicker
+                value={draftValue}
+                onChange={onDraftChange}
+                disabled={disabled}
+                placeholder={placeholder || t("Select dates")}
+                minDate={minDate}
+                maxDate={maxDate}
+                size={knobProps.sizeToken}
+                {...restProps}
+              />
+            )}
+          </DraftFieldEditor>
         </CellWrapper>
       );
 
     case "duration":
       return (
-        <CellWrapper>
+        <CellWrapper justify={cellJustify}>
           <Duration
             value={value != null ? Number(value) : 0}
             onChange={handleChange}
             disabled={disabled}
-            placeholder={placeholder || "Select duration"}
+            placeholder={placeholder || t("Select duration")}
             size={knobProps.sizeToken}
             {...restProps}
           />
@@ -430,31 +541,51 @@ export function DataTableCell({
       );
 
     case "phoneinput":
+      // Free-entry editor emitting per keystroke: buffer as a draft; commit
+      // on Enter/blur, Escape reverts.
       return (
         <CellWrapper>
-          <PhoneInput
-            defaultValue={value ?? ""}
-            disabled={disabled}
-            readOnly={readOnly}
-            placeholder={placeholder || "Phone number"}
-            defaultCountry={defaultCountry}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          <DraftFieldEditor committed={value} onCommit={handleChange}>
+            {(draftValue, onDraftChange) => (
+              <PhoneInput
+                defaultValue={draftValue ?? ""}
+                onChange={onDraftChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                placeholder={placeholder || t("Phone number")}
+                defaultCountry={defaultCountry}
+                size={knobProps.sizeToken}
+                {...restProps}
+              />
+            )}
+          </DraftFieldEditor>
         </CellWrapper>
       );
 
     case "otp":
+      // Multi-digit accumulation: digits build a draft; commit on Enter or
+      // when focus leaves the cell (auto-advance between digit inputs stays
+      // inside), Escape reverts.
       return (
-        <CellWrapper justify="center">
-          <OTPInput
-            value={value ?? ""}
-            onChange={handleChange}
-            disabled={disabled || readOnly}
-            length={otpLength ?? 6}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+        // Native start-aligns: the digit row is physically wider than narrow
+        // cells (4 tap targets), and center-justification overflows it
+        // symmetrically — the first digit lands off-cell/off-screen. Start
+        // alignment keeps digit 1 anchored; overflow spills toward the
+        // trailing edge where RN leaves it visible. Web keeps center (its
+        // CellWrapper clips overflow-x at the cell edge instead).
+        <CellWrapper justify={isWeb ? "center" : "flex-start"}>
+          <DraftFieldEditor committed={value} onCommit={handleChange}>
+            {(draftValue, onDraftChange) => (
+              <OTPInput
+                value={draftValue ?? ""}
+                onChange={onDraftChange}
+                disabled={disabled || readOnly}
+                length={otpLength ?? 6}
+                size={knobProps.sizeToken}
+                {...restProps}
+              />
+            )}
+          </DraftFieldEditor>
         </CellWrapper>
       );
 
@@ -466,34 +597,63 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Edit text"
+          onCommit={handleChange}
+          title={t("Edit text")}
         >
-          <MentionInput
-            defaultValue={value ?? ""}
-            disabled={disabled}
-            readOnly={readOnly}
-            placeholder={placeholder || "Enter text..."}
-            mentions={mentions ? [{ trigger: "@", data: mentions }] : [{ trigger: "@", data: [] }]}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <MentionInput
+              defaultValue={draftValue ?? ""}
+              onTextChange={onDraftChange}
+              disabled={disabled}
+              readOnly={readOnly}
+              placeholder={placeholder || t("Enter text...")}
+              mentions={
+                mentions ? [{ trigger: "@", data: mentions }] : [{ trigger: "@", data: [] }]
+              }
+              size={knobProps.sizeToken}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
     case "barcode":
+      // LC-06: the full editor (input + scan button + camera scanner surface)
+      // is far larger than the cell anchor, so it opens in the modal editor
+      // like other heavy fields — never inline where the scanner would grow
+      // the row. The cell face is FieldDisplay's compact drawn-barcode preview.
       return (
-        <CellWrapper>
-          <Barcode
-            value={value ?? ""}
-            onChange={handleChange}
-            disabled={disabled}
-            size={knobProps.sizeToken}
-            barcodeIcon={restProps.barcodeIcon}
-            scanIcon={restProps.scanIcon}
-            stopIcon={restProps.stopIcon}
-            {...restProps}
-          />
-        </CellWrapper>
+        <CellModalEditor
+          field="barcode"
+          value={value}
+          fieldProps={fieldProps}
+          disabled={disabled}
+          readOnly={readOnly}
+          onCommit={handleChange}
+          title={t("Barcode")}
+        >
+          {(draftValue, onDraftChange) => (
+            <View flexDirection="column" {...knobProps.gap}>
+              <Barcode
+                value={String(draftValue ?? "")}
+                onChange={onDraftChange}
+                disabled={disabled}
+                readOnly={readOnly}
+                size={knobProps.sizeToken}
+                barcodeIcon={restProps.barcodeIcon}
+                scanIcon={restProps.scanIcon}
+                stopIcon={restProps.stopIcon}
+                {...restProps}
+              />
+              <BarcodePreview
+                value={String(draftValue ?? "")}
+                height={64}
+                moduleWidth={2}
+                showText
+              />
+            </View>
+          )}
+        </CellModalEditor>
       );
 
     // ─── File/media inputs ────────────────────────────────────
@@ -505,17 +665,21 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Upload file"
+          onCommit={handleChange}
+          title={t("Upload file")}
         >
-          <FileUpload
-            defaultValue={value}
-            disabled={disabled}
-            readOnly={readOnly}
-            placeholder={placeholder || "Upload file"}
-            accept={restProps.accept}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <FileUpload
+              defaultValue={draftValue}
+              onValueChange={onDraftChange}
+              disabled={disabled}
+              readOnly={readOnly}
+              placeholder={placeholder || t("Upload file")}
+              accept={restProps.accept}
+              size={knobProps.sizeToken}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -527,18 +691,21 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Image"
+          onCommit={handleChange}
+          title={t("Image")}
         >
-          <ImageField
-            value={value}
-            onValueChange={handleChange}
-            disabled={disabled}
-            readOnly={readOnly}
-            imageWidth={200}
-            imageHeight={200}
-            showRemove={!readOnly}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <ImageField
+              value={draftValue}
+              onValueChange={onDraftChange}
+              disabled={disabled}
+              readOnly={readOnly}
+              imageWidth={200}
+              imageHeight={200}
+              showRemove={!readOnly}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -550,18 +717,21 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Signature"
+          onCommit={handleChange}
+          title={t("Signature")}
         >
-          <Signature
-            value={value ?? ""}
-            onChange={handleChange}
-            disabled={disabled}
-            size={knobProps.sizeToken}
-            width={restProps.width ?? 600}
-            height={restProps.height ?? 240}
-            clearIcon={restProps.clearIcon}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <Signature
+              value={draftValue ?? ""}
+              onChange={onDraftChange}
+              disabled={disabled}
+              size={knobProps.sizeToken}
+              width={restProps.width ?? 600}
+              height={restProps.height ?? 240}
+              clearIcon={restProps.clearIcon}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -573,18 +743,27 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Location"
+          onCommit={handleChange}
+          title={t("Location")}
         >
-          <Geolocation
-            value={typeof value === "string" ? value : value ? JSON.stringify(value) : ""}
-            onChange={handleChange}
-            disabled={disabled}
-            size={knobProps.sizeToken}
-            locationIcon={restProps.locationIcon}
-            expandIcon={restProps.expandIcon}
-            renderMap={restProps.renderMap}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <Geolocation
+              value={
+                typeof draftValue === "string"
+                  ? draftValue
+                  : draftValue
+                    ? JSON.stringify(draftValue)
+                    : ""
+              }
+              onChange={onDraftChange}
+              disabled={disabled}
+              size={knobProps.sizeToken}
+              locationIcon={restProps.locationIcon}
+              expandIcon={restProps.expandIcon}
+              renderMap={restProps.renderMap}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -597,18 +776,21 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Edit"
+          onCommit={handleChange}
+          title={t("Edit")}
         >
-          <RichTextEditor
-            value={value ?? ""}
-            onChange={handleChange}
-            disabled={disabled}
-            readOnly={readOnly}
-            placeholder={placeholder || "Write something..."}
-            minHeight={restProps.minHeight ?? 240}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <RichTextEditor
+              value={draftValue ?? ""}
+              onChange={onDraftChange}
+              disabled={disabled}
+              readOnly={readOnly}
+              placeholder={placeholder || t("Write something...")}
+              minHeight={restProps.minHeight ?? 240}
+              size={knobProps.sizeToken}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -620,17 +802,20 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Edit markdown"
+          onCommit={handleChange}
+          title={t("Edit markdown")}
         >
-          <TextArea
-            value={value != null ? String(value) : ""}
-            onChangeText={handleChange}
-            placeholder={placeholder || "Markdown..."}
-            disabled={disabled}
-            readOnly={readOnly}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <TextArea
+              value={draftValue != null ? String(draftValue) : ""}
+              onChangeText={onDraftChange}
+              placeholder={placeholder || t("Markdown...")}
+              disabled={disabled}
+              readOnly={readOnly}
+              size={knobProps.sizeToken}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -642,17 +827,20 @@ export function DataTableCell({
           fieldProps={fieldProps}
           disabled={disabled}
           readOnly={readOnly}
-          title="Edit code"
+          onCommit={handleChange}
+          title={t("Edit code")}
         >
-          <TextArea
-            value={value != null ? String(value) : ""}
-            onChangeText={handleChange}
-            placeholder={placeholder || "Code..."}
-            disabled={disabled}
-            readOnly={readOnly}
-            size={knobProps.sizeToken}
-            {...restProps}
-          />
+          {(draftValue, onDraftChange) => (
+            <TextArea
+              value={draftValue != null ? String(draftValue) : ""}
+              onChangeText={onDraftChange}
+              placeholder={placeholder || t("Code...")}
+              disabled={disabled}
+              readOnly={readOnly}
+              size={knobProps.sizeToken}
+              {...restProps}
+            />
+          )}
         </CellModalEditor>
       );
 
@@ -660,14 +848,16 @@ export function DataTableCell({
     case "textarea":
       return (
         <CellWrapper>
-          <TextArea
-            value={value != null ? String(value) : ""}
-            onChangeText={handleChange}
+          <InlineTextEditor
+            value={value}
+            onCommit={handleChange}
+            multiline
             placeholder={placeholder}
             disabled={disabled}
             readOnly={readOnly}
-            size={knobProps.sizeToken}
-            {...restProps}
+            sizeToken={knobProps.sizeToken}
+            ariaLabel={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+            restProps={restProps}
           />
         </CellWrapper>
       );
@@ -675,22 +865,350 @@ export function DataTableCell({
     case "input":
     default:
       return (
-        <CellWrapper>
-          <Input
-            value={value != null ? String(value) : ""}
-            onChangeText={handleChange}
+        <CellWrapper justify={cellJustify}>
+          <InlineTextEditor
+            value={value}
+            onCommit={handleChange}
             placeholder={placeholder}
             disabled={disabled}
             readOnly={readOnly}
-            size={knobProps.sizeToken}
-            {...restProps}
+            sizeToken={knobProps.sizeToken}
+            ariaLabel={(restProps as any)["aria-label"] ?? columnLabel ?? columnId}
+            restProps={restProps}
           />
         </CellWrapper>
       );
   }
 }
 
-// ─── Internal helper ──────────────────────────────────────────
+// ─── Internal helpers ─────────────────────────────────────────
+
+// Rating renders 24px stars (~160px for 5 incl gaps) which overlap neighbor
+// columns at typical ~130px cell widths. 16px stars fit.
+function CellStar(props: { size: number; weight: "fill" | "regular"; color: string }) {
+  return <Star {...props} size={16} />;
+}
+
+/**
+ * Draft-until-commit wrapper for inline text editors (input, textarea).
+ * Typing edits a local draft; Enter (single-line) or blur commits it via
+ * onCommit; Escape restores the pre-edit value without committing.
+ */
+function InlineTextEditor({
+  value,
+  onCommit,
+  multiline,
+  placeholder,
+  disabled,
+  readOnly,
+  sizeToken,
+  ariaLabel,
+  restProps,
+}: {
+  value: any;
+  onCommit: (value: string) => void;
+  multiline?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  sizeToken?: string;
+  /** Accessible name for the chromeless in-cell editor (column header). */
+  ariaLabel?: string;
+  restProps: Record<string, any>;
+}) {
+  const committed = value != null ? String(value) : "";
+  const [draft, setDraft] = useState(committed);
+  const [prevCommitted, setPrevCommitted] = useState(committed);
+  // The Input field is uncontrolled (value maps to defaultValue), so Escape
+  // has to remount it to push the reverted draft back into the DOM.
+  const [resetKey, setResetKey] = useState(0);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const committedRef = useRef(committed);
+  committedRef.current = committed;
+
+  // External value updates (row edits, story controls) reset the draft.
+  if (prevCommitted !== committed) {
+    setPrevCommitted(committed);
+    setDraft(committed);
+  }
+
+  const commit = useCallback(() => {
+    if (draftRef.current !== committedRef.current) {
+      // Optimistically mark the draft committed so the paired web keydown +
+      // native keypress handlers don't double-fire onCommit for one Enter.
+      committedRef.current = draftRef.current;
+      onCommit(draftRef.current);
+    }
+  }, [onCommit]);
+
+  const cancel = useCallback(() => {
+    if (draftRef.current === committedRef.current) return;
+    setDraft(committedRef.current);
+    setResetKey((key) => key + 1);
+  }, []);
+
+  const handleKeyPress = useCallback(
+    (event: any) => {
+      const key = event?.nativeEvent?.key ?? event?.key;
+      if (key === "Escape") cancel();
+      else if (key === "Enter" && !multiline) commit();
+    },
+    [cancel, commit, multiline],
+  );
+
+  const { inputProps: userInputProps, textAreaProps: userTextAreaProps, ...fieldRest } = restProps;
+
+  if (multiline) {
+    return (
+      <TextArea
+        key={resetKey}
+        value={draft}
+        onChangeText={setDraft}
+        onBlur={commit}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        size={sizeToken}
+        {...fieldRest}
+        textAreaProps={{
+          ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : undefined),
+          ...userTextAreaProps,
+          // Native fires onKeyPress; the DOM keypress event never fires for
+          // Escape, so web needs onKeyDown to see it.
+          onKeyPress: handleKeyPress,
+          onKeyDown: handleKeyPress,
+          onBlur: commit,
+        }}
+      />
+    );
+  }
+
+  return (
+    <Input
+      key={resetKey}
+      value={draft}
+      onChangeText={setDraft}
+      onBlur={commit}
+      placeholder={placeholder}
+      disabled={disabled}
+      readOnly={readOnly}
+      size={sizeToken}
+      {...fieldRest}
+      inputProps={{
+        ...(ariaLabel !== undefined ? { "aria-label": ariaLabel } : undefined),
+        ...userInputProps,
+        // Native fires onKeyPress; the DOM keypress event never fires for
+        // Escape, so web needs onKeyDown to see it.
+        onKeyPress: handleKeyPress,
+        onKeyDown: handleKeyPress,
+        onBlur: commit,
+      }}
+    />
+  );
+}
+
+/**
+ * Draft-until-commit wrapper for multi-step / free-entry picker editors
+ * (Stepper, PhoneInput, OTP, MultiDatePicker). The wrapped field
+ * edits a local draft; the draft only reaches the table's commit when the
+ * user confirms — Enter inside a text input, or focus leaving the cell
+ * (which includes dismissing a picker popover by clicking elsewhere).
+ * Escape discards the draft and remounts the field so uncontrolled editors
+ * (Stepper, PhoneInput) and popover-internal state reset to the committed
+ * value.
+ *
+ * mode="change" (DateRangePicker) passes changes straight through to the
+ * table — that picker only emits complete ranges, which are themselves the
+ * confirm gesture — but keeps Escape-remount so a half-picked range (start
+ * chosen, end pending) is discarded instead of lingering in the trigger.
+ *
+ * The picker popovers/panels render inline (CSS position:fixed, no React
+ * portal), so their key and focus events bubble through this wrapper.
+ * Native has no Escape/focus-out vocabulary; changes pass straight through
+ * (previous behavior).
+ */
+function DraftFieldEditor({
+  committed,
+  onCommit,
+  mode = "confirm",
+  children,
+}: {
+  committed: any;
+  onCommit: (value: any) => void;
+  mode?: "confirm" | "change";
+  children: (value: any, onChange: (value: any) => void) => React.ReactNode;
+}) {
+  const [draft, setDraft] = useState<{ value: any } | null>(null);
+  const [resetKey, setResetKey] = useState(0);
+  const [prevCommitted, setPrevCommitted] = useState(committed);
+  // An interaction "session" starts on pointer-down inside the cell (or on
+  // the first draft change) and installs document-level listeners: Escape
+  // cancels, pointer-down outside the cell subtree commits. This is needed
+  // because picker popovers close via floating-ui's own document Escape
+  // listener while focus sits on document.body (day buttons aren't focus
+  // targets), so React-tree keydown/blur handlers alone never see those
+  // gestures.
+  const [sessionActive, setSessionActive] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const committedRef = useRef(committed);
+  committedRef.current = committed;
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  const blurTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // External value updates (a commit landing, row edits) clear the draft so
+  // the field tracks the new committed value.
+  if (!Object.is(prevCommitted, committed)) {
+    setPrevCommitted(committed);
+    if (draft) setDraft(null);
+  }
+
+  const clearBlurTimer = useCallback(() => {
+    if (blurTimerRef.current) {
+      clearTimeout(blurTimerRef.current);
+      blurTimerRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => clearBlurTimer, [clearBlurTimer]);
+
+  const commitDraft = useCallback(() => {
+    clearBlurTimer();
+    const active = draftRef.current;
+    if (!active) return;
+    if (!Object.is(active.value, committedRef.current)) {
+      // Optimistically mark the draft committed so the Enter path and the
+      // trailing focus-out timer can't double-fire onCommit for one confirm.
+      committedRef.current = active.value;
+      onCommitRef.current(active.value);
+    }
+    // The draft object itself stays until the committed prop catches up (see
+    // render adjustment above) so controlled fields don't flash the stale
+    // value between the commit and the parent's data update.
+  }, [clearBlurTimer]);
+
+  const cancelDraft = useCallback(() => {
+    clearBlurTimer();
+    setSessionActive(false);
+    draftRef.current = null;
+    setDraft(null);
+    // Remount the field: uncontrolled editors and popover-internal state
+    // (DateRange mid-pick) hold edits that no prop change can reset.
+    setResetKey((key) => key + 1);
+  }, [clearBlurTimer]);
+
+  const handleDraftChange = useCallback(
+    (value: any) => {
+      if (mode === "change") {
+        onCommitRef.current(value);
+        return;
+      }
+      draftRef.current = { value };
+      setDraft(draftRef.current);
+      // Wheel/keyboard edits can create a draft without a pointer-down;
+      // make sure the document listeners are active for it.
+      setSessionActive(true);
+    },
+    [mode],
+  );
+
+  useEffect(() => {
+    if (!isWeb || !sessionActive) return undefined;
+    const handleDocKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") cancelDraft();
+    };
+    const handleDocPointerDown = (event: PointerEvent) => {
+      const node = containerRef.current;
+      if (node && event.target instanceof Node && node.contains(event.target)) return;
+      setSessionActive(false);
+      commitDraft();
+    };
+    document.addEventListener("keydown", handleDocKeyDown, true);
+    document.addEventListener("pointerdown", handleDocPointerDown, true);
+    return () => {
+      document.removeEventListener("keydown", handleDocKeyDown, true);
+      document.removeEventListener("pointerdown", handleDocPointerDown, true);
+    };
+  }, [sessionActive, cancelDraft, commitDraft]);
+
+  if (!isWeb) {
+    return <>{children(committed, (value: any) => onCommitRef.current(value))}</>;
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      cancelDraft();
+      return;
+    }
+    if (event.key === "Enter" && mode === "confirm") {
+      const target = event.target as HTMLElement | null;
+      // Only confirm from text inputs — Enter on a popover day button is the
+      // button's activation (toggle), not a confirm.
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) {
+        // Blur first so uncontrolled editors (Stepper) flush their typed
+        // text through onChange before the draft is committed.
+        target.blur?.();
+        commitDraft();
+      }
+    }
+  };
+
+  // A focus-out schedules the commit; a focus-in landing back inside the
+  // cell (popover day buttons, OTP auto-advance, country combobox) cancels
+  // it — so the draft only commits when focus fully leaves the cell.
+  const handleBlur = () => {
+    clearBlurTimer();
+    blurTimerRef.current = setTimeout(() => {
+      blurTimerRef.current = null;
+      commitDraft();
+    }, 0);
+  };
+
+  return (
+    <div
+      key={resetKey}
+      ref={containerRef}
+      style={{ display: "contents" }}
+      onKeyDown={handleKeyDown}
+      onPointerDownCapture={() => setSessionActive(true)}
+      onFocus={mode === "confirm" ? clearBlurTimer : undefined}
+      onBlur={mode === "confirm" ? handleBlur : undefined}
+    >
+      {children(draft ? draft.value : committed, handleDraftChange)}
+    </div>
+  );
+}
+
+const CURRENCY_SYMBOL_TO_CODE: Record<string, string> = {
+  $: "USD",
+  "€": "EUR",
+  "£": "GBP",
+  "¥": "JPY",
+  "₹": "INR",
+  "₩": "KRW",
+  "₽": "RUB",
+  R$: "BRL",
+};
+
+const currencyCodeCache = new Map<string, string | undefined>();
+
+function normalizeCurrencyCode(currency: unknown): string | undefined {
+  if (typeof currency !== "string" || !currency) return undefined;
+  if (currencyCodeCache.has(currency)) return currencyCodeCache.get(currency);
+  const mapped = CURRENCY_SYMBOL_TO_CODE[currency] ?? currency;
+  let resolved: string | undefined;
+  try {
+    new Intl.NumberFormat(undefined, { style: "currency", currency: mapped });
+    resolved = mapped;
+  } catch {
+    resolved = undefined;
+  }
+  currencyCodeCache.set(currency, resolved);
+  return resolved;
+}
 
 function CellWrapper({
   children,
@@ -703,18 +1221,39 @@ function CellWrapper({
   gap?: string;
   minWidth?: number;
 }) {
+  // Fields render chromeless inside cells (useIsInTableCell strips the input
+  // frame), so the cell chrome owns the focus affordance: the knob recipe's
+  // focus-visible ring shows on the cell whenever focus is inside it
+  // (DG-A11Y-01 / Axiom 12 — recipe ring, not a hand-rolled outline).
+  const { control } = useResolvedKnobs();
+  // Column + stretch layout so field roots adopt the cell width (input frames
+  // carry minWidth 0 and shrink to fit); maxWidth + a horizontal-only clip
+  // (overflow-x: clip pairs with overflow-y: visible, unlike hidden) catch
+  // anything that still refuses to shrink, so in-cell editors never overlap
+  // neighbor columns. The vertical axis stays visible because several forms
+  // field frames resolve to 0-height boxes and center their content on the
+  // wrapper's midline — a vertical clip would swallow them. flexGrow fills
+  // the TableCell's height so that midline sits at the row center. Popover
+  // and modal editors position with strategy "fixed", which escapes this
+  // clip and keeps their natural width.
   return (
     <View
-      flexDirection="row"
-      alignItems="center"
-      justifyContent={justify}
+      flexDirection="column"
+      flexGrow={1}
+      justifyContent="center"
+      alignItems={justify === "flex-start" ? "stretch" : justify}
       width="100%"
+      maxWidth="100%"
+      // Per-axis overflow is web-only CSS; RN styles know only `overflow`.
+      {...(isWeb ? { overflowX: "clip" as any, overflowY: "visible" as any } : undefined)}
       gap={gap as any}
       minWidth={minWidth}
+      // focus-within is a web-only concept; on native the style prop makes the
+      // wrapper claim the responder and Tamagui-driven presses inside the cell
+      // (Checkbox/Switch frames) never fire.
+      {...(isWeb ? { focusWithinStyle: { ...control.focusVisibleKnobProps } } : undefined)}
     >
       {children}
     </View>
   );
 }
-
-export default DataTableCell;