@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/cjs/components/DataTableCell/index.cjs

@@ -22,17 +22,19 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var DataTableCell_exports = {};
 __export(DataTableCell_exports, {
-  DataTableCell: () => DataTableCell,
-  default: () => DataTableCell_default
+  DataTableCell: () => DataTableCell
 });
 module.exports = __toCommonJS(DataTableCell_exports);
 var import_forms = require("@multiplatform.one/forms");
 var import_CellModalEditor = require("./CellModalEditor.cjs");
+var import_CellOptionsEditor = require("./CellOptionsEditor.cjs");
 var import_react = require("@phosphor-icons/react");
 var import_rich_text = require("@multiplatform.one/rich-text");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_columnAlign = require("../../utils/columnAlign.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableCell({
   value,
@@ -41,7 +43,8 @@ function DataTableCell({
   onChange,
   readOnly = false,
   disabled = false,
-  columnId: _columnId,
+  columnId,
+  columnLabel,
   rowIndex: _rowIndex,
   rowData,
   size,
@@ -77,22 +80,37 @@ function DataTableCell({
     render,
     ...restProps
   } = fieldProps;
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  onChangeRef.current = onChange;
   const handleChange = (0, import_react2.useCallback)(newValue => {
     if (readOnly || disabled) return;
-    onChange(newValue);
-  }, [onChange, readOnly, disabled]);
+    onChangeRef.current(newValue);
+  }, [readOnly, disabled]);
+  const cellJustify = (0, import_columnAlign.alignToFlex)((0, import_columnAlign.getDefaultColumnAlign)({
+    id: columnId,
+    field,
+    fieldProps
+  }));
   if (field === "custom" && render) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-      children: render(value, rowData, handleChange)
+      justify: cellJustify,
+      children: render(value, rowData, handleChange, {
+        readOnly,
+        disabled
+      })
     });
   }
   if (readOnly) {
+    const displayFieldProps = fieldProps.currency != null ? {
+      ...fieldProps,
+      currency: normalizeCurrencyCode(fieldProps.currency)
+    } : fieldProps;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-      justify: field === "stepper" || field === "slider" ? "flex-end" : "flex-start",
+      justify: cellJustify,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FieldDisplay, {
         field,
         value,
-        fieldProps,
+        fieldProps: displayFieldProps,
         linkedValue: _linkedValue
       })
     });
@@ -106,7 +124,11 @@ function DataTableCell({
           checked: Boolean(value),
           onCheckedChange: handleChange,
           disabled: disabled || readOnly,
-          ...restProps
+          ...restProps,
+          checkboxProps: {
+            "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId,
+            ...restProps.checkboxProps
+          }
         })
       });
     case "switch":
@@ -116,7 +138,11 @@ function DataTableCell({
           checked: Boolean(value),
           onCheckedChange: handleChange,
           disabled: disabled || readOnly,
-          ...restProps
+          ...restProps,
+          switchProps: {
+            "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId,
+            ...restProps.switchProps
+          }
         })
       });
     // ─── Selection inputs ─────────────────────────────────────
@@ -130,7 +156,8 @@ function DataTableCell({
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
         })
       });
     case "combobox":
@@ -143,19 +170,30 @@ function DataTableCell({
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
         })
       });
     case "radiogroup":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.RadioGroup, {
-          value: value != null ? String(value) : "",
-          onValueChange: handleChange,
-          options: options ?? [],
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellOptionsEditor.CellOptionsEditor, {
+          field: "radiogroup",
+          value,
+          fieldProps,
           disabled: disabled || readOnly,
-          size: knobProps.sizeToken,
-          orientation: "horizontal",
-          ...restProps
+          label: restProps["aria-label"] ?? columnLabel ?? columnId,
+          children: close => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.RadioGroup, {
+            value: value != null ? String(value) : "",
+            onValueChange: next => {
+              handleChange(next);
+              close();
+            },
+            options: options ?? [],
+            disabled: disabled || readOnly,
+            size: knobProps.sizeToken,
+            orientation: "vertical",
+            ...restProps
+          })
         })
       });
     case "togglegroup":
@@ -172,43 +210,74 @@ function DataTableCell({
       });
     // ─── Numeric inputs ───────────────────────────────────────
     case "stepper":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Stepper, {
-          defaultValue: value != null ? Number(value) : void 0,
-          onChange: v => handleChange(v),
-          min,
-          max,
-          step: step ?? 1,
-          precision: precision ?? 0,
-          disabled,
-          readOnly,
-          placeholder: placeholder || "0",
-          size: knobProps.sizeToken,
-          showButtons: false,
-          ...restProps
+      return (
+        // 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.
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(CellWrapper, {
+          justify: import_tamagui.isWeb ? cellJustify : "flex-start",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Stepper, {
+              defaultValue: draftValue != null ? Number(draftValue) : void 0,
+              onChange: onDraftChange,
+              min,
+              max,
+              step: step ?? 1,
+              precision: precision ?? 0,
+              disabled,
+              readOnly,
+              placeholder: placeholder || "0",
+              size: knobProps.sizeToken,
+              showButtons: false,
+              ...restProps,
+              inputProps: {
+                "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId,
+                ...restProps.inputProps
+              }
+            })
+          })
         })
-      });
+      );
     case "slider":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        minWidth: 120,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Slider, {
-          value: [value != null ? Number(value) : min ?? 0],
-          onValueChange: readOnly ? void 0 : values => handleChange(values[0]),
-          min: min ?? 0,
-          max: max ?? 100,
-          step: step ?? 1,
-          disabled,
-          size: knobProps.sizeToken,
-          ...restProps
+      return (
+        // 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).
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(CellWrapper, {
+          justify: "flex-start",
+          minWidth: 120,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Slider, {
+            value: [value != null ? Number(value) : min ?? 0],
+            onValueChange: readOnly ? void 0 : values => handleChange(values[0]),
+            min: min ?? 0,
+            max: max ?? 100,
+            step: step ?? 1,
+            disabled,
+            size: knobProps.sizeToken,
+            ...restProps
+          })
         })
-      });
+      );
     case "progress":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
+        justify: cellJustify,
         minWidth: 120,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Progress, {
           value: value != null ? Number(value) : 0,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          progressProps: {
+            width: "100%",
+            minWidth: 0,
+            ...restProps.progressProps
+          }
         })
       });
     case "rating":
@@ -222,8 +291,9 @@ function DataTableCell({
             onChange: v => handleChange(Math.round(v * stars)),
             disabled: disabled || readOnly,
             maxStars: stars,
-            starIcon: restProps.starIcon ?? import_react.Star,
-            size: knobProps.sizeToken
+            starIcon: restProps.starIcon ?? CellStar,
+            size: knobProps.sizeToken,
+            compact: true
           })
         });
       }
@@ -235,7 +305,7 @@ function DataTableCell({
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date",
+          placeholder: placeholder || (0, import_t.t)("Select date"),
           minDate,
           maxDate,
           size: knobProps.sizeToken,
@@ -249,7 +319,7 @@ function DataTableCell({
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date & time",
+          placeholder: placeholder || (0, import_t.t)("Select date & time"),
           minDate,
           maxDate,
           timeFormat,
@@ -263,7 +333,7 @@ function DataTableCell({
           value: value ?? "",
           onChange: handleChange,
           disabled,
-          placeholder: placeholder || "Select time",
+          placeholder: placeholder || (0, import_t.t)("Select time"),
           timeFormat,
           size: knobProps.sizeToken,
           ...restProps
@@ -271,35 +341,47 @@ function DataTableCell({
       });
     case "daterangepicker":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DateRangePicker, {
-          defaultValue: value,
-          disabled,
-          placeholder: placeholder || "Select range",
-          minDate,
-          maxDate,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          mode: "change",
+          children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.DateRangePicker, {
+            value: draftValue,
+            onChange: onDraftChange,
+            disabled,
+            placeholder: placeholder || (0, import_t.t)("Select range"),
+            minDate,
+            maxDate,
+            size: knobProps.sizeToken,
+            ...restProps
+          })
         })
       });
     case "multidatepicker":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MultiDatePicker, {
-          defaultValue: value,
-          disabled,
-          placeholder: placeholder || "Select dates",
-          minDate,
-          maxDate,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MultiDatePicker, {
+            value: draftValue,
+            onChange: onDraftChange,
+            disabled,
+            placeholder: placeholder || (0, import_t.t)("Select dates"),
+            minDate,
+            maxDate,
+            size: knobProps.sizeToken,
+            ...restProps
+          })
         })
       });
     case "duration":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
+        justify: cellJustify,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Duration, {
           value: value != null ? Number(value) : 0,
           onChange: handleChange,
           disabled,
-          placeholder: placeholder || "Select duration",
+          placeholder: placeholder || (0, import_t.t)("Select duration"),
           size: knobProps.sizeToken,
           ...restProps
         })
@@ -319,28 +401,46 @@ function DataTableCell({
       });
     case "phoneinput":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.PhoneInput, {
-          defaultValue: value ?? "",
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Phone number",
-          defaultCountry,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.PhoneInput, {
+            defaultValue: draftValue ?? "",
+            onChange: onDraftChange,
+            disabled,
+            readOnly,
+            placeholder: placeholder || (0, import_t.t)("Phone number"),
+            defaultCountry,
+            size: knobProps.sizeToken,
+            ...restProps
+          })
         })
       });
     case "otp":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        justify: "center",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.OTPInput, {
-          value: value ?? "",
-          onChange: handleChange,
-          disabled: disabled || readOnly,
-          length: otpLength ?? 6,
-          size: knobProps.sizeToken,
-          ...restProps
+      return (
+        // 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).
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(CellWrapper, {
+          justify: import_tamagui.isWeb ? "center" : "flex-start",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.OTPInput, {
+              value: draftValue ?? "",
+              onChange: onDraftChange,
+              disabled: disabled || readOnly,
+              length: otpLength ?? 6,
+              size: knobProps.sizeToken,
+              ...restProps
+            })
+          })
         })
-      });
+      );
     case "mentioninput":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
         field: "mentioninput",
@@ -348,12 +448,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit text",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MentionInput, {
-          defaultValue: value ?? "",
+        onCommit: handleChange,
+        title: (0, import_t.t)("Edit text"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MentionInput, {
+          defaultValue: draftValue ?? "",
+          onTextChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Enter text...",
+          placeholder: placeholder || (0, import_t.t)("Enter text..."),
           mentions: mentions ? [{
             trigger: "@",
             data: mentions
@@ -366,16 +468,33 @@ function DataTableCell({
         })
       });
     case "barcode":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Barcode, {
-          value: value ?? "",
-          onChange: handleChange,
-          disabled,
-          size: knobProps.sizeToken,
-          barcodeIcon: restProps.barcodeIcon,
-          scanIcon: restProps.scanIcon,
-          stopIcon: restProps.stopIcon,
-          ...restProps
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+        field: "barcode",
+        value,
+        fieldProps,
+        disabled,
+        readOnly,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Barcode"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          flexDirection: "column",
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Barcode, {
+            value: String(draftValue ?? ""),
+            onChange: onDraftChange,
+            disabled,
+            readOnly,
+            size: knobProps.sizeToken,
+            barcodeIcon: restProps.barcodeIcon,
+            scanIcon: restProps.scanIcon,
+            stopIcon: restProps.stopIcon,
+            ...restProps
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.BarcodePreview, {
+            value: String(draftValue ?? ""),
+            height: 64,
+            moduleWidth: 2,
+            showText: true
+          })]
         })
       });
     // ─── File/media inputs ────────────────────────────────────
@@ -386,12 +505,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Upload file",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FileUpload, {
-          defaultValue: value,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Upload file"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FileUpload, {
+          defaultValue: draftValue,
+          onValueChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Upload file",
+          placeholder: placeholder || (0, import_t.t)("Upload file"),
           accept: restProps.accept,
           size: knobProps.sizeToken,
           ...restProps
@@ -404,10 +525,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Image",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ImageField, {
-          value,
-          onValueChange: handleChange,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Image"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ImageField, {
+          value: draftValue,
+          onValueChange: onDraftChange,
           disabled,
           readOnly,
           imageWidth: 200,
@@ -423,10 +545,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Signature",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Signature, {
-          value: value ?? "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Signature"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Signature, {
+          value: draftValue ?? "",
+          onChange: onDraftChange,
           disabled,
           size: knobProps.sizeToken,
           width: restProps.width ?? 600,
@@ -442,10 +565,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Location",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Geolocation, {
-          value: typeof value === "string" ? value : value ? JSON.stringify(value) : "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Location"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Geolocation, {
+          value: typeof draftValue === "string" ? draftValue : draftValue ? JSON.stringify(draftValue) : "",
+          onChange: onDraftChange,
           disabled,
           size: knobProps.sizeToken,
           locationIcon: restProps.locationIcon,
@@ -462,13 +586,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_rich_text.RichTextEditor, {
-          value: value ?? "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: (0, import_t.t)("Edit"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_rich_text.RichTextEditor, {
+          value: draftValue ?? "",
+          onChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Write something...",
+          placeholder: placeholder || (0, import_t.t)("Write something..."),
           minHeight: restProps.minHeight ?? 240,
           size: knobProps.sizeToken,
           ...restProps
@@ -481,11 +606,12 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit markdown",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Markdown...",
+        onCommit: handleChange,
+        title: (0, import_t.t)("Edit markdown"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+          value: draftValue != null ? String(draftValue) : "",
+          onChangeText: onDraftChange,
+          placeholder: placeholder || (0, import_t.t)("Markdown..."),
           disabled,
           readOnly,
           size: knobProps.sizeToken,
@@ -499,11 +625,12 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit code",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Code...",
+        onCommit: handleChange,
+        title: (0, import_t.t)("Edit code"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+          value: draftValue != null ? String(draftValue) : "",
+          onChangeText: onDraftChange,
+          placeholder: placeholder || (0, import_t.t)("Code..."),
           disabled,
           readOnly,
           size: knobProps.sizeToken,
@@ -513,45 +640,295 @@ function DataTableCell({
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InlineTextEditor, {
+          value,
+          onCommit: handleChange,
+          multiline: true,
           placeholder,
           disabled,
           readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
+          sizeToken: knobProps.sizeToken,
+          ariaLabel: restProps["aria-label"] ?? columnLabel ?? columnId,
+          restProps
         })
       });
     case "input":
     default:
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
+        justify: cellJustify,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InlineTextEditor, {
+          value,
+          onCommit: handleChange,
           placeholder,
           disabled,
           readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
+          sizeToken: knobProps.sizeToken,
+          ariaLabel: restProps["aria-label"] ?? columnLabel ?? columnId,
+          restProps
         })
       });
   }
 }
+function CellStar(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Star, {
+    ...props,
+    size: 16
+  });
+}
+function InlineTextEditor({
+  value,
+  onCommit,
+  multiline,
+  placeholder,
+  disabled,
+  readOnly,
+  sizeToken,
+  ariaLabel,
+  restProps
+}) {
+  const committed = value != null ? String(value) : "";
+  const [draft, setDraft] = (0, import_react2.useState)(committed);
+  const [prevCommitted, setPrevCommitted] = (0, import_react2.useState)(committed);
+  const [resetKey, setResetKey] = (0, import_react2.useState)(0);
+  const draftRef = (0, import_react2.useRef)(draft);
+  draftRef.current = draft;
+  const committedRef = (0, import_react2.useRef)(committed);
+  committedRef.current = committed;
+  if (prevCommitted !== committed) {
+    setPrevCommitted(committed);
+    setDraft(committed);
+  }
+  const commit = (0, import_react2.useCallback)(() => {
+    if (draftRef.current !== committedRef.current) {
+      committedRef.current = draftRef.current;
+      onCommit(draftRef.current);
+    }
+  }, [onCommit]);
+  const cancel = (0, import_react2.useCallback)(() => {
+    if (draftRef.current === committedRef.current) return;
+    setDraft(committedRef.current);
+    setResetKey(key => key + 1);
+  }, []);
+  const handleKeyPress = (0, import_react2.useCallback)(event => {
+    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 /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+      value: draft,
+      onChangeText: setDraft,
+      onBlur: commit,
+      placeholder,
+      disabled,
+      readOnly,
+      size: sizeToken,
+      ...fieldRest,
+      textAreaProps: {
+        ...(ariaLabel !== void 0 ? {
+          "aria-label": ariaLabel
+        } : void 0),
+        ...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
+      }
+    }, resetKey);
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+    value: draft,
+    onChangeText: setDraft,
+    onBlur: commit,
+    placeholder,
+    disabled,
+    readOnly,
+    size: sizeToken,
+    ...fieldRest,
+    inputProps: {
+      ...(ariaLabel !== void 0 ? {
+        "aria-label": ariaLabel
+      } : void 0),
+      ...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
+    }
+  }, resetKey);
+}
+function DraftFieldEditor({
+  committed,
+  onCommit,
+  mode = "confirm",
+  children
+}) {
+  const [draft, setDraft] = (0, import_react2.useState)(null);
+  const [resetKey, setResetKey] = (0, import_react2.useState)(0);
+  const [prevCommitted, setPrevCommitted] = (0, import_react2.useState)(committed);
+  const [sessionActive, setSessionActive] = (0, import_react2.useState)(false);
+  const containerRef = (0, import_react2.useRef)(null);
+  const draftRef = (0, import_react2.useRef)(draft);
+  draftRef.current = draft;
+  const committedRef = (0, import_react2.useRef)(committed);
+  committedRef.current = committed;
+  const onCommitRef = (0, import_react2.useRef)(onCommit);
+  onCommitRef.current = onCommit;
+  const blurTimerRef = (0, import_react2.useRef)(null);
+  if (!Object.is(prevCommitted, committed)) {
+    setPrevCommitted(committed);
+    if (draft) setDraft(null);
+  }
+  const clearBlurTimer = (0, import_react2.useCallback)(() => {
+    if (blurTimerRef.current) {
+      clearTimeout(blurTimerRef.current);
+      blurTimerRef.current = null;
+    }
+  }, []);
+  (0, import_react2.useEffect)(() => clearBlurTimer, [clearBlurTimer]);
+  const commitDraft = (0, import_react2.useCallback)(() => {
+    clearBlurTimer();
+    const active = draftRef.current;
+    if (!active) return;
+    if (!Object.is(active.value, committedRef.current)) {
+      committedRef.current = active.value;
+      onCommitRef.current(active.value);
+    }
+  }, [clearBlurTimer]);
+  const cancelDraft = (0, import_react2.useCallback)(() => {
+    clearBlurTimer();
+    setSessionActive(false);
+    draftRef.current = null;
+    setDraft(null);
+    setResetKey(key => key + 1);
+  }, [clearBlurTimer]);
+  const handleDraftChange = (0, import_react2.useCallback)(value => {
+    if (mode === "change") {
+      onCommitRef.current(value);
+      return;
+    }
+    draftRef.current = {
+      value
+    };
+    setDraft(draftRef.current);
+    setSessionActive(true);
+  }, [mode]);
+  (0, import_react2.useEffect)(() => {
+    if (!import_tamagui.isWeb || !sessionActive) return void 0;
+    const handleDocKeyDown = event => {
+      if (event.key === "Escape") cancelDraft();
+    };
+    const handleDocPointerDown = event => {
+      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 (!import_tamagui.isWeb) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: children(committed, value => onCommitRef.current(value))
+    });
+  }
+  const handleKeyDown = event => {
+    if (event.key === "Escape") {
+      cancelDraft();
+      return;
+    }
+    if (event.key === "Enter" && mode === "confirm") {
+      const target = event.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) {
+        target.blur?.();
+        commitDraft();
+      }
+    }
+  };
+  const handleBlur = () => {
+    clearBlurTimer();
+    blurTimerRef.current = setTimeout(() => {
+      blurTimerRef.current = null;
+      commitDraft();
+    }, 0);
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    ref: containerRef,
+    style: {
+      display: "contents"
+    },
+    onKeyDown: handleKeyDown,
+    onPointerDownCapture: () => setSessionActive(true),
+    onFocus: mode === "confirm" ? clearBlurTimer : void 0,
+    onBlur: mode === "confirm" ? handleBlur : void 0,
+    children: children(draft ? draft.value : committed, handleDraftChange)
+  }, resetKey);
+}
+const CURRENCY_SYMBOL_TO_CODE = {
+  $: "USD",
+  "\u20AC": "EUR",
+  "\xA3": "GBP",
+  "\xA5": "JPY",
+  "\u20B9": "INR",
+  "\u20A9": "KRW",
+  "\u20BD": "RUB",
+  R$: "BRL"
+};
+const currencyCodeCache = /* @__PURE__ */new Map();
+function normalizeCurrencyCode(currency) {
+  if (typeof currency !== "string" || !currency) return void 0;
+  if (currencyCodeCache.has(currency)) return currencyCodeCache.get(currency);
+  const mapped = CURRENCY_SYMBOL_TO_CODE[currency] ?? currency;
+  let resolved;
+  try {
+    new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: mapped
+    });
+    resolved = mapped;
+  } catch {
+    resolved = void 0;
+  }
+  currencyCodeCache.set(currency, resolved);
+  return resolved;
+}
 function CellWrapper({
   children,
   justify = "flex-start",
   gap,
   minWidth
 }) {
+  const {
+    control
+  } = (0, import_theme.useResolvedKnobs)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: justify,
+    flexDirection: "column",
+    flexGrow: 1,
+    justifyContent: "center",
+    alignItems: justify === "flex-start" ? "stretch" : justify,
     width: "100%",
+    maxWidth: "100%",
+    ...(import_tamagui.isWeb ? {
+      overflowX: "clip",
+      overflowY: "visible"
+    } : void 0),
     gap,
     minWidth,
+    ...(import_tamagui.isWeb ? {
+      focusWithinStyle: {
+        ...control.focusVisibleKnobProps
+      }
+    } : void 0),
     children
   });
-}
-var DataTableCell_default = DataTableCell;
+}