@updog/data-editor-wc 0.1.32 → 0.1.33

package/index.d.ts

@@ -130,6 +130,7 @@ declare var export_default = {
     },
     footer: {
       submit: "Submit",
+      submitBlockedByErrors: "Fix errors before submitting",
       import: "Import",
       next: "Next",
       cancel: "Cancel",
@@ -1217,6 +1218,11 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
      * @default true
      */
     enableAddSource?: boolean;
+    /**
+     * Disable submit while any row has a validation error.
+     * @default false
+     */
+    blockSubmitOnError?: boolean;
     /**
      * Which file formats the user can import. `undefined` allows all formats,
      * `false` disables import entirely.

package/index.js

@@ -8112,6 +8112,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 		},
 		footer: {
 			submit: "Submit",
+			submitBlockedByErrors: "Fix errors before submitting",
 			import: "Import",
 			next: "Next",
 			cancel: "Cancel",
@@ -22058,71 +22059,72 @@ function Xd(e, t, n, r) {
 }
 //#endregion
 //#region src/context/useViewModel.tsx
-function Zd({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: d, importFormats: f, exportFormats: p, rowHeight: m, headerHeight: h, readonly: g, enableCreateColumn: v, onColumnMatch: y, onValueMatch: b, synonyms: x, sampleData: S, chat: C, remoteSources: w, onError: T, errorHandler: E }) {
-	let { t: D } = k(), O = r ? "server" : "client", A = Vd(O, r, D("dataEditor.dataSources.existingData"), E ?? new dl(T));
-	A.setSchemaColumns(e);
-	let { addDynamicColumns: j, removeDynamicColumn: M, updateColumn: N } = Gd(A), P = (0, _.useCallback)((e) => {
-		A.setDynamicColumns(e);
-	}, [A]), F = (0, _.useSyncExternalStore)(A.subscribe, A.getEffectiveColumns), { navigateToCell: I, navigateByIndex: L, navigateToCellRef: R, resetScrollRef: z, scrollToGridTop: B } = Kd(A), { validator: V, validatorRef: H, findReplace: U } = Xd(A, F, r?.findAndReplace, L), { search: ee, setSearch: te, matchCase: ne, setMatchCase: re, matchEntireCell: ie, setMatchEntireCell: ae, searchMode: oe, setSearchMode: se, filterColumns: ce, setFilterColumns: le, filtersResetKey: ue, resetFilters: de } = Jd(A, U, I, B);
-	Wd(A, H, n, O);
-	let { onVisibleRangeChange: fe } = Yd(A, O), { portalRef: pe } = qd(), [me, he] = (0, _.useState)(null);
-	return (0, _.useEffect)(() => (c && (c.current = A), () => {
+function Zd({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete: i, variant: a, showUploader: o, setShowUploader: s, storeRef: c, enableDeleteRow: l, enableAddRow: u, enableAddSource: d, blockSubmitOnError: f, importFormats: p, exportFormats: m, rowHeight: h, headerHeight: g, readonly: v, enableCreateColumn: y, onColumnMatch: b, onValueMatch: x, synonyms: S, sampleData: C, chat: w, remoteSources: T, onError: E, errorHandler: D }) {
+	let { t: O } = k(), A = r ? "server" : "client", j = Vd(A, r, O("dataEditor.dataSources.existingData"), D ?? new dl(E));
+	j.setSchemaColumns(e);
+	let { addDynamicColumns: M, removeDynamicColumn: N, updateColumn: P } = Gd(j), F = (0, _.useCallback)((e) => {
+		j.setDynamicColumns(e);
+	}, [j]), I = (0, _.useSyncExternalStore)(j.subscribe, j.getEffectiveColumns), { navigateToCell: L, navigateByIndex: R, navigateToCellRef: z, resetScrollRef: B, scrollToGridTop: V } = Kd(j), { validator: H, validatorRef: U, findReplace: ee } = Xd(j, I, r?.findAndReplace, R), { search: te, setSearch: ne, matchCase: re, setMatchCase: ie, matchEntireCell: ae, setMatchEntireCell: oe, searchMode: se, setSearchMode: ce, filterColumns: le, setFilterColumns: ue, filtersResetKey: de, resetFilters: fe } = Jd(j, ee, L, V);
+	Wd(j, U, n, A);
+	let { onVisibleRangeChange: pe } = Yd(j, A), { portalRef: me } = qd(), [he, ge] = (0, _.useState)(null);
+	return (0, _.useEffect)(() => (c && (c.current = j), () => {
 		c && (c.current = null);
-	}), [A, c]), (0, _.useEffect)(() => {
-		t && A.setPrimaryKey(t);
-	}, [A, t]), {
-		mode: O,
+	}), [j, c]), (0, _.useEffect)(() => {
+		t && j.setPrimaryKey(t);
+	}, [j, t]), {
+		mode: A,
 		scaleClient: r,
-		columns: F,
+		columns: I,
 		primaryKey: t,
 		enableDeleteRow: l ?? !1,
 		enableAddRow: u ?? !0,
 		enableAddSource: d ?? !0,
-		importFormats: f ?? pl,
-		exportFormats: p ?? pl,
-		rowHeight: m ?? 34,
-		headerHeight: h ?? 36,
-		store: A,
-		validator: V,
-		findReplace: U,
+		blockSubmitOnError: f ?? !1,
+		importFormats: p ?? pl,
+		exportFormats: m ?? pl,
+		rowHeight: h ?? 34,
+		headerHeight: g ?? 36,
+		store: j,
+		validator: H,
+		findReplace: ee,
 		onComplete: i,
 		showUploader: o,
 		setShowUploader: s,
 		variant: a ?? "editor",
-		search: ee,
-		setSearch: te,
-		matchCase: ne,
-		setMatchCase: re,
-		matchEntireCell: ie,
-		setMatchEntireCell: ae,
-		searchMode: oe,
-		setSearchMode: se,
-		filterColumns: ce,
-		setFilterColumns: le,
-		navigateToCell: I,
-		navigateToCellRef: R,
-		resetScrollRef: z,
-		scrollToGridTop: B,
-		portalRef: pe,
-		readonly: g ?? !1,
-		filtersResetKey: ue,
-		resetFilters: de,
+		search: te,
+		setSearch: ne,
+		matchCase: re,
+		setMatchCase: ie,
+		matchEntireCell: ae,
+		setMatchEntireCell: oe,
+		searchMode: se,
+		setSearchMode: ce,
+		filterColumns: le,
+		setFilterColumns: ue,
+		navigateToCell: L,
+		navigateToCellRef: z,
+		resetScrollRef: B,
+		scrollToGridTop: V,
+		portalRef: me,
+		readonly: v ?? !1,
+		filtersResetKey: de,
+		resetFilters: fe,
 		originalColumns: e,
-		dynamicColumns: A.getDynamicColumns(),
-		setDynamicColumns: P,
-		addDynamicColumns: j,
-		removeDynamicColumn: M,
-		updateColumn: N,
-		gridClipboard: me,
-		setGridClipboard: he,
-		enableCreateColumn: v ?? !0,
-		onColumnMatch: y,
-		onValueMatch: b,
-		synonyms: x,
-		sampleData: S,
-		onVisibleRangeChange: fe,
-		chat: C,
-		remoteSources: w ?? []
+		dynamicColumns: j.getDynamicColumns(),
+		setDynamicColumns: F,
+		addDynamicColumns: M,
+		removeDynamicColumn: N,
+		updateColumn: P,
+		gridClipboard: he,
+		setGridClipboard: ge,
+		enableCreateColumn: y ?? !0,
+		onColumnMatch: b,
+		onValueMatch: x,
+		synonyms: S,
+		sampleData: C,
+		onVisibleRangeChange: pe,
+		chat: w,
+		remoteSources: T ?? []
 	};
 }
 //#endregion
@@ -25615,74 +25617,74 @@ var qv = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 		})
 	});
 }, Yv = () => {
-	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a } = ef(), { t: o, rtl: s } = k(), { canUndo: c, canRedo: l, undo: u, redo: d } = xl(e, a), { dirtyRowCount: f, deletedRowCount: p, isLoading: m, sources: h, phase: g } = fl(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 } = ul(!1), [D, O] = (0, _.useState)(!1), A = (0, _.useCallback)(async () => {
+	let { store: e, columns: t, onComplete: n, exportFormats: r, readonly: i, navigateToCell: a, blockSubmitOnError: o } = ef(), { t: s, rtl: c } = k(), { canUndo: l, canRedo: u, undo: d, redo: f } = xl(e, a), { dirtyRowCount: p, deletedRowCount: m, errorCount: h, isLoading: g, sources: v, phase: y } = fl(e), b = p > 0 || m > 0, x = g || v.some((e) => e.isLoading), S = y === "processing", C = o && h > 0, [w, T] = (0, _.useState)(!1), { value: D, setTrue: O, setFalse: A } = ul(!1), [j, M] = (0, _.useState)(!1), N = (0, _.useCallback)(async () => {
 		if (!n) return;
 		let t = e.getResultBySource();
-		O(!0);
+		M(!0);
 		try {
-			await n(t), e.clear(), T();
+			await n(t), e.clear(), A();
 		} catch {} finally {
-			O(!1);
+			M(!1);
 		}
 	}, [
 		e,
 		n,
-		T
-	]), 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)(() => [
+		A
+	]), P = s("dataEditor.footer.export"), F = s("dataEditor.footer.exportAll"), I = s("dataEditor.footer.exportFiltered"), L = s("dataEditor.footer.csvFormat"), R = s("dataEditor.footer.excelFormat"), z = s("dataEditor.footer.jsonFormat"), B = s("dataEditor.footer.tsvFormat"), V = s("dataEditor.footer.xmlFormat"), H = (0, _.useMemo)(() => [
 		{
 			menuId: "csv",
 			format: "csv",
-			text: P
+			text: L
 		},
 		{
 			menuId: "tsv",
 			format: "tsv",
-			text: L
+			text: B
 		},
 		{
 			menuId: "excel",
 			format: "xlsx",
-			text: F
+			text: R
 		},
 		{
 			menuId: "json",
 			format: "json",
-			text: I
+			text: z
 		},
 		{
 			menuId: "xml",
 			format: "xml",
-			text: R
+			text: V
 		}
 	], [
-		P,
 		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));
+		B,
+		R,
+		z,
+		V
+	]), U = r !== !1 && (!e.isServer() || e.hasServerExport), ee = (0, _.useMemo)(() => {
+		let e = r === !1 ? [] : H.filter((e) => r.includes(e.format));
 		return [{
 			id: "export-all",
-			text: M,
+			text: F,
 			options: e.map((e) => ({
 				id: `all-${e.menuId}`,
 				text: e.text
 			}))
 		}, {
 			id: "export-filtered",
-			text: N,
+			text: I,
 			options: e.map((e) => ({
 				id: `filtered-${e.menuId}`,
 				text: e.text
 			}))
 		}];
 	}, [
-		M,
-		N,
-		z,
+		F,
+		I,
+		H,
 		r
-	]), H = (0, _.useCallback)((n) => {
+	]), te = (0, _.useCallback)((n) => {
 		let [r, i] = n.split("-"), a = {
 			csv: "csv",
 			tsv: "tsv",
@@ -25690,70 +25692,75 @@ var qv = ({ open: e, onClose: t, onConfirm: n, loading: r = !1 }) => {
 			json: "json",
 			xml: "xml"
 		};
-		S(!0), (e.isServer() ? e.serverExport(a[i], r === "all", s) : Kv({
+		T(!0), (e.isServer() ? e.serverExport(a[i], r === "all", c) : Kv({
 			store: e,
 			columns: t,
 			format: a[i],
 			scope: r,
-			rtl: s
-		})).finally(() => S(!1));
+			rtl: c
+		})).finally(() => T(!1));
 	}, [
 		e,
 		t,
-		s
-	]), U = o("dataEditor.footer.submit");
+		c
+	]), ne = s("dataEditor.footer.submit"), re = !b || S || j || C;
 	return /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsxs)("footer", {
 		className: "updog__data-editor-footer",
 		children: [/* @__PURE__ */ (0, E.jsx)(Jv, {}), /* @__PURE__ */ (0, E.jsxs)("div", {
 			className: "updog__data-editor-footer__actions",
 			children: [
 				!i && /* @__PURE__ */ (0, E.jsxs)(E.Fragment, { children: [/* @__PURE__ */ (0, E.jsx)(Rs, {
-					content: o("dataEditor.undoRedo.undo"),
+					content: s("dataEditor.undoRedo.undo"),
 					children: /* @__PURE__ */ (0, E.jsx)(at, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !c || b,
-						onClick: u,
-						"aria-label": o("dataEditor.undoRedo.undo"),
+						disabled: !l || S,
+						onClick: d,
+						"aria-label": s("dataEditor.undoRedo.undo"),
 						children: /* @__PURE__ */ (0, E.jsx)(Be, { className: "rtl-mirror" })
 					})
 				}), /* @__PURE__ */ (0, E.jsx)(Rs, {
-					content: o("dataEditor.undoRedo.redo"),
+					content: s("dataEditor.undoRedo.redo"),
 					children: /* @__PURE__ */ (0, E.jsx)(at, {
 						variant: "ghost",
 						color: "neutral",
-						disabled: !l || b,
-						onClick: d,
-						"aria-label": o("dataEditor.undoRedo.redo"),
+						disabled: !u || S,
+						onClick: f,
+						"aria-label": s("dataEditor.undoRedo.redo"),
 						children: /* @__PURE__ */ (0, E.jsx)(ke, { className: "rtl-mirror" })
 					})
 				})] }),
-				B && /* @__PURE__ */ (0, E.jsx)(cc, {
-					options: V,
-					onSelect: H,
+				U && /* @__PURE__ */ (0, E.jsx)(cc, {
+					options: ee,
+					onSelect: te,
 					placement: "top-end",
 					children: /* @__PURE__ */ (0, E.jsx)(rt, {
 						variant: "outlined",
 						color: "neutral",
-						loading: x,
-						disabled: y || b,
+						loading: w,
+						disabled: x || S,
 						spinnerPosition: "end",
 						endIcon: /* @__PURE__ */ (0, E.jsx)(ie, {}),
-						children: j
+						children: P
 					})
 				}),
-				!i && /* @__PURE__ */ (0, E.jsx)(rt, {
-					disabled: !v || b || D,
-					onClick: w,
-					children: U
+				!i && /* @__PURE__ */ (0, E.jsx)(Rs, {
+					disabled: !C,
+					content: s("dataEditor.footer.submitBlockedByErrors"),
+					placement: "top-end",
+					children: /* @__PURE__ */ (0, E.jsx)(rt, {
+						disabled: re,
+						onClick: O,
+						children: ne
+					})
 				})
 			]
 		})]
 	}), /* @__PURE__ */ (0, E.jsx)(qv, {
-		open: C,
-		onClose: T,
-		onConfirm: A,
-		loading: D
+		open: D,
+		onClose: A,
+		onConfirm: N,
+		loading: j
 	})] });
 }, Xv = ({ initialValues: e, existingNames: t, onClose: n, onSubmit: r }) => {
 	let { t: i } = k(), a = e.id !== void 0, o = (0, _.useMemo)(() => {
@@ -52064,6 +52071,7 @@ function oV(e) {
 		enableDeleteRow: e.enableDeleteRow,
 		enableAddRow: e.enableAddRow,
 		enableAddSource: e.enableAddSource,
+		blockSubmitOnError: e.blockSubmitOnError,
 		importFormats: e.importFormats,
 		exportFormats: e.exportFormats,
 		readonly: e.readonly,

package/package.json

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