@updog/data-editor-wc 0.1.90 → 0.1.91

package/index.d.ts

@@ -522,6 +522,8 @@ declare var export_default = {
         showSampleValues: "Show example values from {{column}}",
         unmatchedWarning:
           "Unmatched columns won't be imported. Match this column to keep the data. You can transform columns after importing.",
+        unmatchedWarningWithRowHook:
+          "The import can read this column without a match. If you match it, the import may still change the values.",
       },
       sheetPreview: {
         cancel: "Cancel processing",
@@ -859,6 +861,11 @@ type DataEditorColumn = {
     editor?: CellEditor;
     /** Adds a filter control for this column in the sidebar Filters panel. */
     filter?: ColumnFilter;
+    /**
+     * Whether this column is offered as a target on the column-matching step.
+     * Set false for fields your `onRowImport` callback fills. @default true
+     */
+    mappable?: boolean;
     /**
      * Whether this column can be pinned to the left (right in RTL) via the
      * header context menu. @default true

package/index.js

@@ -8500,7 +8500,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 				sampleValues: "Example values",
 				sampleValuesEmpty: "No values in this column",
 				showSampleValues: "Show example values from {{column}}",
-				unmatchedWarning: "Unmatched columns won't be imported. Match this column to keep the data. You can transform columns after importing."
+				unmatchedWarning: "Unmatched columns won't be imported. Match this column to keep the data. You can transform columns after importing.",
+				unmatchedWarningWithRowHook: "The import can read this column without a match. If you match it, the import may still change the values."
 			},
 			sheetPreview: {
 				cancel: "Cancel processing",
@@ -30130,7 +30131,9 @@ var Ry = (e, t, n) => {
 	if (!e) return "";
 	if (t.length === 0) return "[updog] primaryKey is empty, so imported rows are appended instead of merged.";
 	let r = Od(t, n.map((e) => e.id));
-	return r.length === 0 ? "" : `[updog] primaryKey names ${r.map((e) => `"${e}"`).join(", ")}, which no column declares. Imported rows are appended instead of merged.`;
+	if (r.length > 0) return `[updog] primaryKey names ${r.map((e) => `"${e}"`).join(", ")}, which no column declares. Imported rows are appended instead of merged.`;
+	let i = t.filter((e) => n.some((t) => t.id === e && t.mappable === !1));
+	return i.length === 0 ? "" : `[updog] primaryKey names ${i.map((e) => `"${e}"`).join(", ")}, which is not mappable (mappable: false). It never receives a match, so imported rows are appended instead of merged.`;
 };
 function zy({ columns: e, primaryKey: t, loadData: n, onComplete: r, variant: i, showUploader: a, setShowUploader: o, storeRef: s, enableDeleteRow: c, enableAddRow: l, enableAddSource: u, blockSubmitOnError: d, importFormats: f, exportFormats: p, rowHeight: m, headerHeight: h, readonly: g, enableCreateColumn: _, onColumnMatch: v, onValueMatch: b, onRowImport: x, context: S, synonyms: C, sampleData: w, chat: T, remoteSources: E, customFormats: D, onUnstructuredFile: O, onError: k, errorHandler: A }) {
 	let j = ky(A ?? new xd(k)), { t: M, locale: N } = W();
@@ -50509,7 +50512,10 @@ var IH = (e, t) => {
 	seqByWorkbook = /* @__PURE__ */ new Map();
 	_state = dU;
 	constructor(e, t) {
-		this.deps = e, this.notify = t;
+		this.deps = {
+			...e,
+			columns: e.columns.filter((e) => e.mappable !== !1)
+		}, this.notify = t;
 	}
 	get state() {
 		return this._state;
@@ -52759,95 +52765,96 @@ var GW = (e) => {
 		allMatched: n === e.headers.length
 	};
 }, xG = {}, SG = {}, CG = [], wG = () => {
-	let { columns: e, enableCreateColumn: t } = Hy(), { t: n } = W(), r = fV(), i = CV(r, SV), a = CV(r, mV), o = i ? a.find((e) => e.id === i.workbookId) ?? null : null, { byWorkbook: s, pendingColumns: c, autoMatched: l, isMatching: u } = CV(r, hV), d = o ? s[o.id] ?? xG : xG, f = o?.id ?? null, p = (0, y.useCallback)((e, t) => {
-		f !== null && r.updateColumnMapping(f, e, t);
-	}, [r, f]), m = (0, y.useCallback)((e) => {
-		r.setPendingColumns(e);
-	}, [r]), h = (0, y.useMemo)(() => o ? bG(o, d) : null, [o, d]), g = (i?.total ?? 0) > 1, _ = h?.headers ?? CG, [v, b] = (0, y.useState)(null), { value: x, setTrue: S, setFalse: C } = Ql(!1), [w, T] = (0, y.useState)({}), E = (0, y.useRef)(null), D = (0, y.useCallback)((e) => w[e] ?? !0, [w]), O = (0, y.useCallback)((e, t) => {
-		T((n) => ({
+	let { columns: e, enableCreateColumn: t, onRowImport: n } = Hy(), r = (0, y.useMemo)(() => e.filter((e) => e.mappable !== !1), [e]), { t: i } = W(), a = fV(), o = CV(a, SV), s = CV(a, mV), c = o ? s.find((e) => e.id === o.workbookId) ?? null : null, { byWorkbook: l, pendingColumns: u, autoMatched: d, isMatching: f } = CV(a, hV), p = c ? l[c.id] ?? xG : xG, m = c?.id ?? null, h = (0, y.useCallback)((e, t) => {
+		m !== null && a.updateColumnMapping(m, e, t);
+	}, [a, m]), g = (0, y.useCallback)((e) => {
+		a.setPendingColumns(e);
+	}, [a]), _ = (0, y.useMemo)(() => c ? bG(c, p) : null, [c, p]), v = (o?.total ?? 0) > 1, b = _?.headers ?? CG, [x, S] = (0, y.useState)(null), { value: C, setTrue: w, setFalse: T } = Ql(!1), [E, D] = (0, y.useState)({}), O = (0, y.useRef)(null), k = (0, y.useCallback)((e) => E[e] ?? !0, [E]), A = (0, y.useCallback)((e, t) => {
+		D((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), k = (0, y.useCallback)((e, t) => {
+	}, []), j = (0, y.useCallback)((e, t) => {
 		if (t === "action:create") {
-			E.current = e, b({ title: e }), S();
+			O.current = e, S({ title: e }), w();
 			return;
 		}
-		p(e, t);
-	}, [p, S]), A = (0, y.useCallback)((e) => {
-		if (E.current === null) return;
+		h(e, t);
+	}, [h, w]), M = (0, y.useCallback)((e) => {
+		if (O.current === null) return;
 		let t = crypto.randomUUID(), n = `${vd}${e.title}-${t}`;
-		m((t) => [...t, {
+		g((t) => [...t, {
 			...e,
 			id: n,
 			size: 150
-		}]), p(E.current, n), E.current = null, C();
+		}]), h(O.current, n), O.current = null, T();
 	}, [
-		p,
-		m,
-		C
-	]), j = (0, y.useCallback)(() => {
-		E.current = null, C();
-	}, [C]), M = (0, y.useMemo)(() => [...e.map((e) => e.title), ...c.map((e) => e.title)], [e, c]), N = f ? l[f] ?? SG : SG, P = (0, y.useMemo)(() => {
-		let r = {
-			text: n("dataEditor.uploader.matchColumns.bestMatch"),
+		h,
+		g,
+		T
+	]), N = (0, y.useCallback)(() => {
+		O.current = null, T();
+	}, [T]), P = (0, y.useMemo)(() => [...e.map((e) => e.title), ...u.map((e) => e.title)], [e, u]), F = m ? d[m] ?? SG : SG, I = (0, y.useMemo)(() => {
+		let e = {
+			text: i("dataEditor.uploader.matchColumns.bestMatch"),
 			color: "green"
-		}, i = {
-			text: n("dataEditor.uploader.matchColumns.newColumnTag"),
+		}, n = {
+			text: i("dataEditor.uploader.matchColumns.newColumnTag"),
 			color: "blue"
-		}, a = n("dataEditor.uploader.matchColumns.createColumn");
-		return Object.fromEntries(_.map((n) => {
-			let o = N[n], s = e.map((e) => ({
-				id: e.id,
-				text: e.title,
-				...e.id === o && { tag: r }
+		}, a = i("dataEditor.uploader.matchColumns.createColumn");
+		return Object.fromEntries(b.map((i) => {
+			let o = F[i], s = r.map((t) => ({
+				id: t.id,
+				text: t.title,
+				...t.id === o && { tag: e }
 			}));
-			for (let e of c) s.push({
+			for (let e of u) s.push({
 				id: e.id,
 				text: e.title,
-				tag: i
+				tag: n
 			});
 			return t && s.push({
-				id: `${n}_d`,
+				id: `${i}_d`,
 				type: "divider"
 			}, {
 				id: aH,
 				text: a,
 				icon: /* @__PURE__ */ (0, B.jsx)(He, { size: "1rem" })
-			}), [n, s];
+			}), [i, s];
 		}));
 	}, [
-		_,
-		e,
-		c,
-		n,
+		b,
+		r,
+		u,
+		i,
 		t,
-		N
-	]), F = n("dataEditor.uploader.matchColumns.selectColumnPlaceholder"), I = (0, y.useCallback)((e, t) => o ? JH(o, e, t) : [], [o]), L = (0, y.useCallback)((e) => ({
-		mappedValue: d[e],
-		options: P[e],
-		autoMatchId: N[e]
+		F
+	]), L = i("dataEditor.uploader.matchColumns.selectColumnPlaceholder"), R = (0, y.useCallback)((e, t) => c ? JH(c, e, t) : [], [c]), z = (0, y.useCallback)((e) => ({
+		mappedValue: p[e],
+		options: I[e],
+		autoMatchId: F[e]
 	}), [
-		d,
-		P,
-		N
+		p,
+		I,
+		F
 	]);
 	return {
-		view: h,
-		isMultiWorkbook: g,
-		isMatching: f ? u[f] ?? !1 : !1,
-		isShowMatched: D,
-		setShowMatched: O,
-		placeholder: F,
-		existingNames: M,
-		createModalValues: v,
-		createModalOpen: x,
-		getRowData: L,
-		getSampleValues: I,
-		onSelectChange: k,
-		onClear: p,
-		submitCreate: A,
-		closeCreate: j
+		view: _,
+		isMultiWorkbook: v,
+		hasRowHook: !!n,
+		isMatching: m ? f[m] ?? !1 : !1,
+		isShowMatched: k,
+		setShowMatched: A,
+		placeholder: L,
+		existingNames: P,
+		createModalValues: x,
+		createModalOpen: C,
+		getRowData: z,
+		getSampleValues: R,
+		onSelectChange: j,
+		onClear: h,
+		submitCreate: M,
+		closeCreate: N
 	};
 }, TG = (0, y.createContext)(null);
 function EG({ children: e }) {
@@ -53002,28 +53009,28 @@ var DG = () => {
 			})]
 		})
 	});
-}, NG = (0, y.memo)(({ csvHeader: e, mappedValue: t, options: n, autoMatchId: r, placeholder: i, isMatching: a, getSampleValues: o, onSelectChange: s, onClear: c }) => {
-	let { t: l } = W(), u = (0, y.useId)(), d = !t, f = t?.startsWith("__dynamic__:") && !!r && !a, p = d && !a, m = (0, y.useCallback)((t) => {
-		s(e, t);
-	}, [e, s]), h = (0, y.useCallback)(() => {
-		c(e, void 0);
-	}, [e, c]);
+}, NG = (0, y.memo)(({ csvHeader: e, mappedValue: t, options: n, autoMatchId: r, placeholder: i, isMatching: a, hasRowHook: o, getSampleValues: s, onSelectChange: c, onClear: l }) => {
+	let { t: u } = W(), d = (0, y.useId)(), f = !t, p = t?.startsWith("__dynamic__:") && !!r && !a, m = f && !a, h = (0, y.useCallback)((t) => {
+		c(e, t);
+	}, [e, c]), g = (0, y.useCallback)(() => {
+		l(e, void 0);
+	}, [e, l]);
 	return /* @__PURE__ */ (0, B.jsxs)("div", {
 		className: "updog__column-matching__row",
 		children: [
 			/* @__PURE__ */ (0, B.jsx)("div", {
 				className: "updog__column-matching__column",
 				children: /* @__PURE__ */ (0, B.jsx)(MG, {
-					labelId: u,
+					labelId: d,
 					csvHeader: e,
-					getSampleValues: o
+					getSampleValues: s
 				})
 			}),
 			/* @__PURE__ */ (0, B.jsx)("div", {
 				className: "updog__column-matching__arrow-container",
 				children: /* @__PURE__ */ (0, B.jsx)(fe, {
 					size: "1.25rem",
-					className: G("updog__column-matching__arrow", "rtl-mirror", d || a ? "updog__column-matching__arrow--unmatched" : "updog__column-matching__arrow--matched")
+					className: G("updog__column-matching__arrow", "rtl-mirror", f || a ? "updog__column-matching__arrow--unmatched" : "updog__column-matching__arrow--matched")
 				})
 			}),
 			/* @__PURE__ */ (0, B.jsx)("div", {
@@ -53032,30 +53039,30 @@ var DG = () => {
 					width: "100%",
 					height: "2.5rem"
 				}) : /* @__PURE__ */ (0, B.jsx)(xl, {
-					ariaLabelledby: u,
+					ariaLabelledby: d,
 					options: n,
 					value: t,
-					onChange: m,
-					onClear: h,
+					onChange: h,
+					onClear: g,
 					placeholder: i
 				})
 			}),
 			/* @__PURE__ */ (0, B.jsxs)("div", {
 				className: "updog__column-matching__action",
-				children: [f && /* @__PURE__ */ (0, B.jsx)(Js, {
+				children: [p && /* @__PURE__ */ (0, B.jsx)(Js, {
 					content: /* @__PURE__ */ (0, B.jsx)(q, {
 						size: "sm",
-						children: l("dataEditor.uploader.matchColumns.createColumnWarning")
+						children: u("dataEditor.uploader.matchColumns.createColumnWarning")
 					}),
 					placement: "bottom-end",
 					children: /* @__PURE__ */ (0, B.jsx)(et, {
 						size: "1.25rem",
 						className: "updog__column-matching__action-icon"
 					})
-				}), p && /* @__PURE__ */ (0, B.jsx)(Js, {
+				}), m && /* @__PURE__ */ (0, B.jsx)(Js, {
 					content: /* @__PURE__ */ (0, B.jsx)(q, {
 						size: "sm",
-						children: l("dataEditor.uploader.matchColumns.unmatchedWarning")
+						children: u(o ? "dataEditor.uploader.matchColumns.unmatchedWarningWithRowHook" : "dataEditor.uploader.matchColumns.unmatchedWarning")
 					}),
 					placement: "bottom-end",
 					children: /* @__PURE__ */ (0, B.jsx)(Me, {
@@ -53067,34 +53074,35 @@ var DG = () => {
 		]
 	});
 }), PG = ({ view: e }) => {
-	let { isMatching: t, isShowMatched: n, placeholder: r, getRowData: i, getSampleValues: a, onSelectChange: o, onClear: s } = DG(), { t: c } = W(), l = n(e.workbookId), u = e.headers.map((e) => ({
+	let { isMatching: t, isShowMatched: n, hasRowHook: r, placeholder: i, getRowData: a, getSampleValues: o, onSelectChange: s, onClear: c } = DG(), { t: l } = W(), u = n(e.workbookId), d = e.headers.map((e) => ({
 		csvHeader: e,
-		...i(e)
-	})).filter((e) => l || !e.mappedValue);
-	return u.length === 0 ? /* @__PURE__ */ (0, B.jsx)("div", {
+		...a(e)
+	})).filter((e) => u || !e.mappedValue);
+	return d.length === 0 ? /* @__PURE__ */ (0, B.jsx)("div", {
 		className: "updog__column-matching__content",
 		children: /* @__PURE__ */ (0, B.jsx)("div", {
 			className: "updog__column-matching__empty",
 			children: /* @__PURE__ */ (0, B.jsx)(q, {
 				size: "sm",
 				color: "secondary",
-				children: c("dataEditor.uploader.matchColumns.allMatched")
+				children: l("dataEditor.uploader.matchColumns.allMatched")
 			})
 		})
 	}) : /* @__PURE__ */ (0, B.jsx)("div", {
 		className: "updog__column-matching__content",
 		children: /* @__PURE__ */ (0, B.jsx)("div", {
 			className: "updog__column-matching__content-inner",
-			children: u.map(({ csvHeader: e, mappedValue: n, options: i, autoMatchId: c }) => /* @__PURE__ */ (0, B.jsx)(NG, {
+			children: d.map(({ csvHeader: e, mappedValue: n, options: a, autoMatchId: l }) => /* @__PURE__ */ (0, B.jsx)(NG, {
 				csvHeader: e,
 				mappedValue: n,
-				options: i,
-				autoMatchId: c,
-				placeholder: r,
+				options: a,
+				autoMatchId: l,
+				placeholder: i,
 				isMatching: t,
-				getSampleValues: a,
-				onSelectChange: o,
-				onClear: s
+				hasRowHook: r,
+				getSampleValues: o,
+				onSelectChange: s,
+				onClear: c
 			}, e))
 		})
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor-wc",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "description": "Client-side CSV importer and spreadsheet editor 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",