formanitor 0.1.11 → 0.2.0

package/dist/EditableTable-LPAYCK36.mjs

@@ -0,0 +1,279 @@
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-UULLSS4O.mjs';
+import { DateTimePicker } from './chunk-4PMNVBJD.mjs';
+import { Input } from './chunk-VNFBUAZD.mjs';
+import './chunk-BMNY7F6H.mjs';
+import './chunk-AZHTIUOL.mjs';
+import { Button } from './chunk-GXXWMHAA.mjs';
+import { useField } from './chunk-ZGPHTPAN.mjs';
+import { Label } from './chunk-HEFZA2AH.mjs';
+import './chunk-VPU66PI6.mjs';
+import { useMemo, useRef, useEffect, useState } from 'react';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { Trash2, Plus } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var EditableTableWidget = ({
+  fieldId
+}) => {
+  const { fieldDef, value, setValue, disabled } = useField(fieldId);
+  const def = fieldDef;
+  const canAddRow = def?.allowAddRow ?? true;
+  const canAddColumn = def?.allowAddColumn ?? true;
+  const canDeleteRow = def?.allowDeleteRow ?? true;
+  const canDeleteColumn = def?.allowDeleteColumn ?? true;
+  const minRows = def?.minRows ?? 0;
+  const addRowLabel = def?.addRowLabel ?? "Add Row";
+  const addColumnLabel = def?.addColumnLabel ?? "Add Column";
+  const newColumnNameHint = def?.newColumnNameHint ?? "New Column Name";
+  const newColumnNameInputType = def?.newColumnNameInputType ?? "text";
+  const tableData = useMemo(() => {
+    if (value && typeof value === "object" && "columns" in value && "rows" in value) {
+      return value;
+    }
+    const def2 = fieldDef;
+    const cols = (def2?.columns || []).map((c) => ({
+      id: c.id,
+      label: c.label,
+      allowDelete: c.allowDelete !== false
+    }));
+    return {
+      columns: cols,
+      rows: []
+    };
+  }, [value, fieldDef]);
+  const dataRef = useRef(tableData);
+  useEffect(() => {
+    dataRef.current = tableData;
+  }, [tableData]);
+  const [newColumnName, setNewColumnName] = useState("");
+  const [newColumnDate, setNewColumnDate] = useState(void 0);
+  const updateData = (newData) => {
+    setValue(newData);
+  };
+  const addRow = () => {
+    const currentData = dataRef.current;
+    const newRow = {};
+    currentData.columns.forEach((col) => {
+      newRow[col.id] = "";
+    });
+    updateData({
+      ...currentData,
+      rows: [...currentData.rows, newRow]
+    });
+  };
+  const addColumnFromText = () => {
+    if (!newColumnName.trim()) return;
+    const currentData = dataRef.current;
+    const colId = newColumnName.toLowerCase().replace(/\s+/g, "_") + "_" + Date.now();
+    const newCol = { id: colId, label: newColumnName.trim(), allowDelete: true };
+    updateData({
+      columns: [...currentData.columns, newCol],
+      rows: currentData.rows.map((row) => ({ ...row, [colId]: "" }))
+    });
+    setNewColumnName("");
+  };
+  const addColumnFromDate = (date) => {
+    if (!date) return;
+    const currentData = dataRef.current;
+    const label = format(date, "PPP HH:mm");
+    const colId = "col_" + date.getTime();
+    const newCol = { id: colId, label, allowDelete: true };
+    updateData({
+      columns: [...currentData.columns, newCol],
+      rows: currentData.rows.map((row) => ({ ...row, [colId]: "" }))
+    });
+    setNewColumnDate(void 0);
+  };
+  const hasValidNewColumn = newColumnNameInputType === "datetime" ? !!newColumnDate : !!newColumnName.trim();
+  const addColumn = () => {
+    if (newColumnNameInputType === "datetime") {
+      addColumnFromDate(newColumnDate);
+    } else {
+      addColumnFromText();
+    }
+  };
+  const removeRow = (index) => {
+    const currentData = dataRef.current;
+    const newRows = [...currentData.rows];
+    newRows.splice(index, 1);
+    updateData({ ...currentData, rows: newRows });
+  };
+  const removeColumn = (colId) => {
+    const currentData = dataRef.current;
+    const newCols = currentData.columns.filter((c) => c.id !== colId);
+    const newRows = currentData.rows.map((row) => {
+      const newRow = { ...row };
+      delete newRow[colId];
+      return newRow;
+    });
+    updateData({ columns: newCols, rows: newRows });
+  };
+  const updateCell = (rowIndex, colId, val) => {
+    const currentData = dataRef.current;
+    const newRows = [...currentData.rows];
+    newRows[rowIndex] = { ...newRows[rowIndex], [colId]: val };
+    updateData({ ...currentData, rows: newRows });
+  };
+  const columns = useMemo(() => {
+    const currentCols = tableData.columns;
+    const dataCols = currentCols.map((col) => {
+      const showColumnDelete = !disabled && canDeleteColumn && col.allowDelete !== false;
+      return {
+        accessorKey: col.id,
+        header: () => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
+          /* @__PURE__ */ jsx("span", { children: col.label }),
+          showColumnDelete && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-6 w-6 p-0 text-muted-foreground hover:text-destructive",
+              onClick: (e) => {
+                e.stopPropagation();
+                removeColumn(col.id);
+              },
+              title: "Remove Column",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        cell: (info) => {
+          return /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: info.getValue() || "",
+              onChange: (e) => updateCell(info.row.index, col.id, e.target.value),
+              disabled,
+              className: "h-8 border bg-transparent"
+            }
+          );
+        }
+      };
+    });
+    const showRowDelete = !disabled && canDeleteRow && tableData.rows.length > minRows;
+    if (showRowDelete) {
+      dataCols.push({
+        id: "actions",
+        header: "",
+        cell: (info) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 w-8 p-0 text-destructive hover:bg-destructive/10",
+            onClick: (e) => {
+              e.stopPropagation();
+              removeRow(info.row.index);
+            },
+            title: "Remove Row",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
+          }
+        )
+      });
+    }
+    return dataCols;
+  }, [tableData.columns, tableData.rows.length, disabled, canDeleteRow, canDeleteColumn, minRows]);
+  const table = useReactTable({
+    data: tableData.rows,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  if (!fieldDef) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: fieldDef.label }),
+      fieldDef.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: "p-1", children: flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center",
+          children: "No data. Add rows or columns to start."
+        }
+      ) }) })
+    ] }) }),
+    !disabled && /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-between pt-2", children: [
+      canAddRow ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: addRow,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
+            " ",
+            addRowLabel
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", {}),
+      canAddColumn && /* @__PURE__ */ jsx("div", { className: "flex gap-2 items-center flex-wrap", children: newColumnNameInputType === "datetime" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DateTimePicker,
+          {
+            dateTime: newColumnDate,
+            setDateTime: setNewColumnDate,
+            placeholder: newColumnNameHint,
+            className: "w-[280px]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: addColumn,
+            disabled: !hasValidNewColumn,
+            children: addColumnLabel
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: newColumnNameHint,
+            value: newColumnName,
+            onChange: (e) => setNewColumnName(e.target.value),
+            className: "w-48",
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addColumn();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: addColumn,
+            disabled: !hasValidNewColumn,
+            children: addColumnLabel
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+
+export { EditableTableWidget };
+//# sourceMappingURL=EditableTable-LPAYCK36.mjs.map
+//# sourceMappingURL=EditableTable-LPAYCK36.mjs.map

package/dist/EditableTable-LPAYCK36.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/widgets/EditableTable.tsx"],"names":["def"],"mappings":";;;;;;;;;;;;;;;AA+DO,IAAM,sBAA0D,CAAC;AAAA,EACtE;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,QAAA,EAAU,KAAA,EAAO,UAAU,QAAA,EAAS,GAAI,SAAS,OAAO,CAAA;AAChE,EAAA,MAAM,GAAA,GAAM,QAAA;AACZ,EAAA,MAAM,SAAA,GAAY,KAAK,WAAA,IAAe,IAAA;AACtC,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,IAAkB,IAAA;AAC5C,EAAA,MAAM,YAAA,GAAe,KAAK,cAAA,IAAkB,IAAA;AAC5C,EAAA,MAAM,eAAA,GAAkB,KAAK,iBAAA,IAAqB,IAAA;AAElD,EAAA,MAAM,OAAA,GAAU,KAAK,OAAA,IAAW,CAAA;AAChC,EAAA,MAAM,WAAA,GAAc,KAAK,WAAA,IAAe,SAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,KAAK,cAAA,IAAkB,YAAA;AAC9C,EAAA,MAAM,iBAAA,GAAoB,KAAK,iBAAA,IAAqB,iBAAA;AACpD,EAAA,MAAM,sBAAA,GAAyB,KAAK,sBAAA,IAA0B,MAAA;AAG9D,EAAA,MAAM,SAAA,GAAuB,QAAQ,MAAM;AACzC,IAAA,IAAI,SAAS,OAAO,KAAA,KAAU,YAAY,SAAA,IAAa,KAAA,IAAS,UAAU,KAAA,EAAO;AAC/E,MAAA,OAAO,KAAA;AAAA,IACT;AACA,IAAA,MAAMA,IAAAA,GAAM,QAAA;AACZ,IAAA,MAAM,QAAQA,IAAAA,EAAK,OAAA,IAAW,EAAC,EAAG,GAAA,CAAI,CAAC,CAAA,MAAO;AAAA,MAC5C,IAAI,CAAA,CAAE,EAAA;AAAA,MACN,OAAO,CAAA,CAAE,KAAA;AAAA,MACT,WAAA,EAAa,EAAE,WAAA,KAAgB;AAAA,KACjC,CAAE,CAAA;AACF,IAAA,OAAO;AAAA,MACL,OAAA,EAAS,IAAA;AAAA,MACT,MAAM;AAAC,KACT;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,QAAQ,CAAC,CAAA;AAIpB,EAAA,MAAM,OAAA,GAAU,OAAO,SAAS,CAAA;AAChC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,OAAA,GAAU,SAAA;AAAA,EACpB,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,EAAE,CAAA;AACrD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAA2B,MAAS,CAAA;AAE9E,EAAA,MAAM,UAAA,GAAa,CAAC,OAAA,KAAuB;AACzC,IAAA,QAAA,CAAS,OAAO,CAAA;AAAA,EAClB,CAAA;AAEA,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,SAAiC,EAAC;AACxC,IAAA,WAAA,CAAY,OAAA,CAAQ,OAAA,CAAQ,CAAC,GAAA,KAAQ;AACnC,MAAA,MAAA,CAAO,GAAA,CAAI,EAAE,CAAA,GAAI,EAAA;AAAA,IACnB,CAAC,CAAA;AACD,IAAA,UAAA,CAAW;AAAA,MACT,GAAG,WAAA;AAAA,MACH,IAAA,EAAM,CAAC,GAAG,WAAA,CAAY,MAAM,MAAM;AAAA,KACnC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,IAAI,CAAC,aAAA,CAAc,IAAA,EAAK,EAAG;AAC3B,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,KAAA,GAAQ,aAAA,CAAc,WAAA,EAAY,CAAE,OAAA,CAAQ,QAAQ,GAAG,CAAA,GAAI,GAAA,GAAM,IAAA,CAAK,GAAA,EAAI;AAChF,IAAA,MAAM,MAAA,GAAsB,EAAE,EAAA,EAAI,KAAA,EAAO,OAAO,aAAA,CAAc,IAAA,EAAK,EAAG,WAAA,EAAa,IAAA,EAAK;AACxF,IAAA,UAAA,CAAW;AAAA,MACT,OAAA,EAAS,CAAC,GAAG,WAAA,CAAY,SAAS,MAAM,CAAA;AAAA,MACxC,IAAA,EAAM,WAAA,CAAY,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,GAAG,GAAA,EAAK,CAAC,KAAK,GAAG,IAAG,CAAE;AAAA,KAC9D,CAAA;AACD,IAAA,gBAAA,CAAiB,EAAE,CAAA;AAAA,EACrB,CAAA;AAEA,EAAA,MAAM,iBAAA,GAAoB,CAAC,IAAA,KAA2B;AACpD,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,IAAA,EAAM,WAAW,CAAA;AACtC,IAAA,MAAM,KAAA,GAAQ,MAAA,GAAS,IAAA,CAAK,OAAA,EAAQ;AACpC,IAAA,MAAM,SAAsB,EAAE,EAAA,EAAI,KAAA,EAAO,KAAA,EAAO,aAAa,IAAA,EAAK;AAClE,IAAA,UAAA,CAAW;AAAA,MACT,OAAA,EAAS,CAAC,GAAG,WAAA,CAAY,SAAS,MAAM,CAAA;AAAA,MACxC,IAAA,EAAM,WAAA,CAAY,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,GAAG,GAAA,EAAK,CAAC,KAAK,GAAG,IAAG,CAAE;AAAA,KAC9D,CAAA;AACD,IAAA,gBAAA,CAAiB,MAAS,CAAA;AAAA,EAC5B,CAAA;AAEA,EAAA,MAAM,iBAAA,GACJ,2BAA2B,UAAA,GACvB,CAAC,CAAC,aAAA,GACF,CAAC,CAAC,aAAA,CAAc,IAAA,EAAK;AAC3B,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,2BAA2B,UAAA,EAAY;AACzC,MAAA,iBAAA,CAAkB,aAAa,CAAA;AAAA,IACjC,CAAA,MAAO;AACL,MAAA,iBAAA,EAAkB;AAAA,IACpB;AAAA,EACF,CAAA;AAGA,EAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAkB;AACnC,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,OAAA,GAAU,CAAC,GAAG,WAAA,CAAY,IAAI,CAAA;AACpC,IAAA,OAAA,CAAQ,MAAA,CAAO,OAAO,CAAC,CAAA;AACvB,IAAA,UAAA,CAAW,EAAE,GAAG,WAAA,EAAa,IAAA,EAAM,SAAS,CAAA;AAAA,EAC9C,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAkB;AACtC,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,OAAA,GAAU,YAAY,OAAA,CAAQ,MAAA,CAAO,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,KAAK,CAAA;AAChE,IAAA,MAAM,OAAA,GAAU,WAAA,CAAY,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,KAAQ;AAC5C,MAAA,MAAM,MAAA,GAAS,EAAE,GAAG,GAAA,EAAI;AACxB,MAAA,OAAO,OAAO,KAAK,CAAA;AACnB,MAAA,OAAO,MAAA;AAAA,IACT,CAAC,CAAA;AACD,IAAA,UAAA,CAAW,EAAE,OAAA,EAAS,OAAA,EAAS,IAAA,EAAM,SAAS,CAAA;AAAA,EAChD,CAAA;AAEA,EAAA,MAAM,UAAA,GAAa,CAAC,QAAA,EAAkB,KAAA,EAAe,GAAA,KAAgB;AACnE,IAAA,MAAM,cAAc,OAAA,CAAQ,OAAA;AAC5B,IAAA,MAAM,OAAA,GAAU,CAAC,GAAG,WAAA,CAAY,IAAI,CAAA;AACpC,IAAA,OAAA,CAAQ,QAAQ,CAAA,GAAI,EAAE,GAAG,OAAA,CAAQ,QAAQ,CAAA,EAAG,CAAC,KAAK,GAAG,GAAA,EAAI;AACzD,IAAA,UAAA,CAAW,EAAE,GAAG,WAAA,EAAa,IAAA,EAAM,SAAS,CAAA;AAAA,EAC9C,CAAA;AAKA,EAAA,MAAM,OAAA,GAAU,QAA6C,MAAM;AACjE,IAAA,MAAM,cAAc,SAAA,CAAU,OAAA;AAE9B,IAAA,MAAM,QAAA,GAAW,WAAA,CAAY,GAAA,CAAI,CAAC,GAAA,KAAQ;AACxC,MAAA,MAAM,gBAAA,GACJ,CAAC,QAAA,IACD,eAAA,IACC,IAAI,WAAA,KAAgB,KAAA;AACvB,MAAA,OAAO;AAAA,QACP,aAAa,GAAA,CAAI,EAAA;AAAA,QACjB,MAAA,EAAQ,sBACN,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAM,cAAI,KAAA,EAAM,CAAA;AAAA,UAChB,gBAAA,oBACE,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,OAAA;AAAA,cACR,IAAA,EAAK,IAAA;AAAA,cACL,SAAA,EAAU,0DAAA;AAAA,cACV,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,gBAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,gBAAA,YAAA,CAAa,IAAI,EAAE,CAAA;AAAA,cACrB,CAAA;AAAA,cACA,KAAA,EAAM,eAAA;AAAA,cAEN,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA;AAC9B,SAAA,EAEL,CAAA;AAAA,QAEF,IAAA,EAAM,CAAC,IAAA,KAAc;AAGnB,UAAA,uBACI,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,IAAA,CAAK,QAAA,EAAS,IAAe,EAAA;AAAA,cACpC,QAAA,EAAU,CAAC,CAAA,KAAM,UAAA,CAAW,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,GAAA,CAAI,EAAA,EAAI,CAAA,CAAE,MAAA,CAAO,KAAK,CAAA;AAAA,cAClE,QAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,QAEN;AAAA,OACF;AAAA,IACA,CAAC,CAAA;AAED,IAAA,MAAM,gBAAgB,CAAC,QAAA,IAAY,YAAA,IAAgB,SAAA,CAAU,KAAK,MAAA,GAAS,OAAA;AAE3E,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,QAAA,CAAS,IAAA,CAAK;AAAA,QACZ,EAAA,EAAI,SAAA;AAAA,QACJ,MAAA,EAAQ,EAAA;AAAA,QACR,IAAA,EAAM,CAAC,IAAA,qBACL,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,OAAA;AAAA,YACR,IAAA,EAAK,IAAA;AAAA,YACL,SAAA,EAAU,sDAAA;AAAA,YACV,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,cAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,cAAA,SAAA,CAAU,IAAA,CAAK,IAAI,KAAK,CAAA;AAAA,YAC1B,CAAA;AAAA,YACA,KAAA,EAAM,YAAA;AAAA,YAEN,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAA,EAAU,SAAA,EAAU;AAAA;AAAA;AAC9B,OAEI,CAAA;AAAA,IACV;AAEA,IAAA,OAAO,QAAA;AAAA,EACT,CAAA,EAAG,CAAC,SAAA,CAAU,OAAA,EAAS,SAAA,CAAU,IAAA,CAAK,MAAA,EAAQ,QAAA,EAAU,YAAA,EAAc,eAAA,EAAiB,OAAO,CAAC,CAAA;AAE/F,EAAA,MAAM,QAAQ,aAAA,CAAc;AAAA,IAC1B,MAAM,SAAA,CAAU,IAAA;AAAA,IAChB,OAAA;AAAA,IACA,iBAAiB,eAAA;AAAgB,GAClC,CAAA;AAED,EAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAEtB,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iCAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAO,mBAAS,KAAA,EAAM,CAAA;AAAA,MACtB,SAAS,WAAA,oBACR,GAAA,CAAC,OAAE,SAAA,EAAU,+BAAA,EAAiC,mBAAS,WAAA,EAAY;AAAA,KAAA,EAEvE,CAAA;AAAA,oBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mBAAA,EACb,+BAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eACE,QAAA,EAAA,KAAA,CAAM,eAAA,GAAkB,GAAA,CAAI,CAAC,gCAC5B,GAAA,CAAC,QAAA,EAAA,EACE,QAAA,EAAA,WAAA,CAAY,OAAA,CAAQ,IAAI,CAAC,MAAA,yBACvB,SAAA,EAAA,EACE,QAAA,EAAA,MAAA,CAAO,gBACJ,IAAA,GACA,UAAA;AAAA,QACE,MAAA,CAAO,OAAO,SAAA,CAAU,MAAA;AAAA,QACxB,OAAO,UAAA;AAAW,OACpB,EAAA,EANU,OAAO,EAOvB,CACD,KAVY,WAAA,CAAY,EAW3B,CACD,CAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,SAAA,EAAA,EACE,QAAA,EAAA,KAAA,CAAM,WAAA,EAAY,CAAE,IAAA,EAAM,MAAA,GACzB,KAAA,CAAM,WAAA,EAAY,CAAE,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBAC5B,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,YAAA,EAAY,GAAA,CAAI,aAAA,EAAc,IAAK,UAAA;AAAA,UAElC,QAAA,EAAA,GAAA,CAAI,iBAAgB,CAAE,GAAA,CAAI,CAAC,IAAA,qBAC1B,GAAA,CAAC,SAAA,EAAA,EAAwB,SAAA,EAAU,KAAA,EAChC,QAAA,EAAA,UAAA;AAAA,YACC,IAAA,CAAK,OAAO,SAAA,CAAU,IAAA;AAAA,YACtB,KAAK,UAAA;AAAW,WAClB,EAAA,EAJc,IAAA,CAAK,EAKrB,CACD;AAAA,SAAA;AAAA,QAVI,GAAA,CAAI;AAAA,OAYZ,CAAA,mBAED,GAAA,CAAC,QAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,SAAS,OAAA,CAAQ,MAAA;AAAA,UACjB,SAAA,EAAU,kBAAA;AAAA,UACX,QAAA,EAAA;AAAA;AAAA,SAGH,CAAA,EAEJ;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,IAEC,CAAC,QAAA,oBACA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,sDAAA,EACZ,QAAA,EAAA;AAAA,MAAA,SAAA,mBACC,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,QAAA;AAAA,UACL,OAAA,EAAQ,SAAA;AAAA,UACR,OAAA,EAAS,MAAA;AAAA,UAET,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAU,cAAA,EAAe,CAAA;AAAA,YAAE,GAAA;AAAA,YAAE;AAAA;AAAA;AAAA,OACrC,uBAEC,KAAA,EAAA,EAAI,CAAA;AAAA,MAGN,gCACC,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,mCAAA,EACZ,QAAA,EAAA,sBAAA,KAA2B,6BAC1B,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,cAAA;AAAA,UAAA;AAAA,YACC,QAAA,EAAU,aAAA;AAAA,YACV,WAAA,EAAa,gBAAA;AAAA,YACb,WAAA,EAAa,iBAAA;AAAA,YACb,SAAA,EAAU;AAAA;AAAA,SACZ;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,WAAA;AAAA,YACR,OAAA,EAAS,SAAA;AAAA,YACT,UAAU,CAAC,iBAAA;AAAA,YAEV,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,oBAEA,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAa,iBAAA;AAAA,YACb,KAAA,EAAO,aAAA;AAAA,YACP,UAAU,CAAC,CAAA,KAAM,gBAAA,CAAiB,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,YAChD,SAAA,EAAU,MAAA;AAAA,YACV,SAAA,EAAW,CAAC,CAAA,KAAM;AAChB,cAAA,IAAI,CAAA,CAAE,QAAQ,OAAA,EAAS;AACrB,gBAAA,CAAA,CAAE,cAAA,EAAe;AACjB,gBAAA,SAAA,EAAU;AAAA,cACZ;AAAA,YACF;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAQ,WAAA;AAAA,YACR,OAAA,EAAS,SAAA;AAAA,YACT,UAAU,CAAC,iBAAA;AAAA,YAEV,QAAA,EAAA;AAAA;AAAA;AACH,OAAA,EACF,CAAA,EAEJ;AAAA,KAAA,EAEJ;AAAA,GAAA,EAEJ,CAAA;AAEJ","file":"EditableTable-LPAYCK36.mjs","sourcesContent":["import React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n} from \"@tanstack/react-table\";\nimport { format } from \"date-fns\";\nimport { useField } from \"../../react/useField\";\nimport { Button } from \"../shadcn/button\";\nimport { Input } from \"../shadcn/input\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../shadcn/table\";\nimport { Label } from \"../shadcn/label\";\nimport { DateTimePicker } from \"../shadcn/datetime-picker\";\nimport { Trash2, Plus } from \"lucide-react\";\nimport type { EditableTableFieldDef } from \"../../core/types\";\n\n// Define the shape of our table data (matches EditableTableColumnDef + runtime)\ninterface TableColumn {\n  id: string;\n  label: string;\n  allowDelete?: boolean;\n}\n\ninterface TableData {\n  columns: TableColumn[];\n  rows: Record<string, string>[];\n}\n\ninterface EditableTableWidgetProps {\n  fieldId: string;\n}\n\n/**\n * Editable Table widget. Schema (editable_table field):\n *\n * {\n *   id: string,\n *   type: \"editable_table\",\n *   label: string,\n *   allowAddRow?: boolean,        // default true\n *   allowAddColumn?: boolean,     // default true\n *   allowDeleteRow?: boolean,     // default true\n *   allowDeleteColumn?: boolean,  // default true\n *   addRowLabel?: string,        // default \"Add Row\"\n *   addColumnLabel?: string,     // default \"Add Column\"\n *   newColumnNameHint?: string,  // placeholder for new column input; default \"New Column Name\"\n *   newColumnNameInputType?: \"text\" | \"datetime\",  // default \"text\"; \"datetime\" uses a date-time picker for column name\n *   minRows?: number,            // minimum rows to keep; row delete hidden when rows.length <= minRows; default 0\n *   columns?: Array<{\n *     id: string,\n *     label: string,\n *     allowDelete?: boolean      // if false, delete button for this column is hidden; default true\n *   }>\n * }\n */\nexport const EditableTableWidget: React.FC<EditableTableWidgetProps> = ({\n  fieldId,\n}) => {\n  const { fieldDef, value, setValue, disabled } = useField(fieldId);\n  const def = fieldDef as EditableTableFieldDef;\n  const canAddRow = def?.allowAddRow ?? true;\n  const canAddColumn = def?.allowAddColumn ?? true;\n  const canDeleteRow = def?.allowDeleteRow ?? true;\n  const canDeleteColumn = def?.allowDeleteColumn ?? true;\n\n  const minRows = def?.minRows ?? 0;\n  const addRowLabel = def?.addRowLabel ?? \"Add Row\";\n  const addColumnLabel = def?.addColumnLabel ?? \"Add Column\";\n  const newColumnNameHint = def?.newColumnNameHint ?? \"New Column Name\";\n  const newColumnNameInputType = def?.newColumnNameInputType ?? \"text\";\n\n  // Initialize data if null/undefined\n  const tableData: TableData = useMemo(() => {\n    if (value && typeof value === \"object\" && \"columns\" in value && \"rows\" in value) {\n      return value as TableData;\n    }\n    const def = fieldDef as EditableTableFieldDef;\n    const cols = (def?.columns || []).map((c) => ({\n      id: c.id,\n      label: c.label,\n      allowDelete: c.allowDelete !== false,\n    }));\n    return {\n      columns: cols,\n      rows: [],\n    };\n  }, [value, fieldDef]);\n\n  // Keep a ref to tableData so we can access the latest version in callbacks\n  // without forcing re-creation of columns (which causes focus loss).\n  const dataRef = useRef(tableData);\n  useEffect(() => {\n    dataRef.current = tableData;\n  }, [tableData]);\n\n  const [newColumnName, setNewColumnName] = useState(\"\");\n  const [newColumnDate, setNewColumnDate] = useState<Date | undefined>(undefined);\n\n  const updateData = (newData: TableData) => {\n    setValue(newData);\n  };\n\n  const addRow = () => {\n    const currentData = dataRef.current;\n    const newRow: Record<string, string> = {};\n    currentData.columns.forEach((col) => {\n      newRow[col.id] = \"\";\n    });\n    updateData({\n      ...currentData,\n      rows: [...currentData.rows, newRow],\n    });\n  };\n\n  const addColumnFromText = () => {\n    if (!newColumnName.trim()) return;\n    const currentData = dataRef.current;\n    const colId = newColumnName.toLowerCase().replace(/\\s+/g, \"_\") + \"_\" + Date.now();\n    const newCol: TableColumn = { id: colId, label: newColumnName.trim(), allowDelete: true };\n    updateData({\n      columns: [...currentData.columns, newCol],\n      rows: currentData.rows.map((row) => ({ ...row, [colId]: \"\" })),\n    });\n    setNewColumnName(\"\");\n  };\n\n  const addColumnFromDate = (date: Date | undefined) => {\n    if (!date) return;\n    const currentData = dataRef.current;\n    const label = format(date, \"PPP HH:mm\");\n    const colId = \"col_\" + date.getTime();\n    const newCol: TableColumn = { id: colId, label, allowDelete: true };\n    updateData({\n      columns: [...currentData.columns, newCol],\n      rows: currentData.rows.map((row) => ({ ...row, [colId]: \"\" })),\n    });\n    setNewColumnDate(undefined);\n  };\n\n  const hasValidNewColumn =\n    newColumnNameInputType === \"datetime\"\n      ? !!newColumnDate\n      : !!newColumnName.trim();\n  const addColumn = () => {\n    if (newColumnNameInputType === \"datetime\") {\n      addColumnFromDate(newColumnDate);\n    } else {\n      addColumnFromText();\n    }\n  };\n\n  // We use refs inside these callbacks to ensure they are stable and don't depend on changing data\n  const removeRow = (index: number) => {\n    const currentData = dataRef.current;\n    const newRows = [...currentData.rows];\n    newRows.splice(index, 1);\n    updateData({ ...currentData, rows: newRows });\n  };\n\n  const removeColumn = (colId: string) => {\n    const currentData = dataRef.current;\n    const newCols = currentData.columns.filter((c) => c.id !== colId);\n    const newRows = currentData.rows.map((row) => {\n      const newRow = { ...row };\n      delete newRow[colId];\n      return newRow;\n    });\n    updateData({ columns: newCols, rows: newRows });\n  };\n\n  const updateCell = (rowIndex: number, colId: string, val: string) => {\n    const currentData = dataRef.current;\n    const newRows = [...currentData.rows];\n    newRows[rowIndex] = { ...newRows[rowIndex], [colId]: val };\n    updateData({ ...currentData, rows: newRows });\n  };\n\n  // Generate columns for tanstack table\n  // CRITICAL: This useMemo MUST NOT depend on tableData.rows, or focus will be lost on every type.\n  // It only depends on tableData.columns (structure) and disabled state.\n  const columns = useMemo<ColumnDef<Record<string, string>>[]>(() => {\n    const currentCols = tableData.columns; // We only care about columns structure here\n    \n    const dataCols = currentCols.map((col) => {\n      const showColumnDelete =\n        !disabled &&\n        canDeleteColumn &&\n        (col.allowDelete !== false);\n      return {\n      accessorKey: col.id,\n      header: () => (\n        <div className=\"flex items-center justify-between space-x-2\">\n          <span>{col.label}</span>\n          {showColumnDelete && (\n             <Button\n               variant=\"ghost\"\n               size=\"sm\"\n               className=\"h-6 w-6 p-0 text-muted-foreground hover:text-destructive\"\n               onClick={(e) => {\n                 e.stopPropagation();\n                 removeColumn(col.id);\n               }}\n               title=\"Remove Column\"\n             >\n               <Trash2 className=\"h-3 w-3\" />\n             </Button>\n          )}\n        </div>\n      ),\n      cell: (info: any) => {\n        // We use a local component or direct render, but the key is that 'columns' array doesn't change identity.\n        // The cell will re-render because 'info.getValue()' changes, but the Input node stays mounted.\n        return (\n            <Input\n              value={info.getValue() as string || \"\"}\n              onChange={(e) => updateCell(info.row.index, col.id, e.target.value)}\n              disabled={disabled}\n              className=\"h-8 border bg-transparent\"\n            />\n        );\n      },\n    };\n    });\n\n    const showRowDelete = !disabled && canDeleteRow && tableData.rows.length > minRows;\n    // Add delete row column\n    if (showRowDelete) {\n      dataCols.push({\n        id: \"actions\",\n        header: \"\",\n        cell: (info: any) => (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0 text-destructive hover:bg-destructive/10\"\n            onClick={(e) => {\n              e.stopPropagation();\n              removeRow(info.row.index);\n            }}\n            title=\"Remove Row\"\n          >\n            <Trash2 className=\"h-4 w-4\" />\n          </Button>\n        ),\n      } as any);\n    }\n\n    return dataCols;\n  }, [tableData.columns, tableData.rows.length, disabled, canDeleteRow, canDeleteColumn, minRows]); // columns structure + row count for delete visibility\n\n  const table = useReactTable({\n    data: tableData.rows,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  if (!fieldDef) return null;\n\n  return (\n    <div className=\"space-y-4 border rounded-md p-4\">\n      <div className=\"flex flex-col space-y-2\">\n        <Label>{fieldDef.label}</Label>\n        {fieldDef.description && (\n          <p className=\"text-sm text-muted-foreground\">{fieldDef.description}</p>\n        )}\n      </div>\n\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"p-1\">\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No data. Add rows or columns to start.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {!disabled && (\n        <div className=\"flex flex-col sm:flex-row gap-4 justify-between pt-2\">\n          {canAddRow ? (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={addRow}\n            >\n              <Plus className=\"mr-2 h-4 w-4\" /> {addRowLabel}\n            </Button>\n          ) : (\n            <div />\n          )}\n\n          {canAddColumn && (\n            <div className=\"flex gap-2 items-center flex-wrap\">\n              {newColumnNameInputType === \"datetime\" ? (\n                <>\n                  <DateTimePicker\n                    dateTime={newColumnDate}\n                    setDateTime={setNewColumnDate}\n                    placeholder={newColumnNameHint}\n                    className=\"w-[280px]\"\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={addColumn}\n                    disabled={!hasValidNewColumn}\n                  >\n                    {addColumnLabel}\n                  </Button>\n                </>\n              ) : (\n                <>\n                  <Input\n                    placeholder={newColumnNameHint}\n                    value={newColumnName}\n                    onChange={(e) => setNewColumnName(e.target.value)}\n                    className=\"w-48\"\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        e.preventDefault();\n                        addColumn();\n                      }\n                    }}\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={addColumn}\n                    disabled={!hasValidNewColumn}\n                  >\n                    {addColumnLabel}\n                  </Button>\n                </>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/EditableTable-YB4IC3ZK.cjs

@@ -0,0 +1,281 @@
+'use strict';
+
+var chunkKMJOTMUQ_cjs = require('./chunk-KMJOTMUQ.cjs');
+var chunkYEFM2ERQ_cjs = require('./chunk-YEFM2ERQ.cjs');
+var chunkTJHG5WHX_cjs = require('./chunk-TJHG5WHX.cjs');
+require('./chunk-AZSAPO2V.cjs');
+require('./chunk-4KSZUIJE.cjs');
+var chunkO3VQBPEW_cjs = require('./chunk-O3VQBPEW.cjs');
+var chunkIDSBJOFY_cjs = require('./chunk-IDSBJOFY.cjs');
+var chunkJMGUUFOJ_cjs = require('./chunk-JMGUUFOJ.cjs');
+require('./chunk-FHHISVCH.cjs');
+var react = require('react');
+var reactTable = require('@tanstack/react-table');
+var dateFns = require('date-fns');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var EditableTableWidget = ({
+  fieldId
+}) => {
+  const { fieldDef, value, setValue, disabled } = chunkIDSBJOFY_cjs.useField(fieldId);
+  const def = fieldDef;
+  const canAddRow = def?.allowAddRow ?? true;
+  const canAddColumn = def?.allowAddColumn ?? true;
+  const canDeleteRow = def?.allowDeleteRow ?? true;
+  const canDeleteColumn = def?.allowDeleteColumn ?? true;
+  const minRows = def?.minRows ?? 0;
+  const addRowLabel = def?.addRowLabel ?? "Add Row";
+  const addColumnLabel = def?.addColumnLabel ?? "Add Column";
+  const newColumnNameHint = def?.newColumnNameHint ?? "New Column Name";
+  const newColumnNameInputType = def?.newColumnNameInputType ?? "text";
+  const tableData = react.useMemo(() => {
+    if (value && typeof value === "object" && "columns" in value && "rows" in value) {
+      return value;
+    }
+    const def2 = fieldDef;
+    const cols = (def2?.columns || []).map((c) => ({
+      id: c.id,
+      label: c.label,
+      allowDelete: c.allowDelete !== false
+    }));
+    return {
+      columns: cols,
+      rows: []
+    };
+  }, [value, fieldDef]);
+  const dataRef = react.useRef(tableData);
+  react.useEffect(() => {
+    dataRef.current = tableData;
+  }, [tableData]);
+  const [newColumnName, setNewColumnName] = react.useState("");
+  const [newColumnDate, setNewColumnDate] = react.useState(void 0);
+  const updateData = (newData) => {
+    setValue(newData);
+  };
+  const addRow = () => {
+    const currentData = dataRef.current;
+    const newRow = {};
+    currentData.columns.forEach((col) => {
+      newRow[col.id] = "";
+    });
+    updateData({
+      ...currentData,
+      rows: [...currentData.rows, newRow]
+    });
+  };
+  const addColumnFromText = () => {
+    if (!newColumnName.trim()) return;
+    const currentData = dataRef.current;
+    const colId = newColumnName.toLowerCase().replace(/\s+/g, "_") + "_" + Date.now();
+    const newCol = { id: colId, label: newColumnName.trim(), allowDelete: true };
+    updateData({
+      columns: [...currentData.columns, newCol],
+      rows: currentData.rows.map((row) => ({ ...row, [colId]: "" }))
+    });
+    setNewColumnName("");
+  };
+  const addColumnFromDate = (date) => {
+    if (!date) return;
+    const currentData = dataRef.current;
+    const label = dateFns.format(date, "PPP HH:mm");
+    const colId = "col_" + date.getTime();
+    const newCol = { id: colId, label, allowDelete: true };
+    updateData({
+      columns: [...currentData.columns, newCol],
+      rows: currentData.rows.map((row) => ({ ...row, [colId]: "" }))
+    });
+    setNewColumnDate(void 0);
+  };
+  const hasValidNewColumn = newColumnNameInputType === "datetime" ? !!newColumnDate : !!newColumnName.trim();
+  const addColumn = () => {
+    if (newColumnNameInputType === "datetime") {
+      addColumnFromDate(newColumnDate);
+    } else {
+      addColumnFromText();
+    }
+  };
+  const removeRow = (index) => {
+    const currentData = dataRef.current;
+    const newRows = [...currentData.rows];
+    newRows.splice(index, 1);
+    updateData({ ...currentData, rows: newRows });
+  };
+  const removeColumn = (colId) => {
+    const currentData = dataRef.current;
+    const newCols = currentData.columns.filter((c) => c.id !== colId);
+    const newRows = currentData.rows.map((row) => {
+      const newRow = { ...row };
+      delete newRow[colId];
+      return newRow;
+    });
+    updateData({ columns: newCols, rows: newRows });
+  };
+  const updateCell = (rowIndex, colId, val) => {
+    const currentData = dataRef.current;
+    const newRows = [...currentData.rows];
+    newRows[rowIndex] = { ...newRows[rowIndex], [colId]: val };
+    updateData({ ...currentData, rows: newRows });
+  };
+  const columns = react.useMemo(() => {
+    const currentCols = tableData.columns;
+    const dataCols = currentCols.map((col) => {
+      const showColumnDelete = !disabled && canDeleteColumn && col.allowDelete !== false;
+      return {
+        accessorKey: col.id,
+        header: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.label }),
+          showColumnDelete && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkO3VQBPEW_cjs.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "h-6 w-6 p-0 text-muted-foreground hover:text-destructive",
+              onClick: (e) => {
+                e.stopPropagation();
+                removeColumn(col.id);
+              },
+              title: "Remove Column",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        cell: (info) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            chunkTJHG5WHX_cjs.Input,
+            {
+              value: info.getValue() || "",
+              onChange: (e) => updateCell(info.row.index, col.id, e.target.value),
+              disabled,
+              className: "h-8 border bg-transparent"
+            }
+          );
+        }
+      };
+    });
+    const showRowDelete = !disabled && canDeleteRow && tableData.rows.length > minRows;
+    if (showRowDelete) {
+      dataCols.push({
+        id: "actions",
+        header: "",
+        cell: (info) => /* @__PURE__ */ jsxRuntime.jsx(
+          chunkO3VQBPEW_cjs.Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "h-8 w-8 p-0 text-destructive hover:bg-destructive/10",
+            onClick: (e) => {
+              e.stopPropagation();
+              removeRow(info.row.index);
+            },
+            title: "Remove Row",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+          }
+        )
+      });
+    }
+    return dataCols;
+  }, [tableData.columns, tableData.rows.length, disabled, canDeleteRow, canDeleteColumn, minRows]);
+  const table = reactTable.useReactTable({
+    data: tableData.rows,
+    columns,
+    getCoreRowModel: reactTable.getCoreRowModel()
+  });
+  if (!fieldDef) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 border rounded-md p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkJMGUUFOJ_cjs.Label, { children: fieldDef.label }),
+      fieldDef.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: fieldDef.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsxs(chunkKMJOTMUQ_cjs.Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableHead, { children: header.isPlaceholder ? null : reactTable.flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(
+        chunkKMJOTMUQ_cjs.TableRow,
+        {
+          "data-state": row.getIsSelected() && "selected",
+          children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableCell, { className: "p-1", children: reactTable.flexRender(
+            cell.column.columnDef.cell,
+            cell.getContext()
+          ) }, cell.id))
+        },
+        row.id
+      )) : /* @__PURE__ */ jsxRuntime.jsx(chunkKMJOTMUQ_cjs.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        chunkKMJOTMUQ_cjs.TableCell,
+        {
+          colSpan: columns.length,
+          className: "h-24 text-center",
+          children: "No data. Add rows or columns to start."
+        }
+      ) }) })
+    ] }) }),
+    !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-between pt-2", children: [
+      canAddRow ? /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkO3VQBPEW_cjs.Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: addRow,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "mr-2 h-4 w-4" }),
+            " ",
+            addRowLabel
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      canAddColumn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 items-center flex-wrap", children: newColumnNameInputType === "datetime" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkYEFM2ERQ_cjs.DateTimePicker,
+          {
+            dateTime: newColumnDate,
+            setDateTime: setNewColumnDate,
+            placeholder: newColumnNameHint,
+            className: "w-[280px]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkO3VQBPEW_cjs.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: addColumn,
+            disabled: !hasValidNewColumn,
+            children: addColumnLabel
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkTJHG5WHX_cjs.Input,
+          {
+            placeholder: newColumnNameHint,
+            value: newColumnName,
+            onChange: (e) => setNewColumnName(e.target.value),
+            className: "w-48",
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addColumn();
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkO3VQBPEW_cjs.Button,
+          {
+            type: "button",
+            variant: "secondary",
+            onClick: addColumn,
+            disabled: !hasValidNewColumn,
+            children: addColumnLabel
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+};
+
+exports.EditableTableWidget = EditableTableWidget;
+//# sourceMappingURL=EditableTable-YB4IC3ZK.cjs.map
+//# sourceMappingURL=EditableTable-YB4IC3ZK.cjs.map

package/dist/EditableTable-YB4IC3ZK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/widgets/EditableTable.tsx"],"names":["useField","useMemo","def","useRef","useEffect","useState","format","jsxs","jsx","Button","Trash2","Input","useReactTable","getCoreRowModel","Label","Table","TableHeader","TableRow","TableHead","flexRender","TableBody","TableCell","Plus","Fragment","DateTimePicker"],"mappings":"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","file":"EditableTable-YB4IC3ZK.cjs","sourcesContent":["import React, { useMemo, useState, useRef, useEffect } from \"react\";\nimport {\n  useReactTable,\n  getCoreRowModel,\n  flexRender,\n  type ColumnDef,\n} from \"@tanstack/react-table\";\nimport { format } from \"date-fns\";\nimport { useField } from \"../../react/useField\";\nimport { Button } from \"../shadcn/button\";\nimport { Input } from \"../shadcn/input\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"../shadcn/table\";\nimport { Label } from \"../shadcn/label\";\nimport { DateTimePicker } from \"../shadcn/datetime-picker\";\nimport { Trash2, Plus } from \"lucide-react\";\nimport type { EditableTableFieldDef } from \"../../core/types\";\n\n// Define the shape of our table data (matches EditableTableColumnDef + runtime)\ninterface TableColumn {\n  id: string;\n  label: string;\n  allowDelete?: boolean;\n}\n\ninterface TableData {\n  columns: TableColumn[];\n  rows: Record<string, string>[];\n}\n\ninterface EditableTableWidgetProps {\n  fieldId: string;\n}\n\n/**\n * Editable Table widget. Schema (editable_table field):\n *\n * {\n *   id: string,\n *   type: \"editable_table\",\n *   label: string,\n *   allowAddRow?: boolean,        // default true\n *   allowAddColumn?: boolean,     // default true\n *   allowDeleteRow?: boolean,     // default true\n *   allowDeleteColumn?: boolean,  // default true\n *   addRowLabel?: string,        // default \"Add Row\"\n *   addColumnLabel?: string,     // default \"Add Column\"\n *   newColumnNameHint?: string,  // placeholder for new column input; default \"New Column Name\"\n *   newColumnNameInputType?: \"text\" | \"datetime\",  // default \"text\"; \"datetime\" uses a date-time picker for column name\n *   minRows?: number,            // minimum rows to keep; row delete hidden when rows.length <= minRows; default 0\n *   columns?: Array<{\n *     id: string,\n *     label: string,\n *     allowDelete?: boolean      // if false, delete button for this column is hidden; default true\n *   }>\n * }\n */\nexport const EditableTableWidget: React.FC<EditableTableWidgetProps> = ({\n  fieldId,\n}) => {\n  const { fieldDef, value, setValue, disabled } = useField(fieldId);\n  const def = fieldDef as EditableTableFieldDef;\n  const canAddRow = def?.allowAddRow ?? true;\n  const canAddColumn = def?.allowAddColumn ?? true;\n  const canDeleteRow = def?.allowDeleteRow ?? true;\n  const canDeleteColumn = def?.allowDeleteColumn ?? true;\n\n  const minRows = def?.minRows ?? 0;\n  const addRowLabel = def?.addRowLabel ?? \"Add Row\";\n  const addColumnLabel = def?.addColumnLabel ?? \"Add Column\";\n  const newColumnNameHint = def?.newColumnNameHint ?? \"New Column Name\";\n  const newColumnNameInputType = def?.newColumnNameInputType ?? \"text\";\n\n  // Initialize data if null/undefined\n  const tableData: TableData = useMemo(() => {\n    if (value && typeof value === \"object\" && \"columns\" in value && \"rows\" in value) {\n      return value as TableData;\n    }\n    const def = fieldDef as EditableTableFieldDef;\n    const cols = (def?.columns || []).map((c) => ({\n      id: c.id,\n      label: c.label,\n      allowDelete: c.allowDelete !== false,\n    }));\n    return {\n      columns: cols,\n      rows: [],\n    };\n  }, [value, fieldDef]);\n\n  // Keep a ref to tableData so we can access the latest version in callbacks\n  // without forcing re-creation of columns (which causes focus loss).\n  const dataRef = useRef(tableData);\n  useEffect(() => {\n    dataRef.current = tableData;\n  }, [tableData]);\n\n  const [newColumnName, setNewColumnName] = useState(\"\");\n  const [newColumnDate, setNewColumnDate] = useState<Date | undefined>(undefined);\n\n  const updateData = (newData: TableData) => {\n    setValue(newData);\n  };\n\n  const addRow = () => {\n    const currentData = dataRef.current;\n    const newRow: Record<string, string> = {};\n    currentData.columns.forEach((col) => {\n      newRow[col.id] = \"\";\n    });\n    updateData({\n      ...currentData,\n      rows: [...currentData.rows, newRow],\n    });\n  };\n\n  const addColumnFromText = () => {\n    if (!newColumnName.trim()) return;\n    const currentData = dataRef.current;\n    const colId = newColumnName.toLowerCase().replace(/\\s+/g, \"_\") + \"_\" + Date.now();\n    const newCol: TableColumn = { id: colId, label: newColumnName.trim(), allowDelete: true };\n    updateData({\n      columns: [...currentData.columns, newCol],\n      rows: currentData.rows.map((row) => ({ ...row, [colId]: \"\" })),\n    });\n    setNewColumnName(\"\");\n  };\n\n  const addColumnFromDate = (date: Date | undefined) => {\n    if (!date) return;\n    const currentData = dataRef.current;\n    const label = format(date, \"PPP HH:mm\");\n    const colId = \"col_\" + date.getTime();\n    const newCol: TableColumn = { id: colId, label, allowDelete: true };\n    updateData({\n      columns: [...currentData.columns, newCol],\n      rows: currentData.rows.map((row) => ({ ...row, [colId]: \"\" })),\n    });\n    setNewColumnDate(undefined);\n  };\n\n  const hasValidNewColumn =\n    newColumnNameInputType === \"datetime\"\n      ? !!newColumnDate\n      : !!newColumnName.trim();\n  const addColumn = () => {\n    if (newColumnNameInputType === \"datetime\") {\n      addColumnFromDate(newColumnDate);\n    } else {\n      addColumnFromText();\n    }\n  };\n\n  // We use refs inside these callbacks to ensure they are stable and don't depend on changing data\n  const removeRow = (index: number) => {\n    const currentData = dataRef.current;\n    const newRows = [...currentData.rows];\n    newRows.splice(index, 1);\n    updateData({ ...currentData, rows: newRows });\n  };\n\n  const removeColumn = (colId: string) => {\n    const currentData = dataRef.current;\n    const newCols = currentData.columns.filter((c) => c.id !== colId);\n    const newRows = currentData.rows.map((row) => {\n      const newRow = { ...row };\n      delete newRow[colId];\n      return newRow;\n    });\n    updateData({ columns: newCols, rows: newRows });\n  };\n\n  const updateCell = (rowIndex: number, colId: string, val: string) => {\n    const currentData = dataRef.current;\n    const newRows = [...currentData.rows];\n    newRows[rowIndex] = { ...newRows[rowIndex], [colId]: val };\n    updateData({ ...currentData, rows: newRows });\n  };\n\n  // Generate columns for tanstack table\n  // CRITICAL: This useMemo MUST NOT depend on tableData.rows, or focus will be lost on every type.\n  // It only depends on tableData.columns (structure) and disabled state.\n  const columns = useMemo<ColumnDef<Record<string, string>>[]>(() => {\n    const currentCols = tableData.columns; // We only care about columns structure here\n    \n    const dataCols = currentCols.map((col) => {\n      const showColumnDelete =\n        !disabled &&\n        canDeleteColumn &&\n        (col.allowDelete !== false);\n      return {\n      accessorKey: col.id,\n      header: () => (\n        <div className=\"flex items-center justify-between space-x-2\">\n          <span>{col.label}</span>\n          {showColumnDelete && (\n             <Button\n               variant=\"ghost\"\n               size=\"sm\"\n               className=\"h-6 w-6 p-0 text-muted-foreground hover:text-destructive\"\n               onClick={(e) => {\n                 e.stopPropagation();\n                 removeColumn(col.id);\n               }}\n               title=\"Remove Column\"\n             >\n               <Trash2 className=\"h-3 w-3\" />\n             </Button>\n          )}\n        </div>\n      ),\n      cell: (info: any) => {\n        // We use a local component or direct render, but the key is that 'columns' array doesn't change identity.\n        // The cell will re-render because 'info.getValue()' changes, but the Input node stays mounted.\n        return (\n            <Input\n              value={info.getValue() as string || \"\"}\n              onChange={(e) => updateCell(info.row.index, col.id, e.target.value)}\n              disabled={disabled}\n              className=\"h-8 border bg-transparent\"\n            />\n        );\n      },\n    };\n    });\n\n    const showRowDelete = !disabled && canDeleteRow && tableData.rows.length > minRows;\n    // Add delete row column\n    if (showRowDelete) {\n      dataCols.push({\n        id: \"actions\",\n        header: \"\",\n        cell: (info: any) => (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0 text-destructive hover:bg-destructive/10\"\n            onClick={(e) => {\n              e.stopPropagation();\n              removeRow(info.row.index);\n            }}\n            title=\"Remove Row\"\n          >\n            <Trash2 className=\"h-4 w-4\" />\n          </Button>\n        ),\n      } as any);\n    }\n\n    return dataCols;\n  }, [tableData.columns, tableData.rows.length, disabled, canDeleteRow, canDeleteColumn, minRows]); // columns structure + row count for delete visibility\n\n  const table = useReactTable({\n    data: tableData.rows,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  if (!fieldDef) return null;\n\n  return (\n    <div className=\"space-y-4 border rounded-md p-4\">\n      <div className=\"flex flex-col space-y-2\">\n        <Label>{fieldDef.label}</Label>\n        {fieldDef.description && (\n          <p className=\"text-sm text-muted-foreground\">{fieldDef.description}</p>\n        )}\n      </div>\n\n      <div className=\"rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"p-1\">\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No data. Add rows or columns to start.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {!disabled && (\n        <div className=\"flex flex-col sm:flex-row gap-4 justify-between pt-2\">\n          {canAddRow ? (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={addRow}\n            >\n              <Plus className=\"mr-2 h-4 w-4\" /> {addRowLabel}\n            </Button>\n          ) : (\n            <div />\n          )}\n\n          {canAddColumn && (\n            <div className=\"flex gap-2 items-center flex-wrap\">\n              {newColumnNameInputType === \"datetime\" ? (\n                <>\n                  <DateTimePicker\n                    dateTime={newColumnDate}\n                    setDateTime={setNewColumnDate}\n                    placeholder={newColumnNameHint}\n                    className=\"w-[280px]\"\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={addColumn}\n                    disabled={!hasValidNewColumn}\n                  >\n                    {addColumnLabel}\n                  </Button>\n                </>\n              ) : (\n                <>\n                  <Input\n                    placeholder={newColumnNameHint}\n                    value={newColumnName}\n                    onChange={(e) => setNewColumnName(e.target.value)}\n                    className=\"w-48\"\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") {\n                        e.preventDefault();\n                        addColumn();\n                      }\n                    }}\n                  />\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={addColumn}\n                    disabled={!hasValidNewColumn}\n                  >\n                    {addColumnLabel}\n                  </Button>\n                </>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n"]}