@multiplatform.one/table 6.1.0 → 6.4.0

package/dist/esm/components/DataTableCell/index.mjs

@@ -1,11 +1,14 @@
-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 { 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.mjs";
+import { CellOptionsEditor } from "./CellOptionsEditor.mjs";
 import { Star } from "@phosphor-icons/react";
 import { RichTextEditor } from "@multiplatform.one/rich-text";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback } from "react";
-import { View } from "tamagui";
-import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { View, isWeb } from "tamagui";
+import { alignToFlex, getDefaultColumnAlign } from "../../utils/columnAlign.mjs";
+import { t } from "../../shared/t.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DataTableCell({
   value,
   field = "input",
@@ -13,7 +16,8 @@ function DataTableCell({
   onChange,
   readOnly = false,
   disabled = false,
-  columnId: _columnId,
+  columnId,
+  columnLabel,
   rowIndex: _rowIndex,
   rowData,
   size,
@@ -49,22 +53,37 @@ function DataTableCell({
     render,
     ...restProps
   } = fieldProps;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   const handleChange = useCallback(newValue => {
     if (readOnly || disabled) return;
-    onChange(newValue);
-  }, [onChange, readOnly, disabled]);
+    onChangeRef.current(newValue);
+  }, [readOnly, disabled]);
+  const 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) {
+    const 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
       })
     });
@@ -78,7 +97,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":
@@ -88,7 +111,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 ─────────────────────────────────────
@@ -102,7 +129,8 @@ function DataTableCell({
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
         })
       });
     case "combobox":
@@ -115,19 +143,30 @@ function DataTableCell({
           readOnly,
           placeholder,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
         })
       });
     case "radiogroup":
       return /* @__PURE__ */jsx(CellWrapper, {
-        children: /* @__PURE__ */jsx(RadioGroup, {
-          value: value != null ? String(value) : "",
-          onValueChange: handleChange,
-          options: options ?? [],
+        children: /* @__PURE__ */jsx(CellOptionsEditor, {
+          field: "radiogroup",
+          value,
+          fieldProps,
           disabled: disabled || readOnly,
-          size: knobProps.sizeToken,
-          orientation: "horizontal",
-          ...restProps
+          label: restProps["aria-label"] ?? columnLabel ?? columnId,
+          children: close => /* @__PURE__ */jsx(RadioGroup, {
+            value: value != null ? String(value) : "",
+            onValueChange: next => {
+              handleChange(next);
+              close();
+            },
+            options: options ?? [],
+            disabled: disabled || readOnly,
+            size: knobProps.sizeToken,
+            orientation: "vertical",
+            ...restProps
+          })
         })
       });
     case "togglegroup":
@@ -144,43 +183,74 @@ function DataTableCell({
       });
     // ─── Numeric inputs ───────────────────────────────────────
     case "stepper":
-      return /* @__PURE__ */jsx(CellWrapper, {
-        children: /* @__PURE__ */jsx(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__ */
+        jsx(CellWrapper, {
+          justify: isWeb ? cellJustify : "flex-start",
+          children: /* @__PURE__ */jsx(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(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__ */jsx(CellWrapper, {
-        minWidth: 120,
-        children: /* @__PURE__ */jsx(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__ */
+        jsx(CellWrapper, {
+          justify: "flex-start",
+          minWidth: 120,
+          children: /* @__PURE__ */jsx(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__ */jsx(CellWrapper, {
+        justify: cellJustify,
         minWidth: 120,
         children: /* @__PURE__ */jsx(Progress, {
           value: value != null ? Number(value) : 0,
           size: knobProps.sizeToken,
-          ...restProps
+          ...restProps,
+          progressProps: {
+            width: "100%",
+            minWidth: 0,
+            ...restProps.progressProps
+          }
         })
       });
     case "rating":
@@ -194,8 +264,9 @@ function DataTableCell({
             onChange: v => handleChange(Math.round(v * stars)),
             disabled: disabled || readOnly,
             maxStars: stars,
-            starIcon: restProps.starIcon ?? Star,
-            size: knobProps.sizeToken
+            starIcon: restProps.starIcon ?? CellStar,
+            size: knobProps.sizeToken,
+            compact: true
           })
         });
       }
@@ -207,7 +278,7 @@ function DataTableCell({
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date",
+          placeholder: placeholder || t("Select date"),
           minDate,
           maxDate,
           size: knobProps.sizeToken,
@@ -221,7 +292,7 @@ function DataTableCell({
           onValueChange: handleChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Select date & time",
+          placeholder: placeholder || t("Select date & time"),
           minDate,
           maxDate,
           timeFormat,
@@ -235,7 +306,7 @@ function DataTableCell({
           value: value ?? "",
           onChange: handleChange,
           disabled,
-          placeholder: placeholder || "Select time",
+          placeholder: placeholder || t("Select time"),
           timeFormat,
           size: knobProps.sizeToken,
           ...restProps
@@ -243,35 +314,47 @@ function DataTableCell({
       });
     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: (draftValue, onDraftChange) => /* @__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: (draftValue, onDraftChange) => /* @__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
         })
@@ -291,28 +374,46 @@ function DataTableCell({
       });
     case "phoneinput":
       return /* @__PURE__ */jsx(CellWrapper, {
-        children: /* @__PURE__ */jsx(PhoneInput, {
-          defaultValue: value ?? "",
-          disabled,
-          readOnly,
-          placeholder: placeholder || "Phone number",
-          defaultCountry,
-          size: knobProps.sizeToken,
-          ...restProps
+        children: /* @__PURE__ */jsx(DraftFieldEditor, {
+          committed: value,
+          onCommit: handleChange,
+          children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(PhoneInput, {
+            defaultValue: 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 ?? "",
-          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__ */
+        jsx(CellWrapper, {
+          justify: isWeb ? "center" : "flex-start",
+          children: /* @__PURE__ */jsx(DraftFieldEditor, {
+            committed: value,
+            onCommit: handleChange,
+            children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(OTPInput, {
+              value: draftValue ?? "",
+              onChange: onDraftChange,
+              disabled: disabled || readOnly,
+              length: otpLength ?? 6,
+              size: knobProps.sizeToken,
+              ...restProps
+            })
+          })
         })
-      });
+      );
     case "mentioninput":
       return /* @__PURE__ */jsx(CellModalEditor, {
         field: "mentioninput",
@@ -320,12 +421,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit text",
-        children: /* @__PURE__ */jsx(MentionInput, {
-          defaultValue: value ?? "",
+        onCommit: handleChange,
+        title: t("Edit text"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(MentionInput, {
+          defaultValue: draftValue ?? "",
+          onTextChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Enter text...",
+          placeholder: placeholder || t("Enter text..."),
           mentions: mentions ? [{
             trigger: "@",
             data: mentions
@@ -338,16 +441,33 @@ function DataTableCell({
         })
       });
     case "barcode":
-      return /* @__PURE__ */jsx(CellWrapper, {
-        children: /* @__PURE__ */jsx(Barcode, {
-          value: 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: (draftValue, onDraftChange) => /* @__PURE__ */jsxs(View, {
+          flexDirection: "column",
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(Barcode, {
+            value: String(draftValue ?? ""),
+            onChange: onDraftChange,
+            disabled,
+            readOnly,
+            size: knobProps.sizeToken,
+            barcodeIcon: restProps.barcodeIcon,
+            scanIcon: restProps.scanIcon,
+            stopIcon: restProps.stopIcon,
+            ...restProps
+          }), /* @__PURE__ */jsx(BarcodePreview, {
+            value: String(draftValue ?? ""),
+            height: 64,
+            moduleWidth: 2,
+            showText: true
+          })]
         })
       });
     // ─── File/media inputs ────────────────────────────────────
@@ -358,12 +478,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Upload file",
-        children: /* @__PURE__ */jsx(FileUpload, {
-          defaultValue: value,
+        onCommit: handleChange,
+        title: t("Upload file"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(FileUpload, {
+          defaultValue: draftValue,
+          onValueChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Upload file",
+          placeholder: placeholder || t("Upload file"),
           accept: restProps.accept,
           size: knobProps.sizeToken,
           ...restProps
@@ -376,10 +498,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Image",
-        children: /* @__PURE__ */jsx(ImageField, {
-          value,
-          onValueChange: handleChange,
+        onCommit: handleChange,
+        title: t("Image"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(ImageField, {
+          value: draftValue,
+          onValueChange: onDraftChange,
           disabled,
           readOnly,
           imageWidth: 200,
@@ -395,10 +518,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Signature",
-        children: /* @__PURE__ */jsx(Signature, {
-          value: value ?? "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: t("Signature"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(Signature, {
+          value: draftValue ?? "",
+          onChange: onDraftChange,
           disabled,
           size: knobProps.sizeToken,
           width: restProps.width ?? 600,
@@ -414,10 +538,11 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Location",
-        children: /* @__PURE__ */jsx(Geolocation, {
-          value: typeof value === "string" ? value : value ? JSON.stringify(value) : "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: t("Location"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(Geolocation, {
+          value: typeof draftValue === "string" ? draftValue : draftValue ? JSON.stringify(draftValue) : "",
+          onChange: onDraftChange,
           disabled,
           size: knobProps.sizeToken,
           locationIcon: restProps.locationIcon,
@@ -434,13 +559,14 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit",
-        children: /* @__PURE__ */jsx(RichTextEditor, {
-          value: value ?? "",
-          onChange: handleChange,
+        onCommit: handleChange,
+        title: t("Edit"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(RichTextEditor, {
+          value: draftValue ?? "",
+          onChange: onDraftChange,
           disabled,
           readOnly,
-          placeholder: placeholder || "Write something...",
+          placeholder: placeholder || t("Write something..."),
           minHeight: restProps.minHeight ?? 240,
           size: knobProps.sizeToken,
           ...restProps
@@ -453,11 +579,12 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit markdown",
-        children: /* @__PURE__ */jsx(TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Markdown...",
+        onCommit: handleChange,
+        title: t("Edit markdown"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(TextArea, {
+          value: draftValue != null ? String(draftValue) : "",
+          onChangeText: onDraftChange,
+          placeholder: placeholder || t("Markdown..."),
           disabled,
           readOnly,
           size: knobProps.sizeToken,
@@ -471,11 +598,12 @@ function DataTableCell({
         fieldProps,
         disabled,
         readOnly,
-        title: "Edit code",
-        children: /* @__PURE__ */jsx(TextArea, {
-          value: value != null ? String(value) : "",
-          onChangeText: handleChange,
-          placeholder: placeholder || "Code...",
+        onCommit: handleChange,
+        title: t("Edit code"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */jsx(TextArea, {
+          value: draftValue != null ? String(draftValue) : "",
+          onChangeText: onDraftChange,
+          placeholder: placeholder || t("Code..."),
           disabled,
           readOnly,
           size: knobProps.sizeToken,
@@ -485,47 +613,297 @@ function DataTableCell({
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
       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: restProps["aria-label"] ?? columnLabel ?? columnId,
+          restProps
         })
       });
     case "input":
     default:
       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: restProps["aria-label"] ?? columnLabel ?? columnId,
+          restProps
         })
       });
   }
 }
+function CellStar(props) {
+  return /* @__PURE__ */jsx(Star, {
+    ...props,
+    size: 16
+  });
+}
+function InlineTextEditor({
+  value,
+  onCommit,
+  multiline,
+  placeholder,
+  disabled,
+  readOnly,
+  sizeToken,
+  ariaLabel,
+  restProps
+}) {
+  const committed = value != null ? String(value) : "";
+  const [draft, setDraft] = useState(committed);
+  const [prevCommitted, setPrevCommitted] = useState(committed);
+  const [resetKey, setResetKey] = useState(0);
+  const draftRef = useRef(draft);
+  draftRef.current = draft;
+  const committedRef = useRef(committed);
+  committedRef.current = committed;
+  if (prevCommitted !== committed) {
+    setPrevCommitted(committed);
+    setDraft(committed);
+  }
+  const commit = useCallback(() => {
+    if (draftRef.current !== committedRef.current) {
+      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 => {
+    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__ */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({
+  committed,
+  onCommit,
+  mode = "confirm",
+  children
+}) {
+  const [draft, setDraft] = useState(null);
+  const [resetKey, setResetKey] = useState(0);
+  const [prevCommitted, setPrevCommitted] = useState(committed);
+  const [sessionActive, setSessionActive] = useState(false);
+  const containerRef = useRef(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(null);
+  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)) {
+      committedRef.current = active.value;
+      onCommitRef.current(active.value);
+    }
+  }, [clearBlurTimer]);
+  const cancelDraft = useCallback(() => {
+    clearBlurTimer();
+    setSessionActive(false);
+    draftRef.current = null;
+    setDraft(null);
+    setResetKey(key => key + 1);
+  }, [clearBlurTimer]);
+  const handleDraftChange = useCallback(value => {
+    if (mode === "change") {
+      onCommitRef.current(value);
+      return;
+    }
+    draftRef.current = {
+      value
+    };
+    setDraft(draftRef.current);
+    setSessionActive(true);
+  }, [mode]);
+  useEffect(() => {
+    if (!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 (!isWeb) {
+    return /* @__PURE__ */jsx(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__ */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
+  } = 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%",
+    ...(isWeb ? {
+      overflowX: "clip",
+      overflowY: "visible"
+    } : void 0),
     gap,
     minWidth,
+    ...(isWeb ? {
+      focusWithinStyle: {
+        ...control.focusVisibleKnobProps
+      }
+    } : void 0),
     children
   });
 }
-var DataTableCell_default = DataTableCell;
-export { DataTableCell, DataTableCell_default as default };
+export { DataTableCell };
 //# sourceMappingURL=index.mjs.map