@multiplatform.one/table 6.0.0

package/dist/cjs/components/Table/accessibility.spec.native.js

@@ -0,0 +1,216 @@
+"use strict";
+
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_vitest = require("vitest");
+var import_table_primitives = require("@multiplatform.one/table-primitives");
+var import_useTableKeyboard = require("../../hooks/useTableKeyboard.native.js");
+var import_DataTableToolbar = require("../DataTableToolbar/index.native.js");
+var import_ColumnHeaderFilter = require("../ColumnHeaderFilter/index.native.js");
+function _type_of(obj) {
+  "@swc/helpers - typeof";
+
+  return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+(0, import_vitest.describe)("Table Accessibility", function () {
+  (0, import_vitest.it)("all icon-only buttons have aria-labels", function () {
+    var {
+      container: toolbarContainer
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar, {
+      globalFilter: "test",
+      onGlobalFilterChange: function onGlobalFilterChange() {},
+      onClearFilters: function onClearFilters() {},
+      enableGlobalSearch: true
+    }));
+    var clearButton = toolbarContainer.querySelector('[aria-label="Clear search"]');
+    (0, import_vitest.expect)(clearButton).not.toBeNull();
+    var toolbar = toolbarContainer.querySelector('[role="toolbar"]');
+    (0, import_vitest.expect)(toolbar).not.toBeNull();
+    (0, import_vitest.expect)(toolbar === null || toolbar === void 0 ? void 0 : toolbar.getAttribute("aria-label")).toBe("Table toolbar");
+    var {
+      container: filterContainer
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColumnHeaderFilter.ColumnHeaderFilter, {
+      columnId: "name",
+      columnLabel: "Name",
+      columnType: "text",
+      onFilterChange: function onFilterChange() {}
+    }));
+    var filterTrigger = filterContainer.querySelector('[aria-label="Filter column Name"]');
+    (0, import_vitest.expect)(filterTrigger).not.toBeNull();
+    var {
+      container: viewsContainer
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableToolbar.DataTableToolbar, {
+      enableViews: true,
+      enableGlobalSearch: false,
+      showViewSelector: true,
+      views: [],
+      onSaveView: function onSaveView() {}
+    }));
+    var saveViewButton = viewsContainer.querySelector('[aria-label="Save view"]');
+    (0, import_vitest.expect)(saveViewButton).not.toBeNull();
+  });
+  (0, import_vitest.it)("useTableKeyboard handles ArrowDown, ArrowUp, Home, End, PageDown, PageUp", function () {
+    (0, import_vitest.expect)(typeof import_useTableKeyboard.useTableKeyboard === "undefined" ? "undefined" : _type_of(import_useTableKeyboard.useTableKeyboard)).toBe("function");
+    var mockTable = {
+      getRowModel: function getRowModel() {
+        return {
+          rows: [{
+            id: "0",
+            original: {
+              name: "Row 0"
+            }
+          }, {
+            id: "1",
+            original: {
+              name: "Row 1"
+            }
+          }, {
+            id: "2",
+            original: {
+              name: "Row 2"
+            }
+          }]
+        };
+      }
+    };
+    var {
+      container
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(KeyboardTestHarness, {
+      table: mockTable
+    }));
+    var focusTarget = container.querySelector('[data-testid="keyboard-container"]');
+    (0, import_vitest.expect)(focusTarget).not.toBeNull();
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "ArrowDown"
+    });
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "ArrowUp"
+    });
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "Home"
+    });
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "End"
+    });
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "PageDown"
+    });
+    import_test_utils.fireEvent.keyDown(focusTarget, {
+      key: "PageUp"
+    });
+    (0, import_vitest.expect)(true).toBe(true);
+  });
+  (0, import_vitest.it)("Escape key behavior: Tamagui Popover handles Escape natively", function () {
+    var onFilterChange = import_vitest.vi.fn();
+    var {
+      container
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ColumnHeaderFilter.ColumnHeaderFilter, {
+      columnId: "status",
+      columnLabel: "Status",
+      columnType: "text",
+      onFilterChange
+    }));
+    var trigger = container.querySelector('[aria-label="Filter column Status"]');
+    (0, import_vitest.expect)(trigger).not.toBeNull();
+    import_test_utils.fireEvent.click(trigger);
+    (0, import_vitest.expect)(trigger).not.toBeNull();
+  });
+  (0, import_vitest.it)("semantic HTML and ARIA roles on table primitives", function () {
+    var {
+      container
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Caption, {
+        children: "Test Table Caption"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Row, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+            children: "Name"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+            children: "Value"
+          })]
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Body, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Row, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            children: "Item A"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            children: "100"
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table.Row, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            children: "Item B"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            children: "200"
+          })]
+        })]
+      })]
+    }));
+    var tableEl = container.querySelector('[tag="table"]');
+    (0, import_vitest.expect)(tableEl).not.toBeNull();
+    var thead = container.querySelector('[tag="thead"]');
+    (0, import_vitest.expect)(thead).not.toBeNull();
+    var tbody = container.querySelector('[tag="tbody"]');
+    (0, import_vitest.expect)(tbody).not.toBeNull();
+    var caption = container.querySelector('[tag="caption"]');
+    (0, import_vitest.expect)(caption).not.toBeNull();
+    (0, import_vitest.expect)(caption === null || caption === void 0 ? void 0 : caption.textContent).toContain("Test Table Caption");
+    var headerCells = container.querySelectorAll('[tag="th"]');
+    (0, import_vitest.expect)(headerCells.length).toBe(2);
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = headerCells[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var th = _step.value;
+        (0, import_vitest.expect)(th.getAttribute("scope")).toBe("col");
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    var rows = container.querySelectorAll('[role="row"]');
+    (0, import_vitest.expect)(rows.length).toBe(3);
+    (0, import_vitest.expect)(container.querySelector(".is_Table")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableHead")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableBody")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableRow")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableCell")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableHeaderCell")).not.toBeNull();
+    (0, import_vitest.expect)(container.querySelector(".is_TableCaption")).not.toBeNull();
+  });
+});
+function KeyboardTestHarness(param) {
+  var {
+    table
+  } = param;
+  var {
+    handleKeyDown,
+    containerRef
+  } = (0, import_useTableKeyboard.useTableKeyboard)({
+    table,
+    enabled: true,
+    viewportHeight: 400
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    "data-testid": "keyboard-container",
+    ref: containerRef,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    style: {
+      width: 400,
+      height: 400
+    },
+    children: "Keyboard test"
+  });
+}
+//# sourceMappingURL=accessibility.spec.native.js.map

package/dist/cjs/components/Table/accessibility.spec.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["import_jsx_runtime","require","import_test_utils","import_vitest","import_table_primitives","import_useTableKeyboard","import_DataTableToolbar","import_ColumnHeaderFilter","_type_of","obj","Symbol","constructor","describe","it","container","toolbarContainer","renderWithProviders","jsx","DataTableToolbar","globalFilter","onGlobalFilterChange","onClearFilters","enableGlobalSearch","clearButton","querySelector","expect","not","toBeNull","toolbar","getAttribute","toBe","filterContainer","ColumnHeaderFilter","columnId","columnLabel","columnType","onFilterChange","filterTrigger","viewsContainer","enableViews","showViewSelector","views","onSaveView","saveViewButton","useTableKeyboard","mockTable","getRowModel","rows","id","original","name","KeyboardTestHarness","table","focusTarget","fireEvent","keyDown","key","vi","fn","trigger","click","jsxs","Table","children","Caption","Head","Row","HeaderCell","Body","Cell","tableEl","thead"],"sources":["../../../../src/components/Table/accessibility.spec.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/TableInput/TableInput.stories.cjs

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TableInput_stories_exports = {};
+__export(TableInput_stories_exports, {
+  Default: () => Default,
+  default: () => TableInput_stories_default
+});
+module.exports = __toCommonJS(TableInput_stories_exports);
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const meta = {
+  title: "Table/TableInput",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var TableInput_stories_default = meta;
+const Default = {
+  name: "Main",
+  render: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    padding: "$4",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$2",
+      color: "$color10",
+      children: "TableInput is an editable table component backed by TanStack Form. It supports inline editing, row add/remove, and field validation. See DataTable stories for integration context."
+    })
+  })
+};

package/dist/cjs/components/TableInput/TableInput.stories.native.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TableInput_stories_exports = {};
+__export(TableInput_stories_exports, {
+  Default: () => Default,
+  default: () => TableInput_stories_default
+});
+module.exports = __toCommonJS(TableInput_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tamagui = require("tamagui");
+var meta = {
+  title: "Table/TableInput",
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var TableInput_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      padding: "$4",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$2",
+        color: "$color10",
+        children: "TableInput is an editable table component backed by TanStack Form. It supports inline editing, row add/remove, and field validation. See DataTable stories for integration context."
+      })
+    });
+  }
+};
+//# sourceMappingURL=TableInput.stories.native.js.map

package/dist/cjs/components/TableInput/TableInput.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","TableInput_stories_exports","__export","Default","default","TableInput_stories_default","module","exports","import_jsx_runtime","require","import_tamagui","meta","title","parameters","status","type"],"sources":["../../../../src/components/TableInput/TableInput.stories.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,0BAAA;AAAAC,QAAA,CAAAD,0BAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAC;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAX,YAA6B,CAAAK,0BAAA;AAevB,IAAAO,kBAAA,GAAAC,OAAA;AAbN,IAAAC,cAAmB,GAAAD,OAAA;AAAA,IACjBE,IAAA,GAAO;EACPC,KAAA,oBAAY;EAAAC,UACF,EAAE;IACZC,MAAA;MACFC,IAAA;IAEO;EAEA;AAAgB;AACf,IACNV,0BACE,GAAAM,IAAA;AAQJ,IAAAR,OAAA","ignoreList":[]}

package/dist/cjs/components/TableInput/index.cjs

@@ -0,0 +1,203 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var TableInput_exports = {};
+__export(TableInput_exports, {
+  TableInput: () => TableInput
+});
+module.exports = __toCommonJS(TableInput_exports);
+var import_react = require("react");
+var import_react_form = require("@tanstack/react-form");
+var import_react_table = require("@tanstack/react-table");
+var import_forms = require("@multiplatform.one/forms");
+var import_react2 = require("@phosphor-icons/react");
+var import_tamagui = require("tamagui");
+var import_table_primitives = require("@multiplatform.one/table-primitives");
+var import_DataTableCell = require("../DataTableCell/index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function TableInput({
+  data,
+  columns,
+  onDataChange,
+  onCellChange,
+  name,
+  form,
+  readOnly = false,
+  showRowNumbers = true,
+  showAddRow = true,
+  showDeleteRow = true,
+  minRows,
+  maxRows,
+  defaultRow,
+  emptyMessage = "No rows",
+  "aria-label": ariaLabel = "Table input"
+}) {
+  const handleCellChange = (0, import_react.useCallback)((rowIndex, columnId, value) => {
+    if (onCellChange) {
+      onCellChange(rowIndex, columnId, value);
+    }
+    if (onDataChange) {
+      const newData = [...data];
+      newData[rowIndex] = {
+        ...newData[rowIndex],
+        [columnId]: value
+      };
+      onDataChange(newData);
+    }
+  }, [data, onDataChange, onCellChange]);
+  const handleAddRow = (0, import_react.useCallback)(() => {
+    if (maxRows && data.length >= maxRows) return;
+    const newRow = {
+      id: `row-${Date.now()}`,
+      idx: data.length + 1,
+      ...defaultRow
+    };
+    onDataChange?.([...data, newRow]);
+  }, [data, onDataChange, defaultRow, maxRows]);
+  const handleDeleteRow = (0, import_react.useCallback)(rowIndex => {
+    if (minRows && data.length <= minRows) return;
+    const newData = data.filter((_, index) => index !== rowIndex);
+    onDataChange?.(newData);
+  }, [data, onDataChange, minRows]);
+  const tableColumns = (0, import_react.useMemo)(() => {
+    const cols = [];
+    if (showRowNumbers) {
+      cols.push({
+        id: "_rowNumber",
+        header: "#",
+        size: 50,
+        cell: ({
+          row
+        }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$gray11",
+          fontSize: "$2",
+          children: row.index + 1
+        })
+      });
+    }
+    columns.forEach(col => {
+      const columnId = typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
+      cols.push({
+        ...col,
+        id: columnId,
+        cell: ({
+          row
+        }) => {
+          const value = row.original[columnId];
+          const field = col.field || "input";
+          const fieldProps = col.fieldProps;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCell.DataTableCell, {
+            value,
+            onChange: newValue => handleCellChange(row.index, columnId, newValue),
+            field,
+            fieldProps,
+            readOnly,
+            columnId,
+            rowIndex: row.index,
+            rowData: row.original
+          });
+        }
+      });
+    });
+    if (showDeleteRow && !readOnly) {
+      cols.push({
+        id: "_actions",
+        header: "",
+        size: 50,
+        cell: ({
+          row
+        }) => {
+          const canDelete = !minRows || data.length > minRows;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            outlined: true,
+            onPress: () => handleDeleteRow(row.index),
+            disabled: !canDelete,
+            "aria-label": "Delete row",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.TrashIcon, {
+              size: 16,
+              color: "$red10"
+            })
+          });
+        }
+      });
+    }
+    return cols;
+  }, [columns, showRowNumbers, showDeleteRow, readOnly, handleCellChange, handleDeleteRow, data.length, minRows]);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns: tableColumns,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)()
+  });
+  const canAddRow = !maxRows || data.length < maxRows;
+  const renderContent = () => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$2",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table_primitives.Table, {
+      "aria-label": ariaLabel,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Head, {
+        children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+          children: headerGroup.headers.map(header => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
+            style: {
+              width: header.getSize()
+            },
+            children: header.isPlaceholder ? null : (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
+          }, header.id))
+        }, headerGroup.id))
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Body, {
+        children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            style: {
+              textAlign: "center"
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: "$gray11",
+              children: emptyMessage
+            })
+          })
+        }) : table.getRowModel().rows.map(row => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
+          children: row.getVisibleCells().map(cell => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
+            children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+          }, cell.id))
+        }, row.id))
+      })]
+    }), showAddRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: "$2",
+        outlined: true,
+        onPress: handleAddRow,
+        disabled: !canAddRow,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PlusIcon, {
+          size: 16
+        }),
+        children: "Add Row"
+      })
+    })]
+  });
+  if (form && name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_form.Field, {
+      name,
+      form,
+      children: () => renderContent()
+    });
+  }
+  return renderContent();
+}