@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -1,19 +1,25 @@
 import { useCallback, useMemo } from "react";
-import { Field } from "@tanstack/react-form";
+import { Button, Field, Skeleton, useFormField, useResolvedValidators } from "@multiplatform.one/forms";
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-import { Button } from "@multiplatform.one/forms";
 import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
 import { Text, XStack, YStack } from "tamagui";
 import { Table } from "@multiplatform.one/table-primitives";
 import { DataTableCell } from "../DataTableCell/index.mjs";
+import { withInterp } from "../../utils/withInterp.mjs";
+import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT } from "./shared.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TableInput({
-  data,
+  data = [],
   columns,
+  onChange,
   onDataChange,
   onCellChange,
   name,
-  form,
+  form: formProp,
+  validators,
+  required,
+  skeleton = false,
   readOnly = false,
   showRowNumbers = true,
   showAddRow = true,
@@ -21,36 +27,105 @@ function TableInput({
   minRows,
   maxRows,
   defaultRow,
-  emptyMessage = "No rows",
-  "aria-label": ariaLabel = "Table input"
+  emptyMessage,
+  "aria-label": ariaLabel
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    resolvedForm
+  } = useFormField({
+    form: formProp
+  });
+  const resolvedAriaLabel = ariaLabel ?? t("Table input");
+  const resolvedValidators = useResolvedValidators(required, validators, resolvedAriaLabel, name, isEmptyRows);
+  const emitChange = useCallback(next => {
+    onChange?.(next);
+    onDataChange?.(next);
+  }, [onChange, onDataChange]);
+  const innerProps = {
+    columns,
+    onCellChange,
+    skeleton,
+    readOnly,
+    showRowNumbers,
+    showAddRow,
+    showDeleteRow,
+    minRows,
+    maxRows,
+    defaultRow,
+    emptyMessage: emptyMessage ?? t("No rows"),
+    ariaLabel: resolvedAriaLabel,
+    t
+  };
+  const Inner = TableInputInner;
+  if (skeleton) {
+    return /* @__PURE__ */jsx(Inner, {
+      rows: [],
+      commit: emitChange,
+      ...innerProps
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */jsx(Inner, {
+      rows: data,
+      commit: emitChange,
+      ...innerProps
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    form: resolvedForm,
+    name,
+    validators: resolvedValidators,
+    children: field => /* @__PURE__ */jsx(Inner, {
+      rows: field.state.value ?? data,
+      commit: next => {
+        field.handleChange(next);
+        emitChange(next);
+      },
+      ...innerProps
+    })
+  });
+}
+function TableInputInner({
+  rows,
+  commit,
+  columns,
+  onCellChange,
+  skeleton,
+  readOnly,
+  showRowNumbers,
+  showAddRow,
+  showDeleteRow,
+  minRows,
+  maxRows,
+  defaultRow,
+  emptyMessage,
+  ariaLabel,
+  t
 }) {
   const handleCellChange = 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]);
+    onCellChange?.(rowIndex, columnId, value);
+    const newData = [...rows];
+    newData[rowIndex] = {
+      ...newData[rowIndex],
+      [columnId]: value
+    };
+    commit(newData);
+  }, [rows, commit, onCellChange]);
   const handleAddRow = useCallback(() => {
-    if (maxRows && data.length >= maxRows) return;
+    if (maxRows && rows.length >= maxRows) return;
     const newRow = {
-      id: `row-${Date.now()}`,
-      idx: data.length + 1,
+      id: generateRowId(),
       ...defaultRow
     };
-    onDataChange?.([...data, newRow]);
-  }, [data, onDataChange, defaultRow, maxRows]);
+    commit([...rows, newRow]);
+  }, [rows, commit, defaultRow, maxRows]);
   const handleDeleteRow = useCallback(rowIndex => {
-    if (minRows && data.length <= minRows) return;
-    const newData = data.filter((_, index) => index !== rowIndex);
-    onDataChange?.(newData);
-  }, [data, onDataChange, minRows]);
+    if (minRows && rows.length <= minRows) return;
+    commit(rows.filter((_, index) => index !== rowIndex));
+  }, [rows, commit, minRows]);
   const tableColumns = useMemo(() => {
     const cols = [];
     if (showRowNumbers) {
@@ -85,6 +160,7 @@ function TableInput({
             fieldProps,
             readOnly,
             columnId,
+            columnLabel: typeof col.header === "string" ? col.header : void 0,
             rowIndex: row.index,
             rowData: row.original
           });
@@ -99,13 +175,17 @@ function TableInput({
         cell: ({
           row
         }) => {
-          const canDelete = !minRows || data.length > minRows;
+          const canDelete = !minRows || rows.length > minRows;
           return /* @__PURE__ */jsx(Button, {
             size: "$2",
             outlined: true,
             onPress: () => handleDeleteRow(row.index),
             disabled: !canDelete,
-            "aria-label": "Delete row",
+            "aria-label": withInterp(t("Delete row {{row}}", {
+              row: row.index + 1
+            }), {
+              row: row.index + 1
+            }),
             children: /* @__PURE__ */jsx(TrashIcon, {
               size: 16,
               color: "$red10"
@@ -115,32 +195,54 @@ function TableInput({
       });
     }
     return cols;
-  }, [columns, showRowNumbers, showDeleteRow, readOnly, handleCellChange, handleDeleteRow, data.length, minRows]);
+  }, [columns, showRowNumbers, showDeleteRow, readOnly, handleCellChange, handleDeleteRow, rows.length, minRows, t]);
   const table = useReactTable({
-    data,
+    data: rows,
     columns: tableColumns,
-    getCoreRowModel: getCoreRowModel()
+    getCoreRowModel: getCoreRowModel(),
+    // Stable row identity: keeps in-cell editor drafts pinned to their data
+    // row across deletes instead of following the positional index.
+    getRowId: (row, index) => String(row.id ?? index)
   });
-  const canAddRow = !maxRows || data.length < maxRows;
-  const renderContent = () => /* @__PURE__ */jsxs(YStack, {
+  const canAddRow = !maxRows || rows.length < maxRows;
+  const isEmpty = !skeleton && rows.length === 0;
+  return /* @__PURE__ */jsxs(YStack, {
     gap: "$2",
     children: [/* @__PURE__ */jsxs(Table, {
       "aria-label": ariaLabel,
+      "aria-busy": skeleton || void 0,
+      ...(isEmpty ? {
+        displayMode: "flex"
+      } : null),
       children: [/* @__PURE__ */jsx(Table.Head, {
         children: table.getHeaderGroups().map(headerGroup => /* @__PURE__ */jsx(Table.Row, {
           children: headerGroup.headers.map(header => /* @__PURE__ */jsx(Table.HeaderCell, {
             style: {
-              width: header.getSize()
+              width: header.getSize(),
+              // Flex-mode headers don't get fixed-layout stretch; let
+              // data columns grow so the header strip fills the row.
+              ...(isEmpty && header.column.id !== "_rowNumber" && header.column.id !== "_actions" ? {
+                flexGrow: 1
+              } : null)
             },
             children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
           }, header.id))
         }, headerGroup.id))
       }), /* @__PURE__ */jsx(Table.Body, {
-        children: table.getRowModel().rows.length === 0 ? /* @__PURE__ */jsx(Table.Row, {
+        children: skeleton ? Array.from({
+          length: SKELETON_ROW_COUNT
+        }, (_, rowIndex) => /* @__PURE__ */jsx(Table.Row, {
+          children: table.getAllLeafColumns().map(column => /* @__PURE__ */jsx(Table.Cell, {
+            children: column.id === "_actions" ? null : /* @__PURE__ */jsx(Skeleton, {
+              variant: "rounded",
+              width: column.id === "_rowNumber" ? 16 : "70%",
+              height: 16
+            })
+          }, column.id))
+        }, `skeleton-${rowIndex}`)) : isEmpty ? /* @__PURE__ */jsx(Table.Row, {
           children: /* @__PURE__ */jsx(Table.Cell, {
-            style: {
-              textAlign: "center"
-            },
+            cellWidth: "auto",
+            justifyContent: "center",
             children: /* @__PURE__ */jsx(Text, {
               color: "$gray11",
               children: emptyMessage
@@ -152,7 +254,7 @@ function TableInput({
           }, cell.id))
         }, row.id))
       })]
-    }), showAddRow && !readOnly && /* @__PURE__ */jsx(XStack, {
+    }), showAddRow && !readOnly && !skeleton && /* @__PURE__ */jsx(XStack, {
       children: /* @__PURE__ */jsx(Button, {
         size: "$2",
         outlined: true,
@@ -161,18 +263,16 @@ function TableInput({
         icon: /* @__PURE__ */jsx(PlusIcon, {
           size: 16
         }),
-        children: "Add Row"
+        children: t("Add Row")
+      })
+    }), skeleton && showAddRow && !readOnly && /* @__PURE__ */jsx(XStack, {
+      children: /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: 100,
+        height: 28
       })
     })]
   });
-  if (form && name) {
-    return /* @__PURE__ */jsx(Field, {
-      name,
-      form,
-      children: () => renderContent()
-    });
-  }
-  return renderContent();
 }
 export { TableInput };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/TableInput/index.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","Field","flexRender","getCoreRowModel","useReactTable","Button","TrashIcon","PlusIcon","Text","XStack","YStack","Table","DataTableCell","jsx","jsxs","TableInput","data","columns","onDataChange","onCellChange","name","form","readOnly","showRowNumbers","showAddRow","showDeleteRow","minRows","maxRows","defaultRow","emptyMessage","ariaLabel","handleCellChange","rowIndex","columnId","value","newData","handleAddRow","length","newRow","id","Date","now","idx","handleDeleteRow","filter","_","index","tableColumns","cols","push","header","size","cell","row","color","fontSize","children","forEach","col","accessorKey","String","original","field","fieldProps","onChange","newValue","rowData","canDelete","outlined","onPress","disabled","table","canAddRow","renderContent","gap","Head","getHeaderGroups","map","headerGroup","Row","headers","HeaderCell","style","width","getSize","isPlaceholder","column","columnDef","getContext","Body","getRowModel","rows","Cell","textAlign","getVisibleCells","icon"],"sources":["../../../../src/components/TableInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","Button","Field","Skeleton","useFormField","useResolvedValidators","flexRender","getCoreRowModel","useReactTable","TrashIcon","PlusIcon","useTranslation","Text","XStack","YStack","Table","DataTableCell","withInterp","generateRowId","isEmptyRows","SKELETON_ROW_COUNT","jsx","jsxs","TableInput","data","columns","onChange","onDataChange","onCellChange","name","form","formProp","validators","required","skeleton","readOnly","showRowNumbers","showAddRow","showDeleteRow","minRows","maxRows","defaultRow","emptyMessage","ariaLabel","t","resolvedForm","resolvedAriaLabel","resolvedValidators","emitChange","next","innerProps","Inner","TableInputInner","rows","commit","children","field","state","value","handleChange","handleCellChange","rowIndex","columnId","newData","handleAddRow","length","newRow","id","handleDeleteRow","filter","_","index","tableColumns","cols","push","header","size","cell","row","color","fontSize","forEach","col","accessorKey","String","original","fieldProps","newValue","columnLabel","rowData","canDelete","outlined","onPress","disabled","table","getRowId","canAddRow","isEmpty","gap","displayMode","Head","getHeaderGroups","map","headerGroup","Row","headers","HeaderCell","style","width","getSize","column","flexGrow","isPlaceholder","columnDef","getContext","Body","Array","from","getAllLeafColumns","Cell","variant","height","cellWidth","justifyContent","getRowModel","getVisibleCells","icon"],"sources":["../../../../src/components/TableInput/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

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

@@ -1,19 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
-import { Field } from "@tanstack/react-form";
+import { Button, Field, Skeleton, useFormField, useResolvedValidators } from "@multiplatform.one/forms";
 import { FlashList } from "@shopify/flash-list";
-import { Button } from "@multiplatform.one/forms";
 import { TrashIcon, PlusIcon } from "@phosphor-icons/react";
+import { useTranslation } from "react-i18next";
 import { Text, View, XStack, YStack } from "tamagui";
 import { DataTableCell } from "../DataTableCell/index.native.js";
+import { withInterp } from "../../utils/withInterp.native.js";
+import { generateRowId, isEmptyRows, SKELETON_ROW_COUNT } from "./shared.native.js";
 function TableInput(param) {
   var {
-    data,
+    data = [],
     columns,
+    onChange,
     onDataChange,
     onCellChange,
     name,
-    form,
+    form: formProp,
+    validators,
+    required,
+    skeleton = false,
     readOnly = false,
     showRowNumbers = true,
     showAddRow = true,
@@ -21,39 +27,113 @@ function TableInput(param) {
     minRows,
     maxRows,
     defaultRow,
-    emptyMessage = "No rows",
-    "aria-label": ariaLabel = "Table input"
+    emptyMessage,
+    "aria-label": ariaLabel
   } = param;
-  var handleCellChange = useCallback(function (rowIndex, columnId, value) {
-    if (onCellChange) {
-      onCellChange(rowIndex, columnId, value);
-    }
-    if (onDataChange) {
-      var newData = [...data];
-      newData[rowIndex] = {
-        ...newData[rowIndex],
-        [columnId]: value
-      };
-      onDataChange(newData);
+  var {
+    t
+  } = useTranslation();
+  var {
+    resolvedForm
+  } = useFormField({
+    form: formProp
+  });
+  var resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Table input");
+  var resolvedValidators = useResolvedValidators(required, validators, resolvedAriaLabel, name, isEmptyRows);
+  var emitChange = useCallback(function (next) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(next);
+  }, [onChange, onDataChange]);
+  var innerProps = {
+    columns,
+    onCellChange,
+    skeleton,
+    readOnly,
+    showRowNumbers,
+    showAddRow,
+    showDeleteRow,
+    minRows,
+    maxRows,
+    defaultRow,
+    emptyMessage: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("No rows"),
+    ariaLabel: resolvedAriaLabel,
+    t
+  };
+  var Inner = TableInputInner;
+  if (skeleton) {
+    return /* @__PURE__ */_jsx(Inner, {
+      rows: [],
+      commit: emitChange,
+      ...innerProps
+    });
+  }
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */_jsx(Inner, {
+      rows: data,
+      commit: emitChange,
+      ...innerProps
+    });
+  }
+  return /* @__PURE__ */_jsx(Field, {
+    form: resolvedForm,
+    name,
+    validators: resolvedValidators,
+    children: function children(field) {
+      var _field_state_value;
+      return /* @__PURE__ */_jsx(Inner, {
+        rows: (_field_state_value = field.state.value) !== null && _field_state_value !== void 0 ? _field_state_value : data,
+        commit: function commit(next) {
+          field.handleChange(next);
+          emitChange(next);
+        },
+        ...innerProps
+      });
     }
-  }, [data, onDataChange, onCellChange]);
+  });
+}
+function TableInputInner(param) {
+  var {
+    rows,
+    commit,
+    columns,
+    onCellChange,
+    skeleton,
+    readOnly,
+    showRowNumbers,
+    showAddRow,
+    showDeleteRow,
+    minRows,
+    maxRows,
+    defaultRow,
+    emptyMessage,
+    ariaLabel,
+    t
+  } = param;
+  var handleCellChange = useCallback(function (rowIndex, columnId, value) {
+    onCellChange === null || onCellChange === void 0 ? void 0 : onCellChange(rowIndex, columnId, value);
+    var newData = [...rows];
+    newData[rowIndex] = {
+      ...newData[rowIndex],
+      [columnId]: value
+    };
+    commit(newData);
+  }, [rows, commit, onCellChange]);
   var handleAddRow = useCallback(function () {
-    if (maxRows && data.length >= maxRows) return;
+    if (maxRows && rows.length >= maxRows) return;
     var newRow = {
-      id: `row-${Date.now()}`,
+      id: generateRowId(),
       ...defaultRow
     };
-    onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange([...data, newRow]);
-  }, [data, onDataChange, defaultRow, maxRows]);
+    commit([...rows, newRow]);
+  }, [rows, commit, defaultRow, maxRows]);
   var handleDeleteRow = useCallback(function (rowIndex) {
-    if (minRows && data.length <= minRows) return;
-    var newData = data.filter(function (_, index) {
+    if (minRows && rows.length <= minRows) return;
+    commit(rows.filter(function (_, index) {
       return index !== rowIndex;
-    });
-    onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newData);
-  }, [data, onDataChange, minRows]);
-  var canAddRow = !maxRows || data.length < maxRows;
-  var canDelete = !minRows || data.length > (minRows || 0);
+    }));
+  }, [rows, commit, minRows]);
+  var canAddRow = !maxRows || rows.length < maxRows;
+  var canDelete = !minRows || rows.length > (minRows || 0);
   var columnIds = useMemo(function () {
     return columns.map(function (col) {
       return typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
@@ -128,6 +208,7 @@ function TableInput(param) {
             fieldProps,
             readOnly,
             columnId,
+            columnLabel: typeof col.header === "string" ? col.header : void 0,
             rowIndex: index,
             rowData: item
           })
@@ -143,7 +224,11 @@ function TableInput(param) {
             return handleDeleteRow(index);
           },
           disabled: !canDelete,
-          "aria-label": "Delete row",
+          "aria-label": withInterp(t("Delete row {{row}}", {
+            row: index + 1
+          }), {
+            row: index + 1
+          }),
           children: /* @__PURE__ */_jsx(TrashIcon, {
             size: 16,
             color: "$red10"
@@ -152,6 +237,42 @@ function TableInput(param) {
       })]
     });
   };
+  var renderSkeletonRows = function renderSkeletonRows2() {
+    return /* @__PURE__ */_jsx(YStack, {
+      children: Array.from({
+        length: SKELETON_ROW_COUNT
+      }, function (_, rowIndex) {
+        return /* @__PURE__ */_jsxs(XStack, {
+          borderBottomWidth: 1,
+          borderBottomColor: "$borderColor",
+          paddingVertical: "$2",
+          paddingHorizontal: "$2",
+          alignItems: "center",
+          children: [showRowNumbers && /* @__PURE__ */_jsx(View, {
+            width: 40,
+            paddingHorizontal: "$1",
+            children: /* @__PURE__ */_jsx(Skeleton, {
+              variant: "rounded",
+              width: 16,
+              height: 16
+            })
+          }), columns.map(function (_2, colIndex) {
+            return /* @__PURE__ */_jsx(View, {
+              flex: 1,
+              paddingHorizontal: "$1",
+              children: /* @__PURE__ */_jsx(Skeleton, {
+                variant: "rounded",
+                width: "70%",
+                height: 16
+              })
+            }, columnIds[colIndex]);
+          }), showDeleteRow && !readOnly && /* @__PURE__ */_jsx(View, {
+            width: 50
+          })]
+        }, `skeleton-${rowIndex}`);
+      })
+    });
+  };
   var renderEmpty = function renderEmpty2() {
     return /* @__PURE__ */_jsx(View, {
       padding: "$4",
@@ -162,48 +283,37 @@ function TableInput(param) {
       })
     });
   };
-  var renderContent = function renderContent2() {
-    return /* @__PURE__ */_jsxs(YStack, {
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      borderRadius: "$2",
-      overflow: "hidden",
-      accessibilityLabel: ariaLabel,
-      children: [renderHeader(), data.length === 0 ? renderEmpty() : /* @__PURE__ */_jsx(FlashList, {
-        data,
-        renderItem: renderRow,
-        drawDistance: 200,
-        keyExtractor: function keyExtractor(item, index) {
-          var _item_id;
-          return ((_item_id = item.id) === null || _item_id === void 0 ? void 0 : _item_id.toString()) || `row-${index}`;
-        }
-      }), showAddRow && !readOnly && /* @__PURE__ */_jsx(XStack, {
-        padding: "$2",
-        borderTopWidth: 1,
-        borderTopColor: "$borderColor",
-        children: /* @__PURE__ */_jsx(Button, {
-          size: "$2",
-          outlined: true,
-          onPress: handleAddRow,
-          disabled: !canAddRow,
-          icon: /* @__PURE__ */_jsx(PlusIcon, {
-            size: 16
-          }),
-          children: "Add Row"
-        })
-      })]
-    });
-  };
-  if (form && name) {
-    return /* @__PURE__ */_jsx(Field, {
-      name,
-      form,
-      children: function children() {
-        return renderContent();
+  return /* @__PURE__ */_jsxs(YStack, {
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    borderRadius: "$2",
+    overflow: "hidden",
+    accessibilityLabel: ariaLabel,
+    "aria-busy": skeleton || void 0,
+    children: [renderHeader(), skeleton ? renderSkeletonRows() : rows.length === 0 ? renderEmpty() : /* @__PURE__ */_jsx(FlashList, {
+      data: rows,
+      renderItem: renderRow,
+      drawDistance: 200,
+      keyExtractor: function keyExtractor(item, index) {
+        var _item_id;
+        return ((_item_id = item.id) === null || _item_id === void 0 ? void 0 : _item_id.toString()) || `row-${index}`;
       }
-    });
-  }
-  return renderContent();
+    }), showAddRow && !readOnly && !skeleton && /* @__PURE__ */_jsx(XStack, {
+      padding: "$2",
+      borderTopWidth: 1,
+      borderTopColor: "$borderColor",
+      children: /* @__PURE__ */_jsx(Button, {
+        size: "$2",
+        outlined: true,
+        onPress: handleAddRow,
+        disabled: !canAddRow,
+        icon: /* @__PURE__ */_jsx(PlusIcon, {
+          size: 16
+        }),
+        children: t("Add Row")
+      })
+    })]
+  });
 }
 export { TableInput };
 //# sourceMappingURL=index.native.js.map