@updog/data-editor 0.1.14 → 0.1.16

package/README.md

@@ -62,14 +62,13 @@ export function App() {
           const res = await fetch("/api/employees");
           onChunk(await res.json());
         }}
-        onComplete={async (result, actions) => {
+        onComplete={async (result) => {
           for (const source of result.sources) {
             const inserts = source.rows.filter((r) => r.isNew && !r.isDeleted && r.isValid);
             const updates = source.rows.filter((r) => !r.isNew && r.isChanged && !r.isDeleted && r.isValid);
             const deletes = source.rows.filter((r) => r.isDeleted && !r.isNew);
             await persist(source.sourceId, { inserts, updates, deletes });
           }
-          actions.reset();
           setOpen(false);
         }}
       />
@@ -121,7 +120,7 @@ In inline mode, `open` and `onClose` don't apply.
 | `open` | `boolean` | Modal only | — | Controlled modal visibility. |
 | `onClose` | `() => void` | Modal only | — | Called when the user closes the modal (X button or Escape). |
 | `loadData` | `(onChunk) => Promise<void>` | No | — | Async data loader. Stream rows in chunks, optionally tagged by source. |
-| `onComplete` | `(result, actions) => void` | No | — | Called on submit. See [Submission Result](#submission-result). |
+| `onComplete` | `(result) => void \| Promise<void>` | No | — | Called on submit. See [Submission Result](#submission-result). |
 | `variant` | `"editor"` \| `"uploader"` | No | `"editor"` | Initial view. `"uploader"` opens the import wizard first. |
 | `translations` | `DataEditorTranslations` | No | — | Partial i18n overrides. |
 | `locale` | `string` | No | `"en"` | BCP 47 locale tag. |
@@ -263,7 +262,7 @@ loadData={async (onChunk) => {
 
 ## Submission Result
 
-`onComplete(result, actions)` fires when the user submits.
+`onComplete(result)` fires when the user submits. May return a promise.
 
 ```ts
 type DataEditorResult<TRow> = {
@@ -280,23 +279,18 @@ type DataEditorResult<TRow> = {
   }[];
   counts: { new: number; changed: number; deleted: number; invalid: number };
 };
-
-type DataEditorActions = {
-  reset: () => void; // discard changes and reload via loadData
-};
 ```
 
 Pristine backend rows (unchanged, not deleted, not new) are omitted from `sources[].rows` — they're no-ops. The flags are orthogonal: a row can be new, changed, and deleted at once. You own the routing rules:
 
 ```tsx
-onComplete={async (result, actions) => {
+onComplete={async (result) => {
   for (const source of result.sources) {
     const inserts = source.rows.filter((r) => r.isNew && !r.isDeleted && r.isValid);
     const updates = source.rows.filter((r) => !r.isNew && r.isChanged && !r.isDeleted && r.isValid);
     const deletes = source.rows.filter((r) => r.isDeleted && !r.isNew);
     await persist(source.sourceId, { inserts, updates, deletes });
   }
-  actions.reset();
 }}
 ```
 

package/index.d.ts

@@ -2606,14 +2606,6 @@ type UndoRedoResult = {
     success: boolean;
     targetCell?: CellLocation;
 };
-/**
- * Actions available inside the `onComplete` callback. Call `reset()` after a
- * successful save to clear the editor and re-fetch via `loadData`.
- */
-type DataEditorActions = {
-    /** Discard all changes and reload the original data via `loadData`. */
-    reset: () => void;
-};
 /**
  * A single row in the submit result, with orthogonal flags describing its state.
  *
@@ -2651,14 +2643,13 @@ type DataEditorSourceResult<TRow extends DataEditorRow = DataEditorRow> = {
  *
  * @example
  * ```ts
- * onComplete={async (result, actions) => {
+ * onComplete={async (result) => {
  *   for (const source of result.sources) {
  *     const inserts = source.rows.filter(r => r.isNew && !r.isDeleted && r.isValid);
  *     const updates = source.rows.filter(r => !r.isNew && r.isChanged && !r.isDeleted && r.isValid);
  *     const deletes = source.rows.filter(r => r.isDeleted && !r.isNew);
  *     await persist(source.sourceId, { inserts, updates, deletes });
  *   }
- *   actions.reset();
  * }}
  * ```
  */
@@ -2847,22 +2838,21 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
     loadData?: (onChunk: (rows: TRow[], options?: ChunkSourceOptions) => void) => Promise<void>;
     /**
      * Called when the user clicks "Submit". Receives the edited data grouped
-     * by source. Use `actions.reset()` to clear changes after a successful save.
+     * by source. May return a promise.
      *
      * @example
      * ```ts
-     * onComplete={async (result, actions) => {
+     * onComplete={async (result) => {
      *   for (const source of result.sources) {
      *     const inserts = source.rows.filter(r => r.isNew && !r.isDeleted && r.isValid);
      *     const updates = source.rows.filter(r => !r.isNew && r.isChanged && !r.isDeleted && r.isValid);
      *     const deletes = source.rows.filter(r => r.isDeleted && !r.isNew);
      *     await persist(source.sourceId, { inserts, updates, deletes });
      *   }
-     *   actions.reset();
      * }}
      * ```
      */
-    onComplete?: (result: DataEditorResult<TRow>, actions: DataEditorActions) => void;
+    onComplete?: (result: DataEditorResult<TRow>) => void | Promise<void>;
     /**
      * Controls the initial view. `"editor"` opens directly to the spreadsheet
      * grid. `"uploader"` opens the file import wizard first — the user uploads
@@ -2930,7 +2920,7 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
      */
     rtl?: boolean;
     /**
-     * Allow creating new columns for unmatched CSV headers during import. When
+     * Allow creating new columns for unmatched headers during import. When
      * enabled, users can keep data from columns that don't match your schema by
      * creating dynamic columns on the fly.
      * @default true
@@ -3072,7 +3062,7 @@ type DataEditorInlineProps<TRow extends DataEditorRow = DataEditorRow> = DataEdi
  *   columns={columns}
  *   primaryKey="id"
  *   loadData={async (onChunk) => onChunk(await fetchRows())}
- *   onComplete={(result, actions) => { saveChanges(result); actions.reset(); }}
+ *   onComplete={async (result) => { await saveChanges(result); }}
  * />
  *
  * // Inline mode
@@ -3082,7 +3072,7 @@ type DataEditorInlineProps<TRow extends DataEditorRow = DataEditorRow> = DataEdi
  *   columns={columns}
  *   primaryKey="id"
  *   loadData={async (onChunk) => onChunk(await fetchRows())}
- *   onComplete={(result, actions) => { saveChanges(result); actions.reset(); }}
+ *   onComplete={async (result) => { await saveChanges(result); }}
  * />
  * ```
  */
@@ -3133,7 +3123,7 @@ declare function exportDataEditor<TRow extends DataEditorRow>(params: ExportPara
  *   primaryKey="id"
  *   server={{ url: scaleUrl }}
  *   loadData={async (onChunk) => onChunk(await fetchRows())}
- *   onComplete={(result, actions) => { saveChanges(result); actions.reset(); }}
+ *   onComplete={async (result) => { await saveChanges(result); }}
  * />
  * ```
  */

package/index.js

@@ -13017,49 +13017,53 @@ async function Lh(e) {
 }
 //#endregion
 //#region src/components/DataEditor/ConfirmCompleteDialog/index.tsx
-var Rh = ({ open: e, onClose: t, onConfirm: n }) => {
-	let { store: r } = X(), { t: i } = q(), { newRowCount: a, dirtyRowCount: o, deletedRowCount: s, errorCount: c } = Mo(r), l = o - a, u = c > 0;
+var Rh = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
+	let { store: i } = X(), { t: a } = q(), { newRowCount: o, dirtyRowCount: s, deletedRowCount: c, errorCount: l } = Mo(i), u = s - o, d = l > 0;
 	return /* @__PURE__ */ w(Vi, {
 		open: e,
-		onOpenChange: t,
-		title: i("dataEditor.confirmSubmit.title"),
+		onOpenChange: f((e) => {
+			r || e || t();
+		}, [r, t]),
+		title: a("dataEditor.confirmSubmit.title"),
 		className: "updog__confirm-complete-dialog",
 		children: [/* @__PURE__ */ w(zi, {
 			className: "updog__confirm-complete-dialog__body",
 			children: [
-				/* @__PURE__ */ C(J, { children: i("dataEditor.confirmSubmit.text") }),
+				/* @__PURE__ */ C(J, { children: a("dataEditor.confirmSubmit.text") }),
 				/* @__PURE__ */ w("ul", {
 					className: "updog__confirm-complete-dialog__list",
 					children: [
-						a > 0 && /* @__PURE__ */ C(J, {
+						o > 0 && /* @__PURE__ */ C(J, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.createRows", { count: a })
+							children: a("dataEditor.confirmSubmit.createRows", { count: o })
 						}),
-						l > 0 && /* @__PURE__ */ C(J, {
+						u > 0 && /* @__PURE__ */ C(J, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.updateRows", { count: l })
+							children: a("dataEditor.confirmSubmit.updateRows", { count: u })
 						}),
-						s > 0 && /* @__PURE__ */ C(J, {
+						c > 0 && /* @__PURE__ */ C(J, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.deleteRows", { count: s })
+							children: a("dataEditor.confirmSubmit.deleteRows", { count: c })
 						})
 					]
 				}),
-				u && /* @__PURE__ */ C(ti, {
+				d && /* @__PURE__ */ C(ti, {
 					color: "yellow",
-					text: i("dataEditor.confirmSubmit.bannerTitle", { count: c })
+					text: a("dataEditor.confirmSubmit.bannerTitle", { count: l })
 				})
 			]
 		}), /* @__PURE__ */ w(Bi, { children: [/* @__PURE__ */ C(Y, {
 			variant: "outlined",
 			color: "neutral",
 			onClick: t,
-			children: i("dataEditor.common.cancel")
+			disabled: r,
+			children: a("dataEditor.common.cancel")
 		}), /* @__PURE__ */ C(Y, {
 			onClick: n,
 			variant: "filled",
 			color: "primary",
-			children: i("dataEditor.confirmSubmit.action")
+			loading: r,
+			children: a("dataEditor.confirmSubmit.action")
 		})] })]
 	});
 }, zh = () => {
@@ -13078,67 +13082,74 @@ var Rh = ({ open: e, onClose: t, onConfirm: n }) => {
 		})
 	});
 }, Bh = () => {
-	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = X(), { t: o, rtl: s } = q(), { canUndo: c, canRedo: l, undo: u, redo: d } = Vo(e, a), { dirtyRowCount: p, deletedRowCount: m, isLoading: h, sources: g, phase: _ } = Mo(e), y = p > 0 || m > 0, x = h || g.some((e) => e.isLoading), T = _ === "processing", [E, D] = b(!1), { value: O, setTrue: k, setFalse: A } = Ao(!1), j = f(() => {
-		n && (n(e.getResultBySource(), { reset: () => e.clear() }), A());
+	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = X(), { t: o, rtl: s } = q(), { canUndo: c, canRedo: l, undo: u, redo: d } = Vo(e, a), { dirtyRowCount: p, deletedRowCount: m, isLoading: h, sources: g, phase: _ } = Mo(e), y = p > 0 || m > 0, x = h || g.some((e) => e.isLoading), T = _ === "processing", [E, D] = b(!1), { value: O, setTrue: k, setFalse: A } = Ao(!1), [j, M] = b(!1), N = f(async () => {
+		if (!n) return;
+		let t = e.getResultBySource();
+		M(!0);
+		try {
+			await n(t), e.clear(), A();
+		} catch {} finally {
+			M(!1);
+		}
 	}, [
 		e,
 		n,
 		A
-	]), M = o("dataEditor.footer.export"), N = o("dataEditor.footer.exportAll"), P = o("dataEditor.footer.exportFiltered"), F = o("dataEditor.footer.csvFormat"), I = o("dataEditor.footer.excelFormat"), L = o("dataEditor.footer.jsonFormat"), z = o("dataEditor.footer.tsvFormat"), B = o("dataEditor.footer.xmlFormat"), V = v(() => [
+	]), P = o("dataEditor.footer.export"), F = o("dataEditor.footer.exportAll"), I = o("dataEditor.footer.exportFiltered"), L = o("dataEditor.footer.csvFormat"), z = o("dataEditor.footer.excelFormat"), B = o("dataEditor.footer.jsonFormat"), V = o("dataEditor.footer.tsvFormat"), H = o("dataEditor.footer.xmlFormat"), ee = v(() => [
 		{
 			menuId: "csv",
 			format: "csv",
-			text: F
+			text: L
 		},
 		{
 			menuId: "tsv",
 			format: "tsv",
-			text: z
+			text: V
 		},
 		{
 			menuId: "excel",
 			format: "xlsx",
-			text: I
+			text: z
 		},
 		{
 			menuId: "json",
 			format: "json",
-			text: L
+			text: B
 		},
 		{
 			menuId: "xml",
 			format: "xml",
-			text: B
+			text: H
 		}
 	], [
-		F,
-		z,
-		I,
 		L,
-		B
-	]), H = r.length > 0 && (!e.isServer() || e.hasServerExport), ee = v(() => {
-		let e = V.filter((e) => r.includes(e.format));
+		V,
+		z,
+		B,
+		H
+	]), U = r.length > 0 && (!e.isServer() || e.hasServerExport), te = v(() => {
+		let e = ee.filter((e) => r.includes(e.format));
 		return [{
 			id: "export-all",
-			text: N,
+			text: F,
 			options: e.map((e) => ({
 				id: `all-${e.menuId}`,
 				text: e.text
 			}))
 		}, {
 			id: "export-filtered",
-			text: P,
+			text: I,
 			options: e.map((e) => ({
 				id: `filtered-${e.menuId}`,
 				text: e.text
 			}))
 		}];
 	}, [
-		N,
-		P,
-		V,
+		F,
+		I,
+		ee,
 		r
-	]), U = f((n) => {
+	]), ne = f((n) => {
 		let [r, i] = n.split("-"), a = {
 			csv: "csv",
 			tsv: "tsv",
@@ -13157,7 +13168,7 @@ var Rh = ({ open: e, onClose: t, onConfirm: n }) => {
 		e,
 		t,
 		s
-	]), te = o("dataEditor.footer.submit");
+	]), re = o("dataEditor.footer.submit");
 	return /* @__PURE__ */ w(S, { children: [/* @__PURE__ */ w("footer", {
 		className: "updog__data-editor-footer",
 		children: [/* @__PURE__ */ C(zh, {}), /* @__PURE__ */ w("div", {
@@ -13184,9 +13195,9 @@ var Rh = ({ open: e, onClose: t, onConfirm: n }) => {
 						children: /* @__PURE__ */ C(Ce, { className: "rtl-mirror" })
 					})
 				})] }),
-				H && /* @__PURE__ */ C(Ma, {
-					options: ee,
-					onSelect: U,
+				U && /* @__PURE__ */ C(Ma, {
+					options: te,
+					onSelect: ne,
 					placement: "top-end",
 					children: /* @__PURE__ */ C(Y, {
 						variant: "outlined",
@@ -13195,20 +13206,21 @@ var Rh = ({ open: e, onClose: t, onConfirm: n }) => {
 						disabled: x || T,
 						spinnerPosition: "end",
 						endIcon: /* @__PURE__ */ C(R, {}),
-						children: M
+						children: P
 					})
 				}),
 				!i && /* @__PURE__ */ C(Y, {
-					disabled: !y || T,
+					disabled: !y || T || j,
 					onClick: k,
-					children: te
+					children: re
 				})
 			]
 		})]
 	}), /* @__PURE__ */ C(Rh, {
 		open: O,
 		onClose: A,
-		onConfirm: j
+		onConfirm: N,
+		loading: j
 	})] });
 }, Vh = ({ initialValues: e, existingNames: t, onClose: n, onSubmit: r }) => {
 	let { t: i } = q(), a = e.id !== void 0, o = v(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Client-side CSV importer and spreadsheet editor SDK for React. Import CSV, Excel, JSON, TSV, and XML, match columns, validate, and edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",