@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/esm/components/DataTableCell/index.native.js

@@ -1,11 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox, Switch, Select, Combobox, Input, TextArea, Slider, Progress, RadioGroup, ToggleGroup, DatePicker, DatetimePicker, TimePicker, DateRangePicker, MultiDatePicker, Stepper, Duration, PhoneInput, Barcode, MentionInput, OTPInput, Rating, FileUpload, ImageField, Signature, Geolocation, ColorPicker, FieldDisplay } from "@multiplatform.one/forms";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Checkbox, Switch, Select, Combobox, Input, TextArea, Slider, Progress, RadioGroup, ToggleGroup, DatePicker, DatetimePicker, TimePicker, DateRangePicker, MultiDatePicker, Stepper, Duration, PhoneInput, Barcode, BarcodePreview, MentionInput, OTPInput, Rating, FileUpload, ImageField, Signature, Geolocation, ColorPicker, FieldDisplay } from "@multiplatform.one/forms";
 import { CellModalEditor } from "./CellModalEditor.native.js";
+import { CellOptionsEditor } from "./CellOptionsEditor.native.js";
 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 { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.native.js";
+import { t } from "../../shared/t.native.js";
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
 function DataTableCell(param) {
   var {
     value,
@@ -14,7 +26,8 @@ function DataTableCell(param) {
     onChange,
     readOnly = false,
     disabled = false,
-    columnId: _columnId,
+    columnId,
+    columnLabel,
     rowIndex: _rowIndex,
     rowData,
     size,
@@ -50,22 +63,37 @@ function DataTableCell(param) {
     render,
     ...restProps
   } = fieldProps;
+  var onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   var handleChange = useCallback(function (newValue) {
     if (readOnly || disabled) return;
-    onChange(newValue);
-  }, [onChange, readOnly, disabled]);
+    onChangeRef.current(newValue);
+  }, [readOnly, disabled]);
+  var cellJustify = alignToFlex(getDefaultColumnAlign({
+    id: columnId,
+    field,
+    fieldProps
+  }));
   if (field === "custom" && render) {
     return /* @__PURE__ */_jsx(CellWrapper, {
-      children: render(value, rowData, handleChange)
+      justify: cellJustify,
+      children: render(value, rowData, handleChange, {
+        readOnly,
+        disabled
+      })
     });
   }
   if (readOnly) {
+    var displayFieldProps = fieldProps.currency != null ? {
+      ...fieldProps,
+      currency: normalizeCurrencyCode(fieldProps.currency)
+    } : fieldProps;
     return /* @__PURE__ */_jsx(CellWrapper, {
-      justify: field === "stepper" || field === "slider" ? "flex-end" : "flex-start",
+      justify: cellJustify,
       children: /* @__PURE__ */_jsx(FieldDisplay, {
         field,
         value,
-        fieldProps,
+        fieldProps: displayFieldProps,
         linkedValue: _linkedValue
       })
     });
@@ -73,27 +101,42 @@ function DataTableCell(param) {
   switch (field) {
     // ─── Boolean inputs ───────────────────────────────────────
     case "checkbox":
+      var _ref, _restProps_arialabel;
       return /* @__PURE__ */_jsx(CellWrapper, {
         justify: "center",
         children: /* @__PURE__ */_jsx(Checkbox, {
           checked: Boolean(value),
           onCheckedChange: handleChange,
           disabled: disabled || readOnly,
-          ...restProps
+          ...restProps,
+          // Chromeless in-cell control has no field label — name it from
+          // the column header (same fallback chain as select/combobox).
+          checkboxProps: {
+            "aria-label": (_ref = (_restProps_arialabel = restProps["aria-label"]) !== null && _restProps_arialabel !== void 0 ? _restProps_arialabel : columnLabel) !== null && _ref !== void 0 ? _ref : columnId,
+            ...restProps.checkboxProps
+          }
         })
       });
     case "switch":
+      var _ref1, _restProps_arialabel1;
       return /* @__PURE__ */_jsx(CellWrapper, {
         justify: "center",
         children: /* @__PURE__ */_jsx(Switch, {
           checked: Boolean(value),
           onCheckedChange: handleChange,
           disabled: disabled || readOnly,
-          ...restProps
+          ...restProps,
+          // Chromeless in-cell control has no field label — name it from
+          // the column header (same fallback chain as select/combobox).
+          switchProps: {
+            "aria-label": (_ref1 = (_restProps_arialabel1 = restProps["aria-label"]) !== null && _restProps_arialabel1 !== void 0 ? _restProps_arialabel1 : columnLabel) !== null && _ref1 !== void 0 ? _ref1 : columnId,
+            ...restProps.switchProps
+          }
         })
       });
     // ─── Selection inputs ─────────────────────────────────────
     case "select":
+      var _ref2, _restProps_arialabel2;
       return /* @__PURE__ */_jsx(CellWrapper, {
         children: /* @__PURE__ */_jsx(Select, {
           value: value != null ? String(value) : "",
@@ -103,10 +146,12 @@ function DataTableCell(param) {
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": (_ref2 = (_restProps_arialabel2 = restProps["aria-label"]) !== null && _restProps_arialabel2 !== void 0 ? _restProps_arialabel2 : columnLabel) !== null && _ref2 !== void 0 ? _ref2 : columnId
         })
       });
     case "combobox":
+      var _ref3, _restProps_arialabel3;
       return /* @__PURE__ */_jsx(CellWrapper, {
         children: /* @__PURE__ */_jsx(Combobox, {
           value: value != null ? String(value) : "",
@@ -116,19 +161,33 @@ function DataTableCell(param) {
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": (_ref3 = (_restProps_arialabel3 = restProps["aria-label"]) !== null && _restProps_arialabel3 !== void 0 ? _restProps_arialabel3 : columnLabel) !== null && _ref3 !== void 0 ? _ref3 : columnId
         })
       });
     case "radiogroup":
+      var _ref4, _restProps_arialabel4;
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(RadioGroup, {
-          value: value != null ? String(value) : "",
-          onValueChange: handleChange,
-          options: options !== null && options !== void 0 ? options : [],
+        children: /* @__PURE__ */_jsx(CellOptionsEditor, {
+          field: "radiogroup",
+          value,
+          fieldProps,
           disabled: disabled || readOnly,
-          size: knobProps.sizeToken,
-          orientation: "horizontal",
-          ...restProps
+          label: (_ref4 = (_restProps_arialabel4 = restProps["aria-label"]) !== null && _restProps_arialabel4 !== void 0 ? _restProps_arialabel4 : columnLabel) !== null && _ref4 !== void 0 ? _ref4 : columnId,
+          children: function children(close) {
+            return /* @__PURE__ */_jsx(RadioGroup, {
+              value: value != null ? String(value) : "",
+              onValueChange: function onValueChange(next) {
+                handleChange(next);
+                close();
+              },
+              options: options !== null && options !== void 0 ? options : [],
+              disabled: disabled || readOnly,
+              size: knobProps.sizeToken,
+              orientation: "vertical",
+              ...restProps
+            });
+          }
         })
       });
     case "togglegroup":
@@ -145,49 +204,87 @@ function DataTableCell(param) {
       });
     // ─── Numeric inputs ───────────────────────────────────────
     case "stepper":
-      return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(Stepper, {
-          defaultValue: value != null ? Number(value) : void 0,
-          onChange: function onChange2(v) {
-            return handleChange(v);
-          },
-          min,
-          max,
-          step: step !== null && step !== void 0 ? step : 1,
-          precision: precision !== null && precision !== void 0 ? precision : 0,
-          disabled,
-          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
+      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__ */
+        _jsx(CellWrapper, {
+          justify: isWeb ? cellJustify : "flex-start",
+          children: /* @__PURE__ */_jsx(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: function children(draftValue, onDraftChange) {
+              var _ref7, _restProps_arialabel7;
+              return /* @__PURE__ */_jsx(Stepper, {
+                defaultValue: draftValue != null ? Number(draftValue) : void 0,
+                onChange: onDraftChange,
+                min,
+                max,
+                step: step !== null && step !== void 0 ? step : 1,
+                precision: precision !== null && precision !== void 0 ? precision : 0,
+                disabled,
+                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": (_ref7 = (_restProps_arialabel7 = restProps["aria-label"]) !== null && _restProps_arialabel7 !== void 0 ? _restProps_arialabel7 : columnLabel) !== null && _ref7 !== void 0 ? _ref7 : columnId,
+                  ...restProps.inputProps
+                }
+              });
+            }
+          })
         })
-      });
+      );
     case "slider":
-      return /* @__PURE__ */_jsx(CellWrapper, {
-        minWidth: 120,
-        children: /* @__PURE__ */_jsx(Slider, {
-          value: [value != null ? Number(value) : min !== null && min !== void 0 ? min : 0],
-          onValueChange: readOnly ? void 0 : function (values) {
-            return handleChange(values[0]);
-          },
-          min: min !== null && min !== void 0 ? min : 0,
-          max: max !== null && max !== void 0 ? max : 100,
-          step: step !== null && step !== void 0 ? 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__ */
+        _jsx(CellWrapper, {
+          justify: "flex-start",
+          minWidth: 120,
+          children: /* @__PURE__ */_jsx(Slider, {
+            value: [value != null ? Number(value) : min !== null && min !== void 0 ? min : 0],
+            onValueChange: readOnly ? void 0 : function (values) {
+              return handleChange(values[0]);
+            },
+            min: min !== null && min !== void 0 ? min : 0,
+            max: max !== null && max !== void 0 ? max : 100,
+            step: step !== null && step !== void 0 ? step : 1,
+            disabled,
+            size: knobProps.sizeToken,
+            ...restProps
+          })
         })
-      });
+      );
     case "progress":
       return /* @__PURE__ */_jsx(CellWrapper, {
+        justify: cellJustify,
         minWidth: 120,
         children: /* @__PURE__ */_jsx(Progress, {
           value: value != null ? Number(value) : 0,
           size: knobProps.sizeToken,
-          ...restProps
+          ...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
+          }
         })
       });
     case "rating":
@@ -204,8 +301,9 @@ function DataTableCell(param) {
             },
             disabled: disabled || readOnly,
             maxStars: stars,
-            starIcon: (_restProps_starIcon = restProps.starIcon) !== null && _restProps_starIcon !== void 0 ? _restProps_starIcon : Star,
-            size: knobProps.sizeToken
+            starIcon: (_restProps_starIcon = restProps.starIcon) !== null && _restProps_starIcon !== void 0 ? _restProps_starIcon : CellStar,
+            size: knobProps.sizeToken,
+            compact: true
           })
         });
       }
@@ -217,7 +315,7 @@ function DataTableCell(param) {
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date",
+          placeholder: placeholder || t("Select date"),
           minDate,
           maxDate,
           size: knobProps.sizeToken,
@@ -231,7 +329,7 @@ function DataTableCell(param) {
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date & time",
+          placeholder: placeholder || t("Select date & time"),
           minDate,
           maxDate,
           timeFormat,
@@ -245,7 +343,7 @@ function DataTableCell(param) {
           value: value !== null && value !== void 0 ? value : "",
           onChange: handleChange,
           disabled,
-          placeholder: placeholder || "Select time",
+          placeholder: placeholder || t("Select time"),
           timeFormat,
           size: knobProps.sizeToken,
           ...restProps
@@ -253,35 +351,51 @@ function DataTableCell(param) {
       });
     case "daterangepicker":
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(DateRangePicker, {
-          defaultValue: value,
-          disabled,
-          placeholder: placeholder || "Select range",
-          minDate,
-          maxDate,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */_jsx(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          mode: "change",
+          children: function children(draftValue, onDraftChange) {
+            return /* @__PURE__ */_jsx(DateRangePicker, {
+              value: draftValue,
+              onChange: onDraftChange,
+              disabled,
+              placeholder: placeholder || t("Select range"),
+              minDate,
+              maxDate,
+              size: knobProps.sizeToken,
+              ...restProps
+            });
+          }
         })
       });
     case "multidatepicker":
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(MultiDatePicker, {
-          defaultValue: value,
-          disabled,
-          placeholder: placeholder || "Select dates",
-          minDate,
-          maxDate,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */_jsx(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          children: function children(draftValue, onDraftChange) {
+            return /* @__PURE__ */_jsx(MultiDatePicker, {
+              value: draftValue,
+              onChange: onDraftChange,
+              disabled,
+              placeholder: placeholder || t("Select dates"),
+              minDate,
+              maxDate,
+              size: knobProps.sizeToken,
+              ...restProps
+            });
+          }
         })
       });
     case "duration":
       return /* @__PURE__ */_jsx(CellWrapper, {
+        justify: cellJustify,
         children: /* @__PURE__ */_jsx(Duration, {
           value: value != null ? Number(value) : 0,
           onChange: handleChange,
           disabled,
-          placeholder: placeholder || "Select duration",
+          placeholder: placeholder || t("Select duration"),
           size: knobProps.sizeToken,
           ...restProps
         })
@@ -301,28 +415,50 @@ function DataTableCell(param) {
       });
     case "phoneinput":
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(PhoneInput, {
-          defaultValue: value !== null && value !== void 0 ? value : "",
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Phone number",
-          defaultCountry,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */_jsx(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          children: function children(draftValue, onDraftChange) {
+            return /* @__PURE__ */_jsx(PhoneInput, {
+              defaultValue: draftValue !== null && draftValue !== void 0 ? draftValue : "",
+              onChange: onDraftChange,
+              disabled,
+              readOnly,
+              placeholder: placeholder || t("Phone number"),
+              defaultCountry,
+              size: knobProps.sizeToken,
+              ...restProps
+            });
+          }
         })
       });
     case "otp":
-      return /* @__PURE__ */_jsx(CellWrapper, {
-        justify: "center",
-        children: /* @__PURE__ */_jsx(OTPInput, {
-          value: value !== null && value !== void 0 ? value : "",
-          onChange: handleChange,
-          disabled: disabled || readOnly,
-          length: otpLength !== null && otpLength !== void 0 ? 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__ */
+        _jsx(CellWrapper, {
+          justify: isWeb ? "center" : "flex-start",
+          children: /* @__PURE__ */_jsx(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: function children(draftValue, onDraftChange) {
+              return /* @__PURE__ */_jsx(OTPInput, {
+                value: draftValue !== null && draftValue !== void 0 ? draftValue : "",
+                onChange: onDraftChange,
+                disabled: disabled || readOnly,
+                length: otpLength !== null && otpLength !== void 0 ? otpLength : 6,
+                size: knobProps.sizeToken,
+                ...restProps
+              });
+            }
+          })
         })
-      });
+      );
     case "mentioninput":
       return /* @__PURE__ */_jsx(CellModalEditor, {
         field: "mentioninput",
@@ -330,35 +466,58 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit text",
-        children: /* @__PURE__ */_jsx(MentionInput, {
-          defaultValue: value !== null && value !== void 0 ? value : "",
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Enter text...",
-          mentions: mentions ? [{
-            trigger: "@",
-            data: mentions
-          }] : [{
-            trigger: "@",
-            data: []
-          }],
-          size: knobProps.sizeToken,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Edit text"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(MentionInput, {
+            defaultValue: draftValue !== null && draftValue !== void 0 ? draftValue : "",
+            onTextChange: onDraftChange,
+            disabled,
+            readOnly,
+            placeholder: placeholder || t("Enter text..."),
+            mentions: mentions ? [{
+              trigger: "@",
+              data: mentions
+            }] : [{
+              trigger: "@",
+              data: []
+            }],
+            size: knobProps.sizeToken,
+            ...restProps
+          });
+        }
       });
     case "barcode":
-      return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(Barcode, {
-          value: value !== null && value !== void 0 ? value : "",
-          onChange: handleChange,
-          disabled,
-          size: knobProps.sizeToken,
-          barcodeIcon: restProps.barcodeIcon,
-          scanIcon: restProps.scanIcon,
-          stopIcon: restProps.stopIcon,
-          ...restProps
-        })
+      return /* @__PURE__ */_jsx(CellModalEditor, {
+        field: "barcode",
+        value,
+        fieldProps,
+        disabled,
+        readOnly,
+        onCommit: handleChange,
+        title: t("Barcode"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsxs(View, {
+            flexDirection: "column",
+            ...knobProps.gap,
+            children: [/* @__PURE__ */_jsx(Barcode, {
+              value: String(draftValue !== null && draftValue !== void 0 ? draftValue : ""),
+              onChange: onDraftChange,
+              disabled,
+              readOnly,
+              size: knobProps.sizeToken,
+              barcodeIcon: restProps.barcodeIcon,
+              scanIcon: restProps.scanIcon,
+              stopIcon: restProps.stopIcon,
+              ...restProps
+            }), /* @__PURE__ */_jsx(BarcodePreview, {
+              value: String(draftValue !== null && draftValue !== void 0 ? draftValue : ""),
+              height: 64,
+              moduleWidth: 2,
+              showText: true
+            })]
+          });
+        }
       });
     // ─── File/media inputs ────────────────────────────────────
     case "fileupload":
@@ -368,16 +527,20 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Upload file",
-        children: /* @__PURE__ */_jsx(FileUpload, {
-          defaultValue: value,
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Upload file",
-          accept: restProps.accept,
-          size: knobProps.sizeToken,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Upload file"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(FileUpload, {
+            defaultValue: draftValue,
+            onValueChange: onDraftChange,
+            disabled,
+            readOnly,
+            placeholder: placeholder || t("Upload file"),
+            accept: restProps.accept,
+            size: knobProps.sizeToken,
+            ...restProps
+          });
+        }
       });
     case "image":
       return /* @__PURE__ */_jsx(CellModalEditor, {
@@ -386,37 +549,43 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Image",
-        children: /* @__PURE__ */_jsx(ImageField, {
-          value,
-          onValueChange: handleChange,
-          disabled,
-          readOnly,
-          imageWidth: 200,
-          imageHeight: 200,
-          showRemove: !readOnly,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Image"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(ImageField, {
+            value: draftValue,
+            onValueChange: onDraftChange,
+            disabled,
+            readOnly,
+            imageWidth: 200,
+            imageHeight: 200,
+            showRemove: !readOnly,
+            ...restProps
+          });
+        }
       });
     case "signature":
-      var _restProps_width, _restProps_height;
       return /* @__PURE__ */_jsx(CellModalEditor, {
         field: "signature",
         value,
         fieldProps,
         disabled,
         readOnly,
-        title: "Signature",
-        children: /* @__PURE__ */_jsx(Signature, {
-          value: value !== null && value !== void 0 ? value : "",
-          onChange: handleChange,
-          disabled,
-          size: knobProps.sizeToken,
-          width: (_restProps_width = restProps.width) !== null && _restProps_width !== void 0 ? _restProps_width : 600,
-          height: (_restProps_height = restProps.height) !== null && _restProps_height !== void 0 ? _restProps_height : 240,
-          clearIcon: restProps.clearIcon,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Signature"),
+        children: function children(draftValue, onDraftChange) {
+          var _restProps_width, _restProps_height;
+          return /* @__PURE__ */_jsx(Signature, {
+            value: draftValue !== null && draftValue !== void 0 ? draftValue : "",
+            onChange: onDraftChange,
+            disabled,
+            size: knobProps.sizeToken,
+            width: (_restProps_width = restProps.width) !== null && _restProps_width !== void 0 ? _restProps_width : 600,
+            height: (_restProps_height = restProps.height) !== null && _restProps_height !== void 0 ? _restProps_height : 240,
+            clearIcon: restProps.clearIcon,
+            ...restProps
+          });
+        }
       });
     case "geolocation":
       return /* @__PURE__ */_jsx(CellModalEditor, {
@@ -425,38 +594,44 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Location",
-        children: /* @__PURE__ */_jsx(Geolocation, {
-          value: typeof value === "string" ? value : value ? JSON.stringify(value) : "",
-          onChange: handleChange,
-          disabled,
-          size: knobProps.sizeToken,
-          locationIcon: restProps.locationIcon,
-          expandIcon: restProps.expandIcon,
-          renderMap: restProps.renderMap,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Location"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(Geolocation, {
+            value: typeof draftValue === "string" ? draftValue : draftValue ? JSON.stringify(draftValue) : "",
+            onChange: onDraftChange,
+            disabled,
+            size: knobProps.sizeToken,
+            locationIcon: restProps.locationIcon,
+            expandIcon: restProps.expandIcon,
+            renderMap: restProps.renderMap,
+            ...restProps
+          });
+        }
       });
     // ─── Rich text / code editors ─────────────────────────────
     case "richtexteditor":
-      var _restProps_minHeight;
       return /* @__PURE__ */_jsx(CellModalEditor, {
         field: "richtexteditor",
         value,
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit",
-        children: /* @__PURE__ */_jsx(RichTextEditor, {
-          value: value !== null && value !== void 0 ? value : "",
-          onChange: handleChange,
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Write something...",
-          minHeight: (_restProps_minHeight = restProps.minHeight) !== null && _restProps_minHeight !== void 0 ? _restProps_minHeight : 240,
-          size: knobProps.sizeToken,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Edit"),
+        children: function children(draftValue, onDraftChange) {
+          var _restProps_minHeight;
+          return /* @__PURE__ */_jsx(RichTextEditor, {
+            value: draftValue !== null && draftValue !== void 0 ? draftValue : "",
+            onChange: onDraftChange,
+            disabled,
+            readOnly,
+            placeholder: placeholder || t("Write something..."),
+            minHeight: (_restProps_minHeight = restProps.minHeight) !== null && _restProps_minHeight !== void 0 ? _restProps_minHeight : 240,
+            size: knobProps.sizeToken,
+            ...restProps
+          });
+        }
       });
     case "markdowneditor":
       return /* @__PURE__ */_jsx(CellModalEditor, {
@@ -465,16 +640,19 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit markdown",
-        children: /* @__PURE__ */_jsx(TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Markdown...",
-          disabled,
-          readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Edit markdown"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(TextArea, {
+            value: draftValue != null ? String(draftValue) : "",
+            onChangeText: onDraftChange,
+            placeholder: placeholder || t("Markdown..."),
+            disabled,
+            readOnly,
+            size: knobProps.sizeToken,
+            ...restProps
+          });
+        }
       });
     case "codeeditor":
       return /* @__PURE__ */_jsx(CellModalEditor, {
@@ -483,45 +661,307 @@ function DataTableCell(param) {
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit code",
-        children: /* @__PURE__ */_jsx(TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Code...",
-          disabled,
-          readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
-        })
+        onCommit: handleChange,
+        title: t("Edit code"),
+        children: function children(draftValue, onDraftChange) {
+          return /* @__PURE__ */_jsx(TextArea, {
+            value: draftValue != null ? String(draftValue) : "",
+            onChangeText: onDraftChange,
+            placeholder: placeholder || t("Code..."),
+            disabled,
+            readOnly,
+            size: knobProps.sizeToken,
+            ...restProps
+          });
+        }
       });
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
+      var _ref5, _restProps_arialabel5;
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
+        children: /* @__PURE__ */_jsx(InlineTextEditor, {
+          value,
+          onCommit: handleChange,
+          multiline: true,
           placeholder,
           disabled,
           readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
+          sizeToken: knobProps.sizeToken,
+          ariaLabel: (_ref5 = (_restProps_arialabel5 = restProps["aria-label"]) !== null && _restProps_arialabel5 !== void 0 ? _restProps_arialabel5 : columnLabel) !== null && _ref5 !== void 0 ? _ref5 : columnId,
+          restProps
         })
       });
     case "input":
     default:
+      var _ref6, _restProps_arialabel6;
       return /* @__PURE__ */_jsx(CellWrapper, {
-        children: /* @__PURE__ */_jsx(Input, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
+        justify: cellJustify,
+        children: /* @__PURE__ */_jsx(InlineTextEditor, {
+          value,
+          onCommit: handleChange,
           placeholder,
           disabled,
           readOnly,
-          size: knobProps.sizeToken,
-          ...restProps
+          sizeToken: knobProps.sizeToken,
+          ariaLabel: (_ref6 = (_restProps_arialabel6 = restProps["aria-label"]) !== null && _restProps_arialabel6 !== void 0 ? _restProps_arialabel6 : columnLabel) !== null && _ref6 !== void 0 ? _ref6 : columnId,
+          restProps
         })
       });
   }
 }
+function CellStar(props) {
+  return /* @__PURE__ */_jsx(Star, {
+    ...props,
+    size: 16
+  });
+}
+function InlineTextEditor(param) {
+  var {
+    value,
+    onCommit,
+    multiline,
+    placeholder,
+    disabled,
+    readOnly,
+    sizeToken,
+    ariaLabel,
+    restProps
+  } = param;
+  var committed = value != null ? String(value) : "";
+  var [draft, setDraft] = useState(committed);
+  var [prevCommitted, setPrevCommitted] = useState(committed);
+  var [resetKey, setResetKey] = useState(0);
+  var draftRef = useRef(draft);
+  draftRef.current = draft;
+  var committedRef = useRef(committed);
+  committedRef.current = committed;
+  if (prevCommitted !== committed) {
+    setPrevCommitted(committed);
+    setDraft(committed);
+  }
+  var commit = useCallback(function () {
+    if (draftRef.current !== committedRef.current) {
+      committedRef.current = draftRef.current;
+      onCommit(draftRef.current);
+    }
+  }, [onCommit]);
+  var cancel = useCallback(function () {
+    if (draftRef.current === committedRef.current) return;
+    setDraft(committedRef.current);
+    setResetKey(function (key) {
+      return key + 1;
+    });
+  }, []);
+  var handleKeyPress = useCallback(function (event) {
+    var _ref;
+    var _event_nativeEvent;
+    var key = (_ref = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : _event_nativeEvent.key) !== null && _ref !== void 0 ? _ref : event === null || event === void 0 ? void 0 : event.key;
+    if (key === "Escape") cancel();else if (key === "Enter" && !multiline) commit();
+  }, [cancel, commit, multiline]);
+  var {
+    inputProps: userInputProps,
+    textAreaProps: userTextAreaProps,
+    ...fieldRest
+  } = restProps;
+  if (multiline) {
+    return /* @__PURE__ */_jsx(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__ */_jsx(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(param) {
+  var {
+    committed,
+    onCommit,
+    mode = "confirm",
+    children
+  } = param;
+  var [draft, setDraft] = useState(null);
+  var [resetKey, setResetKey] = useState(0);
+  var [prevCommitted, setPrevCommitted] = useState(committed);
+  var [sessionActive, setSessionActive] = useState(false);
+  var containerRef = useRef(null);
+  var draftRef = useRef(draft);
+  draftRef.current = draft;
+  var committedRef = useRef(committed);
+  committedRef.current = committed;
+  var onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
+  var blurTimerRef = useRef(null);
+  if (!Object.is(prevCommitted, committed)) {
+    setPrevCommitted(committed);
+    if (draft) setDraft(null);
+  }
+  var clearBlurTimer = useCallback(function () {
+    if (blurTimerRef.current) {
+      clearTimeout(blurTimerRef.current);
+      blurTimerRef.current = null;
+    }
+  }, []);
+  useEffect(function () {
+    return clearBlurTimer;
+  }, [clearBlurTimer]);
+  var commitDraft = useCallback(function () {
+    clearBlurTimer();
+    var active = draftRef.current;
+    if (!active) return;
+    if (!Object.is(active.value, committedRef.current)) {
+      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]);
+  var cancelDraft = useCallback(function () {
+    clearBlurTimer();
+    setSessionActive(false);
+    draftRef.current = null;
+    setDraft(null);
+    setResetKey(function (key) {
+      return key + 1;
+    });
+  }, [clearBlurTimer]);
+  var handleDraftChange = useCallback(function (value) {
+    if (mode === "change") {
+      onCommitRef.current(value);
+      return;
+    }
+    draftRef.current = {
+      value
+    };
+    setDraft(draftRef.current);
+    setSessionActive(true);
+  }, [mode]);
+  useEffect(function () {
+    if (!isWeb || !sessionActive) return void 0;
+    var handleDocKeyDown = function handleDocKeyDown2(event) {
+      if (event.key === "Escape") cancelDraft();
+    };
+    var handleDocPointerDown = function handleDocPointerDown2(event) {
+      var node = containerRef.current;
+      if (node && _instanceof(event.target, Node) && node.contains(event.target)) return;
+      setSessionActive(false);
+      commitDraft();
+    };
+    document.addEventListener("keydown", handleDocKeyDown, true);
+    document.addEventListener("pointerdown", handleDocPointerDown, true);
+    return function () {
+      document.removeEventListener("keydown", handleDocKeyDown, true);
+      document.removeEventListener("pointerdown", handleDocPointerDown, true);
+    };
+  }, [sessionActive, cancelDraft, commitDraft]);
+  if (!isWeb) {
+    return /* @__PURE__ */_jsx(_Fragment, {
+      children: children(committed, function (value) {
+        return onCommitRef.current(value);
+      })
+    });
+  }
+  var handleKeyDown = function handleKeyDown2(event) {
+    if (event.key === "Escape") {
+      cancelDraft();
+      return;
+    }
+    if (event.key === "Enter" && mode === "confirm") {
+      var target = event.target;
+      if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA")) {
+        var _target_blur;
+        (_target_blur = target.blur) === null || _target_blur === void 0 ? void 0 : _target_blur.call(target);
+        commitDraft();
+      }
+    }
+  };
+  var handleBlur = function handleBlur2() {
+    clearBlurTimer();
+    blurTimerRef.current = setTimeout(function () {
+      blurTimerRef.current = null;
+      commitDraft();
+    }, 0);
+  };
+  return /* @__PURE__ */_jsx("div", {
+    ref: containerRef,
+    style: {
+      display: "contents"
+    },
+    onKeyDown: handleKeyDown,
+    onPointerDownCapture: function onPointerDownCapture() {
+      return setSessionActive(true);
+    },
+    onFocus: mode === "confirm" ? clearBlurTimer : void 0,
+    onBlur: mode === "confirm" ? handleBlur : void 0,
+    children: children(draft ? draft.value : committed, handleDraftChange)
+  }, resetKey);
+}
+var CURRENCY_SYMBOL_TO_CODE = {
+  $: "USD",
+  "\u20AC": "EUR",
+  "\xA3": "GBP",
+  "\xA5": "JPY",
+  "\u20B9": "INR",
+  "\u20A9": "KRW",
+  "\u20BD": "RUB",
+  R$: "BRL"
+};
+var currencyCodeCache = /* @__PURE__ */new Map();
+function normalizeCurrencyCode(currency) {
+  var _CURRENCY_SYMBOL_TO_CODE_currency;
+  if (typeof currency !== "string" || !currency) return void 0;
+  if (currencyCodeCache.has(currency)) return currencyCodeCache.get(currency);
+  var mapped = (_CURRENCY_SYMBOL_TO_CODE_currency = CURRENCY_SYMBOL_TO_CODE[currency]) !== null && _CURRENCY_SYMBOL_TO_CODE_currency !== void 0 ? _CURRENCY_SYMBOL_TO_CODE_currency : currency;
+  var resolved;
+  try {
+    new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: mapped
+    });
+    resolved = mapped;
+  } catch (unused) {
+    resolved = void 0;
+  }
+  currencyCodeCache.set(currency, resolved);
+  return resolved;
+}
 function CellWrapper(param) {
   var {
     children,
@@ -529,16 +969,33 @@ function CellWrapper(param) {
     gap,
     minWidth
   } = param;
+  var {
+    control
+  } = useResolvedKnobs();
   return /* @__PURE__ */_jsx(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",
+      overflowY: "visible"
+    } : void 0),
     gap,
     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
+      }
+    } : void 0),
     children
   });
 }
-var DataTableCell_default = DataTableCell;
-export { DataTableCell, DataTableCell_default as default };
+export { DataTableCell };
 //# sourceMappingURL=index.native.js.map