@multiplatform.one/table 6.6.0 → 7.0.0

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

@@ -58,6 +58,7 @@ function DataTableCell({
     size,
     compact: compact ?? true
   });
+  const cellName = fieldProps["aria-label"] ?? columnLabel ?? columnId;
   const {
     options,
     placeholder,
@@ -153,7 +154,7 @@ function DataTableCell({
           placeholder,
           size: knobProps.sizeToken,
           ...restProps,
-          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
+          "aria-label": restProps["aria-label"] ?? cellName
         })
       });
     case "combobox":
@@ -167,7 +168,7 @@ function DataTableCell({
           placeholder,
           size: knobProps.sizeToken,
           ...restProps,
-          "aria-label": restProps["aria-label"] ?? columnLabel ?? columnId
+          "aria-label": restProps["aria-label"] ?? cellName
         })
       });
     case "radiogroup":
@@ -177,7 +178,7 @@ function DataTableCell({
           value,
           fieldProps,
           disabled: disabled || readOnly,
-          label: restProps["aria-label"] ?? columnLabel ?? columnId,
+          label: cellName,
           children: close => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.RadioGroup, {
             value: value != null ? String(value) : "",
             onValueChange: next => {
@@ -194,14 +195,26 @@ function DataTableCell({
       });
     case "togglegroup":
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ToggleGroup, {
-          value: allowMultiple ? Array.isArray(value) ? value : [] : value,
-          onValueChange: handleChange,
-          options: options ?? [],
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellOptionsEditor.CellOptionsEditor, {
+          field: "togglegroup",
+          value,
+          fieldProps,
           disabled: disabled || readOnly,
-          type: allowMultiple ? "multiple" : "single",
-          size: knobProps.sizeToken,
-          ...restProps
+          label: cellName,
+          dismissOnPick: !allowMultiple,
+          children: close => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ToggleGroup, {
+            value: allowMultiple ? Array.isArray(value) ? value : [] : value,
+            onValueChange: next => {
+              handleChange(next);
+              if (!allowMultiple) close();
+            },
+            options: options ?? [],
+            disabled: disabled || readOnly,
+            type: allowMultiple ? "multiple" : "single",
+            size: knobProps.sizeToken,
+            orientation: "vertical",
+            ...restProps
+          })
         })
       });
     // ─── Numeric inputs ───────────────────────────────────────
@@ -438,13 +451,14 @@ function DataTableCell({
         })
       );
     case "mentioninput":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "mentioninput",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Edit text"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MentionInput, {
           defaultValue: draftValue ?? "",
@@ -464,13 +478,14 @@ function DataTableCell({
         })
       });
     case "barcode":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "barcode",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Barcode"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
           flexDirection: "column",
@@ -495,13 +510,14 @@ function DataTableCell({
       });
     // ─── File/media inputs ────────────────────────────────────
     case "fileupload":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "fileupload",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Upload file"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FileUpload, {
           defaultValue: draftValue,
@@ -515,13 +531,14 @@ function DataTableCell({
         })
       });
     case "image":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "image",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Image"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ImageField, {
           value: draftValue,
@@ -535,13 +552,14 @@ function DataTableCell({
         })
       });
     case "signature":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "signature",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Signature"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Signature, {
           value: draftValue ?? "",
@@ -555,13 +573,14 @@ function DataTableCell({
         })
       });
     case "geolocation":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "geolocation",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         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) : "",
@@ -576,13 +595,14 @@ function DataTableCell({
       });
     // ─── Rich text / code editors ─────────────────────────────
     case "richtexteditor":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "richtexteditor",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Edit"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_rich_text.RichTextEditor, {
           value: draftValue ?? "",
@@ -596,13 +616,14 @@ function DataTableCell({
         })
       });
     case "markdowneditor":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "markdowneditor",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Edit markdown"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
           value: draftValue != null ? String(draftValue) : "",
@@ -615,13 +636,14 @@ function DataTableCell({
         })
       });
     case "codeeditor":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
         field: "codeeditor",
         value,
         fieldProps,
         disabled,
         readOnly,
         onCommit: handleChange,
+        label: cellName,
         title: (0, import_t.t)("Edit code"),
         children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
           value: draftValue != null ? String(draftValue) : "",
@@ -635,17 +657,30 @@ function DataTableCell({
       });
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InlineTextEditor, {
-          value,
-          onCommit: handleChange,
-          multiline: true,
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ModalCell, {
+        field: "textarea",
+        value,
+        fieldProps,
+        disabled,
+        readOnly,
+        onCommit: handleChange,
+        label: cellName,
+        title: (0, import_t.t)("Edit text"),
+        children: (draftValue, onDraftChange) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+          value: draftValue != null ? String(draftValue) : "",
+          onChangeText: onDraftChange,
           placeholder,
           disabled,
           readOnly,
-          sizeToken: knobProps.sizeToken,
-          ariaLabel: restProps["aria-label"] ?? columnLabel ?? columnId,
-          restProps
+          size: knobProps.sizeToken,
+          ...restProps,
+          textAreaProps: {
+            "aria-label": cellName,
+            // TextArea has no top-level minHeight prop; the modal editor's
+            // taller-than-row height rides the underlying textarea element.
+            minHeight: restProps.minHeight ?? 160,
+            ...restProps.textAreaProps
+          }
         })
       });
     case "input":
@@ -674,7 +709,6 @@ function CellStar(props) {
 function InlineTextEditor({
   value,
   onCommit,
-  multiline,
   placeholder,
   disabled,
   readOnly,
@@ -707,36 +741,12 @@ function InlineTextEditor({
   }, []);
   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]);
+    if (key === "Escape") cancel();else if (key === "Enter") commit();
+  }, [cancel, commit]);
   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,
@@ -870,15 +880,20 @@ function DraftFieldEditor({
     children: children(draft ? draft.value : committed, handleDraftChange)
   }, resetKey);
 }
+function ModalCell(props) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellModalEditor.CellModalEditor, {
+      ...props
+    })
+  });
+}
 function CellWrapper({
   children,
   justify = "flex-start",
   gap,
   minWidth
 }) {
-  const {
-    control
-  } = (0, import_theme.useResolvedKnobs)();
+  if (import_tamagui.isWeb) (0, import_theme.ensureCompositeFocusRing)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexDirection: "column",
     flexGrow: 1,
@@ -888,15 +903,11 @@ function CellWrapper({
     maxWidth: "100%",
     ...(import_tamagui.isWeb ? {
       overflowX: "clip",
-      overflowY: "visible"
+      overflowY: "visible",
+      className: "mp-composite-ring mp-composite-ring-deep"
     } : void 0),
     gap,
     minWidth,
-    ...(import_tamagui.isWeb ? {
-      focusWithinStyle: {
-        ...control.focusVisibleKnobProps
-      }
-    } : void 0),
     children
   });
 }