@updog/data-editor-wc 0.1.14 → 0.1.16

package/README.md

@@ -61,14 +61,13 @@ How you wire the element into a framework (Angular's `CUSTOM_ELEMENTS_SCHEMA`, V
       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();
       editor.hide();
     },
   });
@@ -109,7 +108,7 @@ Everything else — objects, functions, arrays — must be set as a JS property
 const editor = document.querySelector("updog-editor");
 editor.columns = [...];
 editor.loadData = async (onChunk) => { ... };
-editor.onComplete = (result, actions) => { ... };
+editor.onComplete = async (result) => { ... };
 ```
 
 ### `configure(props)`
@@ -122,7 +121,7 @@ editor.configure({
   primaryKey: "id",
   columns: [...],
   loadData: async (onChunk) => onChunk(await fetchRows()),
-  onComplete: (result, actions) => { save(result); actions.reset(); },
+  onComplete: async (result) => { await save(result); },
 });
 ```
 
@@ -146,7 +145,7 @@ In inline mode, `show()` / `hide()` and the `open` attribute don't apply. The `c
 | `mode` | `"modal"` \| `"inline"` | No | `"modal"` | Rendering mode. |
 | `open` | `boolean` | Modal only | — | Controlled modal visibility. Equivalent to `show()` / `hide()`. |
 | `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. |
@@ -303,7 +302,7 @@ editor.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 = {
@@ -320,23 +319,18 @@ type DataEditorResult = {
   }[];
   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:
 
 ```js
-editor.onComplete = async (result, actions) => {
+editor.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

@@ -959,14 +959,6 @@ type ScaleServerConfig = {
     url: string;
 };
 
-/**
- * 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.
  *
@@ -1004,14 +996,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();
  * }}
  * ```
  */
@@ -1148,22 +1139,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
@@ -1231,7 +1221,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
@@ -1368,7 +1358,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
@@ -1378,7 +1368,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); }}
  * />
  * ```
  */
@@ -1409,9 +1399,8 @@ type Props = DataEditorProps;
  *   onChunk(rows);
  * };
  *
- * editor.onComplete = (result, actions) => {
- *   console.log("Valid rows:", result.valid);
- *   actions.reset();
+ * editor.onComplete = async (result) => {
+ *   await save(result);
  * };
  *
  * editor.addEventListener("close", () => editor.hide());

package/index.js

@@ -25232,49 +25232,53 @@ async function Mv(e) {
 }
 //#endregion
 //#region src/components/DataEditor/ConfirmCompleteDialog/index.tsx
-var Nv = ({ open: e, onClose: t, onConfirm: n }) => {
-	let { store: r } = Bd(), { t: i } = k(), { newRowCount: a, dirtyRowCount: o, deletedRowCount: s, errorCount: c } = nl(r), l = o - a, u = c > 0;
+var Nv = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
+	let { store: i } = Bd(), { t: a } = k(), { newRowCount: o, dirtyRowCount: s, deletedRowCount: c, errorCount: l } = nl(i), u = s - o, d = l > 0;
 	return /* @__PURE__ */ (0, E.jsxs)(fs, {
 		open: e,
-		onOpenChange: t,
-		title: i("dataEditor.confirmSubmit.title"),
+		onOpenChange: (0, _.useCallback)((e) => {
+			r || e || t();
+		}, [r, t]),
+		title: a("dataEditor.confirmSubmit.title"),
 		className: "updog__confirm-complete-dialog",
 		children: [/* @__PURE__ */ (0, E.jsxs)(us, {
 			className: "updog__confirm-complete-dialog__body",
 			children: [
-				/* @__PURE__ */ (0, E.jsx)(W, { children: i("dataEditor.confirmSubmit.text") }),
+				/* @__PURE__ */ (0, E.jsx)(W, { children: a("dataEditor.confirmSubmit.text") }),
 				/* @__PURE__ */ (0, E.jsxs)("ul", {
 					className: "updog__confirm-complete-dialog__list",
 					children: [
-						a > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
+						o > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.createRows", { count: a })
+							children: a("dataEditor.confirmSubmit.createRows", { count: o })
 						}),
-						l > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
+						u > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.updateRows", { count: l })
+							children: a("dataEditor.confirmSubmit.updateRows", { count: u })
 						}),
-						s > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
+						c > 0 && /* @__PURE__ */ (0, E.jsx)(W, {
 							as: "li",
-							children: i("dataEditor.confirmSubmit.deleteRows", { count: s })
+							children: a("dataEditor.confirmSubmit.deleteRows", { count: c })
 						})
 					]
 				}),
-				u && /* @__PURE__ */ (0, E.jsx)(Ke, {
+				d && /* @__PURE__ */ (0, E.jsx)(Ke, {
 					color: "yellow",
-					text: i("dataEditor.confirmSubmit.bannerTitle", { count: c })
+					text: a("dataEditor.confirmSubmit.bannerTitle", { count: l })
 				})
 			]
 		}), /* @__PURE__ */ (0, E.jsxs)(ds, { children: [/* @__PURE__ */ (0, E.jsx)(tt, {
 			variant: "outlined",
 			color: "neutral",
 			onClick: t,
-			children: i("dataEditor.common.cancel")
+			disabled: r,
+			children: a("dataEditor.common.cancel")
 		}), /* @__PURE__ */ (0, E.jsx)(tt, {
 			onClick: n,
 			variant: "filled",
 			color: "primary",
-			children: i("dataEditor.confirmSubmit.action")
+			loading: r,
+			children: a("dataEditor.confirmSubmit.action")
 		})] })]
 	});
 }, Pv = () => {
@@ -25293,67 +25297,74 @@ var Nv = ({ open: e, onClose: t, onConfirm: n }) => {
 		})
 	});
 }, Fv = () => {
-	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = Bd(), { t: o, rtl: s } = k(), { canUndo: c, canRedo: l, undo: u, redo: d } = dl(e, a), { dirtyRowCount: f, deletedRowCount: p, isLoading: m, sources: h, phase: g } = nl(e), v = f > 0 || p > 0, y = m || h.some((e) => e.isLoading), b = g === "processing", [x, S] = (0, _.useState)(!1), { value: C, setTrue: w, setFalse: T } = el(!1), D = (0, _.useCallback)(() => {
-		n && (n(e.getResultBySource(), { reset: () => e.clear() }), T());
+	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = Bd(), { t: o, rtl: s } = k(), { canUndo: c, canRedo: l, undo: u, redo: d } = dl(e, a), { dirtyRowCount: f, deletedRowCount: p, isLoading: m, sources: h, phase: g } = nl(e), v = f > 0 || p > 0, y = m || h.some((e) => e.isLoading), b = g === "processing", [x, S] = (0, _.useState)(!1), { value: C, setTrue: w, setFalse: T } = el(!1), [D, O] = (0, _.useState)(!1), A = (0, _.useCallback)(async () => {
+		if (!n) return;
+		let t = e.getResultBySource();
+		O(!0);
+		try {
+			await n(t), e.clear(), T();
+		} catch {} finally {
+			O(!1);
+		}
 	}, [
 		e,
 		n,
 		T
-	]), O = o("dataEditor.footer.export"), A = o("dataEditor.footer.exportAll"), j = o("dataEditor.footer.exportFiltered"), M = o("dataEditor.footer.csvFormat"), N = o("dataEditor.footer.excelFormat"), P = o("dataEditor.footer.jsonFormat"), F = o("dataEditor.footer.tsvFormat"), I = o("dataEditor.footer.xmlFormat"), L = (0, _.useMemo)(() => [
+	]), j = o("dataEditor.footer.export"), M = o("dataEditor.footer.exportAll"), N = o("dataEditor.footer.exportFiltered"), P = o("dataEditor.footer.csvFormat"), F = o("dataEditor.footer.excelFormat"), I = o("dataEditor.footer.jsonFormat"), L = o("dataEditor.footer.tsvFormat"), R = o("dataEditor.footer.xmlFormat"), z = (0, _.useMemo)(() => [
 		{
 			menuId: "csv",
 			format: "csv",
-			text: M
+			text: P
 		},
 		{
 			menuId: "tsv",
 			format: "tsv",
-			text: F
+			text: L
 		},
 		{
 			menuId: "excel",
 			format: "xlsx",
-			text: N
+			text: F
 		},
 		{
 			menuId: "json",
 			format: "json",
-			text: P
+			text: I
 		},
 		{
 			menuId: "xml",
 			format: "xml",
-			text: I
+			text: R
 		}
 	], [
-		M,
-		F,
-		N,
 		P,
-		I
-	]), R = r.length > 0 && (!e.isServer() || e.hasServerExport), z = (0, _.useMemo)(() => {
-		let e = L.filter((e) => r.includes(e.format));
+		L,
+		F,
+		I,
+		R
+	]), B = r.length > 0 && (!e.isServer() || e.hasServerExport), V = (0, _.useMemo)(() => {
+		let e = z.filter((e) => r.includes(e.format));
 		return [{
 			id: "export-all",
-			text: A,
+			text: M,
 			options: e.map((e) => ({
 				id: `all-${e.menuId}`,
 				text: e.text
 			}))
 		}, {
 			id: "export-filtered",
-			text: j,
+			text: N,
 			options: e.map((e) => ({
 				id: `filtered-${e.menuId}`,
 				text: e.text
 			}))
 		}];
 	}, [
-		A,
-		j,
-		L,
+		M,
+		N,
+		z,
 		r
-	]), B = (0, _.useCallback)((n) => {
+	]), H = (0, _.useCallback)((n) => {
 		let [r, i] = n.split("-"), a = {
 			csv: "csv",
 			tsv: "tsv",
@@ -25372,7 +25383,7 @@ var Nv = ({ open: e, onClose: t, onConfirm: n }) => {
 		e,
 		t,
 		s
-	]), V = o("dataEditor.footer.submit");
+	]), U = o("dataEditor.footer.submit");
 	return /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsxs)("footer", {
 		className: "updog__data-editor-footer",
 		children: [/* @__PURE__ */ (0, E.jsx)(Pv, {}), /* @__PURE__ */ (0, E.jsxs)("div", {
@@ -25399,9 +25410,9 @@ var Nv = ({ open: e, onClose: t, onConfirm: n }) => {
 						children: /* @__PURE__ */ (0, E.jsx)(ke, { className: "rtl-mirror" })
 					})
 				})] }),
-				R && /* @__PURE__ */ (0, E.jsx)(rc, {
-					options: z,
-					onSelect: B,
+				B && /* @__PURE__ */ (0, E.jsx)(rc, {
+					options: V,
+					onSelect: H,
 					placement: "top-end",
 					children: /* @__PURE__ */ (0, E.jsx)(tt, {
 						variant: "outlined",
@@ -25410,20 +25421,21 @@ var Nv = ({ open: e, onClose: t, onConfirm: n }) => {
 						disabled: y || b,
 						spinnerPosition: "end",
 						endIcon: /* @__PURE__ */ (0, E.jsx)(ie, {}),
-						children: O
+						children: j
 					})
 				}),
 				!i && /* @__PURE__ */ (0, E.jsx)(tt, {
-					disabled: !v || b,
+					disabled: !v || b || D,
 					onClick: w,
-					children: V
+					children: U
 				})
 			]
 		})]
 	}), /* @__PURE__ */ (0, E.jsx)(Nv, {
 		open: C,
 		onClose: T,
-		onConfirm: D
+		onConfirm: A,
+		loading: D
 	})] });
 }, Iv = ({ initialValues: e, existingNames: t, onClose: n, onSubmit: r }) => {
 	let { t: i } = k(), a = e.id !== void 0, o = (0, _.useMemo)(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Client-side CSV importer and spreadsheet editor SDK as a Web Component. Drop into Vue, Angular, Svelte, or vanilla JS. Import CSV, Excel, JSON; edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",