@updog/data-editor-wc 0.1.15 → 0.1.17

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
@@ -1199,9 +1189,9 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
     enableAddRow?: boolean;
     /**
      * Which file formats the user can import. `undefined` allows all formats,
-     * `[]` disables import entirely.
+     * `false` disables import entirely.
      */
-    importFormats?: DataEditorFormat[];
+    importFormats?: DataEditorFormat[] | false;
     /**
      * Client-defined remote data sources rendered as buttons on the upload
      * step. You own the integration; the SDK renders the button and processes
@@ -1210,9 +1200,9 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
     remoteSources?: RemoteSource[];
     /**
      * Which file formats the user can export to. `undefined` allows all
-     * formats, `[]` disables export entirely.
+     * formats, `false` disables export entirely.
      */
-    exportFormats?: DataEditorFormat[];
+    exportFormats?: DataEditorFormat[] | false;
     /** Row height in pixels. @default 34 */
     rowHeight?: number;
     /** Header row height in pixels. @default 36 */
@@ -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 !== !1 && (!e.isServer() || e.hasServerExport), V = (0, _.useMemo)(() => {
+		let e = r === !1 ? [] : 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)(() => {
@@ -38633,7 +38645,7 @@ var dN = ({ source: e }) => {
 }, fN = () => {
 	let { store: e, columns: t, navigateToCell: n, navigateToCellRef: r, setShowUploader: i, enableAddRow: a, importFormats: o, readonly: s } = Bd(), { t: c } = k(), { sources: l, phase: u } = nl(e), d = u !== "idle", f = (0, _.useMemo)(() => {
 		let e = [];
-		return o.length > 0 && e.push({
+		return o !== !1 && o.length > 0 && e.push({
 			id: "import_data",
 			text: c("dataEditor.dataSources.importData"),
 			icon: /* @__PURE__ */ (0, E.jsx)(Ve, { size: "1rem" })
@@ -38670,7 +38682,7 @@ var dN = ({ source: e }) => {
 		n,
 		r,
 		c
-	]), m = c("dataEditor.dataSources.addDataSource"), h = !s && (a || o.length > 0) ? /* @__PURE__ */ (0, E.jsx)(rc, {
+	]), m = c("dataEditor.dataSources.addDataSource"), h = !s && (a || o !== !1 && o.length > 0) ? /* @__PURE__ */ (0, E.jsx)(rc, {
 		options: f,
 		onSelect: p,
 		placement: "bottom-end",
@@ -45008,7 +45020,7 @@ var pz = ({ source: e }) => e.icon.trimStart().startsWith("<") ? /* @__PURE__ */
 	title: e.description,
 	children: e.label
 }), hz = () => {
-	let { importFormats: e, remoteSources: t } = Bd(), { t: n } = k(), { remoteSourceLoading: r, remoteSourceError: i, handleRemoteSourceSelect: a } = fB();
+	let { importFormats: e, remoteSources: t } = Bd(), n = e === !1 ? [] : e, { t: r } = k(), { remoteSourceLoading: i, remoteSourceError: a, handleRemoteSourceSelect: o } = fB();
 	return /* @__PURE__ */ (0, E.jsxs)("div", {
 		className: "updog__source-picker",
 		children: [
@@ -45021,108 +45033,108 @@ var pz = ({ source: e }) => e.icon.trimStart().startsWith("<") ? /* @__PURE__ */
 						size: "sm",
 						weight: "medium",
 						className: "updog__source-picker__link",
-						children: n("dataEditor.uploader.uploadFile.clickToUpload")
+						children: r("dataEditor.uploader.uploadFile.clickToUpload")
 					}), /* @__PURE__ */ (0, E.jsx)(W, {
 						as: "span",
 						size: "sm",
-						children: n("dataEditor.uploader.uploadFile.orDragAndDrop")
+						children: r("dataEditor.uploader.uploadFile.orDragAndDrop")
 					})]
 				}), /* @__PURE__ */ (0, E.jsx)(W, {
 					as: "span",
 					size: "xs",
-					children: e.map((e) => e.toUpperCase()).join(", ")
+					children: n.map((e) => e.toUpperCase()).join(", ")
 				})]
 			}),
 			t.length > 0 && /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsx)(Zs, {}), /* @__PURE__ */ (0, E.jsx)("div", {
 				className: "updog__source-picker__sources-list",
 				children: t.map((e) => /* @__PURE__ */ (0, E.jsx)(mz, {
 					source: e,
-					loading: r === e.id,
-					disabled: !!r,
-					onSelect: a
+					loading: i === e.id,
+					disabled: !!i,
+					onSelect: o
 				}, e.id))
 			})] }),
-			i && /* @__PURE__ */ (0, E.jsx)(W, {
+			a && /* @__PURE__ */ (0, E.jsx)(W, {
 				size: "sm",
 				className: "updog__source-picker__error",
-				children: i
+				children: a
 			})
 		]
 	});
 }, gz = () => {
-	let { columns: e, importFormats: t, sampleData: n } = Bd(), { t: r } = k(), { parsedCsv: i, xlsxFile: a, handleFileRemoved: o, parseFile: s } = fB(), c = [
+	let { columns: e, importFormats: t, sampleData: n } = Bd(), r = t === !1 ? [] : t, { t: i } = k(), { parsedCsv: a, xlsxFile: o, handleFileRemoved: s, parseFile: c } = fB(), l = [
 		{
 			id: "csv",
 			format: "csv",
-			text: r("dataEditor.footer.csvFormat")
+			text: i("dataEditor.footer.csvFormat")
 		},
 		{
 			id: "tsv",
 			format: "tsv",
-			text: r("dataEditor.footer.tsvFormat")
+			text: i("dataEditor.footer.tsvFormat")
 		},
 		{
 			id: "xlsx",
 			format: "xlsx",
-			text: r("dataEditor.footer.excelFormat")
+			text: i("dataEditor.footer.excelFormat")
 		},
 		{
 			id: "json",
 			format: "json",
-			text: r("dataEditor.footer.jsonFormat")
+			text: i("dataEditor.footer.jsonFormat")
 		},
 		{
 			id: "xml",
 			format: "xml",
-			text: r("dataEditor.footer.xmlFormat")
+			text: i("dataEditor.footer.xmlFormat")
 		}
-	].filter((e) => t.includes(e.format)), l = {
+	].filter((e) => r.includes(e.format)), u = {
 		csv: "CSV",
 		tsv: "TSV",
 		xlsx: "Excel",
 		json: "JSON",
 		xml: "XML"
-	}, u = (() => {
-		let e = t.map((e) => l[e]);
+	}, d = (() => {
+		let e = r.map((e) => u[e]);
 		if (e.length === 0) return "";
-		if (e.length === 1) return r("dataEditor.uploader.uploadFile.textDynamic", { formats: e[0] });
-		let n = e[e.length - 1];
-		return r("dataEditor.uploader.uploadFile.textDynamic", { formats: `${e.slice(0, -1).join(", ")} or ${n}` });
-	})(), d = (0, _.useCallback)((t) => {
+		if (e.length === 1) return i("dataEditor.uploader.uploadFile.textDynamic", { formats: e[0] });
+		let t = e[e.length - 1];
+		return i("dataEditor.uploader.uploadFile.textDynamic", { formats: `${e.slice(0, -1).join(", ")} or ${t}` });
+	})(), f = (0, _.useCallback)((t) => {
 		jv(e, t, n);
-	}, [e, n]), f = {
+	}, [e, n]), p = {
 		csv: { "text/csv": [".csv"] },
 		tsv: { "text/tab-separated-values": [".tsv"] },
 		xlsx: { "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"] },
 		json: { "application/json": [".json"] },
 		xml: { "application/xml": [".xml"] }
-	}, { getRootProps: p, getInputProps: m, isDragActive: h } = uz({
-		accept: t.reduce((e, t) => ({
+	}, { getRootProps: m, getInputProps: h, isDragActive: g } = uz({
+		accept: r.reduce((e, t) => ({
 			...e,
-			...f[t]
+			...p[t]
 		}), {}),
 		maxFiles: 1,
-		disabled: !!i || !!a,
+		disabled: !!a || !!o,
 		onDrop: (e) => {
-			e.length > 0 && s(e[0]);
+			e.length > 0 && c(e[0]);
 		}
-	}), g = !!i || !!a, v = i?.fileName ?? a?.name, y = (e) => {
-		e.stopPropagation(), o();
+	}), v = !!a || !!o, y = a?.fileName ?? o?.name, b = (e) => {
+		e.stopPropagation(), s();
 	};
 	return /* @__PURE__ */ (0, E.jsxs)(Ud, { children: [/* @__PURE__ */ (0, E.jsxs)(Vd, { children: [/* @__PURE__ */ (0, E.jsxs)("div", {
 		className: "updog__step-select-files__aside-content",
 		children: [/* @__PURE__ */ (0, E.jsx)(W, {
 			weight: "bold",
-			children: r("dataEditor.uploader.uploadFile.title")
+			children: i("dataEditor.uploader.uploadFile.title")
 		}), /* @__PURE__ */ (0, E.jsx)(W, {
 			className: "updog__step-select-files__text",
-			children: u
+			children: d
 		})]
 	}), /* @__PURE__ */ (0, E.jsx)("footer", {
 		className: "updog__step-select-files__footer",
 		children: /* @__PURE__ */ (0, E.jsx)(rc, {
-			options: c,
-			onSelect: d,
+			options: l,
+			onSelect: f,
 			placement: "top-start",
 			matchTriggerWidth: !0,
 			children: /* @__PURE__ */ (0, E.jsx)(tt, {
@@ -45130,19 +45142,19 @@ var pz = ({ source: e }) => e.icon.trimStart().startsWith("<") ? /* @__PURE__ */
 				color: "neutral",
 				className: "updog__step-select-files__download-btn",
 				startIcon: /* @__PURE__ */ (0, E.jsx)(pe, {}),
-				children: r("dataEditor.uploader.uploadFile.downloadExample")
+				children: i("dataEditor.uploader.uploadFile.downloadExample")
 			})
 		})
 	})] }), /* @__PURE__ */ (0, E.jsxs)(Hd, { children: [/* @__PURE__ */ (0, E.jsx)("div", {
 		className: "updog__step-select-files__content",
 		children: /* @__PURE__ */ (0, E.jsxs)("div", {
-			...p(),
-			className: j("updog__step-select-files__dropzone", g && "updog__step-select-files__dropzone--disabled", !g && h && "updog__step-select-files__dropzone--active"),
+			...m(),
+			className: j("updog__step-select-files__dropzone", v && "updog__step-select-files__dropzone--disabled", !v && g && "updog__step-select-files__dropzone--active"),
 			children: [
-				/* @__PURE__ */ (0, E.jsx)("input", { ...m() }),
+				/* @__PURE__ */ (0, E.jsx)("input", { ...h() }),
 				/* @__PURE__ */ (0, E.jsx)("div", {
 					className: "updog__step-select-files__icon-container",
-					children: g ? /* @__PURE__ */ (0, E.jsx)(re, {
+					children: v ? /* @__PURE__ */ (0, E.jsx)(re, {
 						size: "1rem",
 						className: "updog__step-select-files__icon rtl-mirror"
 					}) : /* @__PURE__ */ (0, E.jsx)(Ve, {
@@ -45150,19 +45162,19 @@ var pz = ({ source: e }) => e.icon.trimStart().startsWith("<") ? /* @__PURE__ */
 						className: "updog__step-select-files__icon"
 					})
 				}),
-				!g && /* @__PURE__ */ (0, E.jsx)(hz, {}),
-				g && /* @__PURE__ */ (0, E.jsxs)("div", {
+				!v && /* @__PURE__ */ (0, E.jsx)(hz, {}),
+				v && /* @__PURE__ */ (0, E.jsxs)("div", {
 					className: "updog__step-select-files__info",
 					children: [/* @__PURE__ */ (0, E.jsx)(W, {
 						as: "span",
 						size: "sm",
-						children: v
+						children: y
 					}), /* @__PURE__ */ (0, E.jsx)(tt, {
 						size: "xs",
 						variant: "ghost",
 						color: "danger",
-						onClick: y,
-						children: r("dataEditor.common.remove")
+						onClick: b,
+						children: i("dataEditor.common.remove")
 					})]
 				})
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "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",