@multiplatform.one/table 6.6.0 → 7.0.0

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

@@ -75,12 +75,14 @@ function DataTableCell(param) {
     linkedValue: _linkedValue,
     onLinkedChange: _onLinkedChange
   } = param;
+  var _ref, _fieldProps_arialabel;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)({
     size,
     compact: compact !== null && compact !== void 0 ? compact : true
   });
+  var cellName = (_ref = (_fieldProps_arialabel = fieldProps["aria-label"]) !== null && _fieldProps_arialabel !== void 0 ? _fieldProps_arialabel : columnLabel) !== null && _ref !== void 0 ? _ref : columnId;
   var {
     options,
     placeholder,
@@ -137,7 +139,7 @@ function DataTableCell(param) {
   switch (field) {
     // ─── Boolean inputs ───────────────────────────────────────
     case "checkbox":
-      var _ref, _restProps_arialabel;
+      var _ref1, _restProps_arialabel;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         justify: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Checkbox, {
@@ -148,13 +150,13 @@ function DataTableCell(param) {
           // 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,
+            "aria-label": (_ref1 = (_restProps_arialabel = restProps["aria-label"]) !== null && _restProps_arialabel !== void 0 ? _restProps_arialabel : columnLabel) !== null && _ref1 !== void 0 ? _ref1 : columnId,
             ...restProps.checkboxProps
           }
         })
       });
     case "switch":
-      var _ref1, _restProps_arialabel1;
+      var _ref2, _restProps_arialabel1;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         justify: "center",
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
@@ -165,14 +167,14 @@ function DataTableCell(param) {
           // 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,
+            "aria-label": (_ref2 = (_restProps_arialabel1 = restProps["aria-label"]) !== null && _restProps_arialabel1 !== void 0 ? _restProps_arialabel1 : columnLabel) !== null && _ref2 !== void 0 ? _ref2 : columnId,
             ...restProps.switchProps
           }
         })
       });
     // ─── Selection inputs ─────────────────────────────────────
     case "select":
-      var _ref2, _restProps_arialabel2;
+      var _restProps_arialabel2;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
           value: value != null ? String(value) : "",
@@ -183,11 +185,11 @@ function DataTableCell(param) {
           placeholder,
           size: knobProps.sizeToken,
           ...restProps,
-          "aria-label": (_ref2 = (_restProps_arialabel2 = restProps["aria-label"]) !== null && _restProps_arialabel2 !== void 0 ? _restProps_arialabel2 : columnLabel) !== null && _ref2 !== void 0 ? _ref2 : columnId
+          "aria-label": (_restProps_arialabel2 = restProps["aria-label"]) !== null && _restProps_arialabel2 !== void 0 ? _restProps_arialabel2 : cellName
         })
       });
     case "combobox":
-      var _ref3, _restProps_arialabel3;
+      var _restProps_arialabel3;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Combobox, {
           value: value != null ? String(value) : "",
@@ -198,18 +200,17 @@ function DataTableCell(param) {
           placeholder,
           size: knobProps.sizeToken,
           ...restProps,
-          "aria-label": (_ref3 = (_restProps_arialabel3 = restProps["aria-label"]) !== null && _restProps_arialabel3 !== void 0 ? _restProps_arialabel3 : columnLabel) !== null && _ref3 !== void 0 ? _ref3 : columnId
+          "aria-label": (_restProps_arialabel3 = restProps["aria-label"]) !== null && _restProps_arialabel3 !== void 0 ? _restProps_arialabel3 : cellName
         })
       });
     case "radiogroup":
-      var _ref4, _restProps_arialabel4;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_CellOptionsEditor.CellOptionsEditor, {
           field: "radiogroup",
           value,
           fieldProps,
           disabled: disabled || readOnly,
-          label: (_ref4 = (_restProps_arialabel4 = restProps["aria-label"]) !== null && _restProps_arialabel4 !== void 0 ? _restProps_arialabel4 : columnLabel) !== null && _ref4 !== void 0 ? _ref4 : columnId,
+          label: cellName,
           children: function children(close) {
             return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.RadioGroup, {
               value: value != null ? String(value) : "",
@@ -228,14 +229,28 @@ function DataTableCell(param) {
       });
     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 !== null && options !== void 0 ? 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: function children(close) {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ToggleGroup, {
+              value: allowMultiple ? Array.isArray(value) ? value : [] : value,
+              onValueChange: function onValueChange(next) {
+                handleChange(next);
+                if (!allowMultiple) close();
+              },
+              options: options !== null && options !== void 0 ? options : [],
+              disabled: disabled || readOnly,
+              type: allowMultiple ? "multiple" : "single",
+              size: knobProps.sizeToken,
+              orientation: "vertical",
+              ...restProps
+            });
+          }
         })
       });
     // ─── Numeric inputs ───────────────────────────────────────
@@ -253,7 +268,7 @@ function DataTableCell(param) {
             committed: value,
             onCommit: handleChange,
             children: function children(draftValue, onDraftChange) {
-              var _ref7, _restProps_arialabel7;
+              var _ref4, _restProps_arialabel5;
               return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Stepper, {
                 defaultValue: draftValue != null ? Number(draftValue) : void 0,
                 onChange: onDraftChange,
@@ -272,7 +287,7 @@ function DataTableCell(param) {
                 // 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,
+                  "aria-label": (_ref4 = (_restProps_arialabel5 = restProps["aria-label"]) !== null && _restProps_arialabel5 !== void 0 ? _restProps_arialabel5 : columnLabel) !== null && _ref4 !== void 0 ? _ref4 : columnId,
                   ...restProps.inputProps
                 }
               });
@@ -496,13 +511,14 @@ function DataTableCell(param) {
         })
       );
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.MentionInput, {
@@ -524,13 +540,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
@@ -557,13 +574,14 @@ function DataTableCell(param) {
       });
     // ─── 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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FileUpload, {
@@ -579,13 +597,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.ImageField, {
@@ -601,13 +620,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           var _restProps_width, _restProps_height;
@@ -624,13 +644,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Geolocation, {
@@ -647,13 +668,14 @@ function DataTableCell(param) {
       });
     // ─── 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: function children(draftValue, onDraftChange) {
           var _restProps_minHeight;
@@ -670,13 +692,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
@@ -691,13 +714,14 @@ function DataTableCell(param) {
         }
       });
     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: function children(draftValue, onDraftChange) {
           return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
@@ -713,23 +737,38 @@ function DataTableCell(param) {
       });
     // ─── Text inputs ──────────────────────────────────────────
     case "textarea":
-      var _ref5, _restProps_arialabel5;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InlineTextEditor, {
-          value,
-          onCommit: handleChange,
-          multiline: true,
-          placeholder,
-          disabled,
-          readOnly,
-          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
-        })
+      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: function children(draftValue, onDraftChange) {
+          var _restProps_minHeight;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.TextArea, {
+            value: draftValue != null ? String(draftValue) : "",
+            onChangeText: onDraftChange,
+            placeholder,
+            disabled,
+            readOnly,
+            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 = restProps.minHeight) !== null && _restProps_minHeight !== void 0 ? _restProps_minHeight : 160,
+              ...restProps.textAreaProps
+            }
+          });
+        }
       });
     case "input":
     default:
-      var _ref6, _restProps_arialabel6;
+      var _ref3, _restProps_arialabel4;
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellWrapper, {
         justify: cellJustify,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(InlineTextEditor, {
@@ -739,7 +778,7 @@ function DataTableCell(param) {
           disabled,
           readOnly,
           sizeToken: knobProps.sizeToken,
-          ariaLabel: (_ref6 = (_restProps_arialabel6 = restProps["aria-label"]) !== null && _restProps_arialabel6 !== void 0 ? _restProps_arialabel6 : columnLabel) !== null && _ref6 !== void 0 ? _ref6 : columnId,
+          ariaLabel: (_ref3 = (_restProps_arialabel4 = restProps["aria-label"]) !== null && _restProps_arialabel4 !== void 0 ? _restProps_arialabel4 : columnLabel) !== null && _ref3 !== void 0 ? _ref3 : columnId,
           restProps
         })
       });
@@ -755,7 +794,6 @@ function InlineTextEditor(param) {
   var {
     value,
     onCommit,
-    multiline,
     placeholder,
     disabled,
     readOnly,
@@ -792,36 +830,12 @@ function InlineTextEditor(param) {
     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]);
+    if (key === "Escape") cancel();else if (key === "Enter") commit();
+  }, [cancel, commit]);
   var {
     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,
@@ -969,6 +983,13 @@ function DraftFieldEditor(param) {
     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(param) {
   var {
     children,
@@ -976,9 +997,7 @@ function CellWrapper(param) {
     gap,
     minWidth
   } = param;
-  var {
-    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,
@@ -989,18 +1008,11 @@ function CellWrapper(param) {
     // Per-axis overflow is web-only CSS; RN styles know only `overflow`.
     ...(import_tamagui.isWeb ? {
       overflowX: "clip",
-      overflowY: "visible"
+      overflowY: "visible",
+      className: "mp-composite-ring mp-composite-ring-deep"
     } : 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.
-    ...(import_tamagui.isWeb ? {
-      focusWithinStyle: {
-        ...control.focusVisibleKnobProps
-      }
-    } : void 0),
     children
   });
 }