@updog/data-editor-wc 0.1.44 → 0.1.46

package/index.d.ts

@@ -109,6 +109,7 @@ declare var export_default = {
     modal: {
       importTitle: "Import Data",
       editTitle: "Edit Data",
+      viewTitle: "View Data",
     },
     confirmClose: {
       title: "Discard changes?",
@@ -1148,7 +1149,7 @@ type RemoteSource = {
  * - `"editor"` — opens directly into the spreadsheet grid.
  * - `"uploader"` — opens the file import wizard first, then transitions to the grid.
  */
-type DataEditorVariant = "editor" | "uploader";
+type DataEditorVariant = "editor" | "uploader" | "viewer";
 /** Base configuration shared by the public `DataEditorProps` and the internal provider. */
 type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
     /** Column definitions. Each entry describes one column in the grid. */
@@ -1306,14 +1307,20 @@ type DataEditorBaseProps<TRow extends DataEditorRow = DataEditorRow> = {
      */
     onValueMatch?: (valuesToMatch: Record<string, ValueMatchInput>) => ValueMatchOutput | Promise<ValueMatchOutput>;
     /**
-     * Extra synonyms for column auto-matching. Keys are column IDs, values are
-     * alternative names the matching engine should recognize.
+     * Extra synonyms layered on top of the built-ins for both column matching
+     * (header vs column) and value matching (imported value vs select option).
+     * Each key is the canonical target (a column ID/title, or a select option
+     * value); the array lists aliases the matching engine should treat as
+     * equivalent. Merged with the built-ins as a union per key.
      *
      * @example
      * ```ts
      * synonyms={{
+     *   // column aliases
      *   productSku: ["sku", "article_no", "item_code"],
      *   firstName: ["first", "given_name", "fname"],
+     *   // value aliases (e.g. for a "status" select)
+     *   Active: ["live", "enabled"],
      * }}
      * ```
      */

package/index.js

@@ -8097,7 +8097,8 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 	dataEditor: {
 		modal: {
 			importTitle: "Import Data",
-			editTitle: "Edit Data"
+			editTitle: "Edit Data",
+			viewTitle: "View Data"
 		},
 		confirmClose: {
 			title: "Discard changes?",
@@ -29868,6 +29869,7 @@ function Xm({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete
 		setPendingImportFile: ve,
 		openUploaderWithFile: ye,
 		variant: a ?? "editor",
+		isViewer: a === "viewer",
 		search: ne,
 		setSearch: re,
 		matchCase: ie,
@@ -29883,7 +29885,7 @@ function Xm({ columns: e, primaryKey: t, loadData: n, scaleClient: r, onComplete
 		resetScrollRef: z,
 		scrollToGridTop: B,
 		portalRef: me,
-		readonly: _ ?? !1,
+		readonly: a === "viewer" ? !0 : _ ?? !1,
 		filtersResetKey: de,
 		resetFilters: fe,
 		originalColumns: e,
@@ -31766,7 +31768,7 @@ var kg = 9, Ag = 3, jg = [3, 2], Mg = 1, Ng = 6, Pg = .8, Fg = .5, Ig = 4, Lg =
 	paintHeaderCell(e, t, n) {
 		let { ctx: r, theme: i, layout: a, textCache: o, columns: s, controller: c, sortState: l } = e, u = c.selection, d = a.pinnedCount, f = a.rtl, p = a.getColumnX(t, n), m = a.getColumnWidth(t), h = a.contentToCanvasX(p, m);
 		u.isColumnSelected(t) ? (r.fillStyle = i.headerBgSelected, ag(r, h, 0, m, 36)) : u.isColumnHighlighted(t) && (r.fillStyle = i.headerBgActive, ag(r, h, 0, m, 36));
-		let g = s[t], _ = t < d, v = l?.columnId === g.id, y = e.store.isColumnLocked(g.id), b = 0;
+		let g = s[t], _ = t < d, v = l?.columnId === g.id, y = !c.readonly && e.store.isColumnLocked(g.id), b = 0;
 		y && b++, _ && b++, v && b++;
 		let x = b > 0 ? b * 14 + (b - 1) * Ng + Ng : 0, S = m - kg * 2 - x;
 		r.font = i.headerFont, r.fillStyle = i.headerContentIdle;
@@ -45475,39 +45477,39 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 		/* @__PURE__ */ (0, O.jsx)(pj, {})
 	]
 }) }), gj = () => {
-	let { store: e, columns: t, chat: n, enableAddRow: r, readonly: i, navigateToCell: a, importFormats: o, openUploaderWithFile: s } = $m(), { rowCount: c, filteredCount: l, isLoading: u } = ed(e), { t: d } = j(), f = !u && l === 0, p = r && !i && c === 0, m = o !== !1 && o.length > 0, h = (0, y.useCallback)(async () => {
-		a(await sh(e, t, d("dataEditor.dataSources.manuallyAdded")), t[0].id);
+	let { store: e, columns: t, chat: n, enableAddRow: r, readonly: i, isViewer: a, navigateToCell: o, importFormats: s, openUploaderWithFile: c } = $m(), { rowCount: l, filteredCount: u, isLoading: d } = ed(e), { t: f } = j(), p = !d && u === 0, m = r && !i && l === 0, h = s !== !1 && s.length > 0, g = (0, y.useCallback)(async () => {
+		o(await sh(e, t, f("dataEditor.dataSources.manuallyAdded")), t[0].id);
 	}, [
 		e,
 		t,
-		a,
-		d
-	]), g = (0, y.useMemo)(() => {
-		if (p) return {
-			content: d("dataEditor.dataSources.addRow"),
+		o,
+		f
+	]), _ = (0, y.useMemo)(() => {
+		if (m) return {
+			content: f("dataEditor.dataSources.addRow"),
 			startIcon: /* @__PURE__ */ (0, O.jsx)(Ae, { size: "1rem" }),
 			variant: "filled",
-			onClick: h
+			onClick: g
 		};
 	}, [
-		p,
-		h,
-		d
-	]), _ = (0, y.useMemo)(() => th(o === !1 ? [] : o), [o]), v = (0, y.useCallback)((e) => {
+		m,
+		g,
+		f
+	]), v = (0, y.useMemo)(() => th(s === !1 ? [] : s), [s]), b = (0, y.useCallback)((e) => {
 		let t = e[0];
-		t && s(t);
-	}, [s]), { getRootProps: b, isDragActive: x } = Xu({
-		accept: _,
+		t && c(t);
+	}, [c]), { getRootProps: x, isDragActive: S } = Xu({
+		accept: v,
 		maxFiles: 1,
 		noClick: !0,
 		noKeyboard: !0,
-		disabled: i || !m,
-		onDrop: v
+		disabled: i || !h,
+		onDrop: b
 	});
 	return /* @__PURE__ */ (0, O.jsx)(ah, { children: /* @__PURE__ */ (0, O.jsxs)("div", {
-		...b({ className: "updog__data-editor-inner" }),
+		...x({ className: "updog__data-editor-inner" }),
 		children: [
-			/* @__PURE__ */ (0, O.jsx)(nh, { children: /* @__PURE__ */ (0, O.jsx)("div", {
+			!a && /* @__PURE__ */ (0, O.jsx)(nh, { children: /* @__PURE__ */ (0, O.jsx)("div", {
 				className: "updog__data-editor-aside",
 				children: /* @__PURE__ */ (0, O.jsxs)("div", {
 					className: "updog__data-editor-aside__content updog__scrollbar",
@@ -45521,18 +45523,18 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 			/* @__PURE__ */ (0, O.jsxs)(rh, { children: [
 				/* @__PURE__ */ (0, O.jsxs)("div", {
 					className: "updog__data-editor-grid-area",
-					children: [/* @__PURE__ */ (0, O.jsx)(TA, {}), f && /* @__PURE__ */ (0, O.jsx)(ac, {
+					children: [/* @__PURE__ */ (0, O.jsx)(TA, {}), p && /* @__PURE__ */ (0, O.jsx)(ac, {
 						className: "updog-grid__empty-state",
-						title: d("dataEditor.grid.emptyTitle"),
-						text: d("dataEditor.grid.emptyText"),
-						buttonProps: g
+						title: f("dataEditor.grid.emptyTitle"),
+						text: f("dataEditor.grid.emptyText"),
+						buttonProps: _
 					})]
 				}),
 				/* @__PURE__ */ (0, O.jsx)(oh, {}),
-				/* @__PURE__ */ (0, O.jsx)(Yh, {})
+				!a && /* @__PURE__ */ (0, O.jsx)(Yh, {})
 			] }),
-			x && /* @__PURE__ */ (0, O.jsx)(ih, {}),
-			n && /* @__PURE__ */ (0, O.jsx)(hj, {})
+			S && /* @__PURE__ */ (0, O.jsx)(ih, {}),
+			n && !a && /* @__PURE__ */ (0, O.jsx)(hj, {})
 		]
 	}) });
 }, _j = "RENDER_ERROR", vj = (e) => {
@@ -45610,77 +45612,7 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 			]
 		})]
 	});
-}, Sj = 60, Cj = (e) => e.toLowerCase().replace(/[\s_\-.]+/g, "").trim(), wj = (e) => e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[\s_\-.]+/g, " ").toLowerCase().split(" ").filter(Boolean), Tj = (e, t) => {
-	let n = new Set(wj(e)), r = new Set(wj(t));
-	if (n.size === 0 || r.size === 0) return 0;
-	let i = 0;
-	for (let e of n) r.has(e) && i++;
-	return i / Math.max(n.size, r.size);
-}, Ej = (e, t) => {
-	if (e.length === 0) return t.length;
-	if (t.length === 0) return e.length;
-	e.length > t.length && ([e, t] = [t, e]);
-	let n = e.length, r = t.length, i = Array(n + 1);
-	for (let e = 0; e <= n; e++) i[e] = e;
-	for (let a = 1; a <= r; a++) {
-		let r = i[0];
-		i[0] = a;
-		for (let o = 1; o <= n; o++) {
-			let n = e[o - 1] === t[a - 1] ? 0 : 1, s = i[o];
-			i[o] = Math.min(i[o] + 1, i[o - 1] + 1, r + n), r = s;
-		}
-	}
-	return i[n];
-}, Dj = (e) => e <= 4 ? 1 : e <= 8 ? 2 : e <= 15 ? 3 : 4, Oj = (e, t) => {
-	let n = Math.max(e.length, t.length);
-	if (n === 0) return !0;
-	let r = Dj(n);
-	return Ej(e, t) <= r;
-}, kj = (e, t) => {
-	let n = Cj(e), r = Cj(t);
-	return (n.length <= r.length ? n : r).length < 4 ? !1 : n.includes(r) || r.includes(n);
-}, Aj = (e, t, n) => {
-	let r = Cj(e), i = Cj(t);
-	for (let [e, t] of Object.entries(n)) {
-		let n = [e, ...t], a = n.includes(r), o = n.includes(i);
-		if (a && o) return !0;
-	}
-	return !1;
-}, jj = (e, t, n) => {
-	let r = Cj(e), i = Cj(t);
-	if (r === i) return 100;
-	if (n && Aj(e, t, n)) return 90;
-	if (kj(e, t)) return 80;
-	let a = Tj(e, t);
-	return a >= .5 ? 70 : Oj(r, i) ? 65 : a > 0 ? Math.round(a * 60) : 0;
-}, Mj = (e, t, n, r) => {
-	let i = jj(e, t, r), a = jj(e, n, r);
-	return Math.max(i, a);
-}, Nj = (e, t, n = Sj) => {
-	let r, i = 0;
-	for (let n of t) {
-		let t = jj(e, n);
-		t > i && (i = t, r = n);
-	}
-	return i >= n ? r : void 0;
-}, Pj = (e) => {
-	let t = {};
-	for (let [n, { importedValues: r, options: i }] of Object.entries(e)) {
-		let e = {};
-		for (let t of r) e[t] = Nj(t, i);
-		t[n] = e;
-	}
-	return t;
-}, Fj = async (e, t) => {
-	if (!t) return Pj(e);
-	let n = await t(e), r = {};
-	for (let [t, { importedValues: i, options: a }] of Object.entries(e)) {
-		let e = n[t], o = {};
-		for (let t of i) e && t in e ? o[t] = e[t] ?? void 0 : o[t] = Nj(t, a);
-		r[t] = o;
-	}
-	return r;
-}, Ij = "action:create", Lj = {
+}, Sj = {
 	prefix: ["salutation", "honorific"],
 	firstname: [
 		"fname",
@@ -45876,7 +45808,9 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 		"supervisor",
 		"linemanager",
 		"reportingmanager",
-		"managername"
+		"managername",
+		"mgr",
+		"mngr"
 	],
 	managerid: [
 		"supervisorid",
@@ -46207,8 +46141,76 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 		"languagespoken",
 		"nativelanguage",
 		"languageproficiency"
-	]
-}, Rj = (e, t) => {
+	],
+	male: [
+		"m",
+		"man",
+		"boy"
+	],
+	female: [
+		"f",
+		"woman",
+		"girl"
+	],
+	other: [
+		"nonbinary",
+		"nb",
+		"diverse",
+		"prefernottosay"
+	],
+	junior: [
+		"jr",
+		"jun",
+		"entry",
+		"entrylevel",
+		"grad",
+		"graduate"
+	],
+	midlevel: [
+		"mid",
+		"intermediate",
+		"middle"
+	],
+	senior: ["sr", "sen"],
+	associate: ["assoc", "asc"],
+	principal: ["princ", "principle"],
+	lead: [
+		"teamlead",
+		"techlead",
+		"tl"
+	],
+	director: ["dir"],
+	executive: ["exec"],
+	intern: ["internship", "trainee"],
+	fulltime: ["ft", "full"],
+	parttime: ["pt", "part"],
+	contract: [
+		"contractor",
+		"contractual",
+		"freelance",
+		"freelancer"
+	],
+	temporary: ["temp"],
+	permanent: ["perm"],
+	active: ["enabled", "current"],
+	inactive: [
+		"disabled",
+		"terminated",
+		"former"
+	],
+	onleave: ["leave"],
+	pending: ["awaiting"],
+	single: ["unmarried"],
+	married: ["wed"],
+	divorced: ["div"],
+	widowed: ["widow", "widower"],
+	low: ["lo"],
+	medium: ["med"],
+	high: ["hi"],
+	critical: ["crit", "urgent"],
+	yes: ["y", "true"],
+	no: ["n", "false"]
+}, Cj = (e, t) => {
 	if (!t) return e;
 	let n = { ...e };
 	for (let [e, r] of Object.entries(t)) if (e in n) {
@@ -46217,7 +46219,77 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 		n[e] = [...t];
 	} else n[e] = r;
 	return n;
-}, zj = (e, t, n) => Mj(e, t.id, t.title, n), Bj = (e, t, n, r, i = 60) => {
+}, wj = 60, Tj = (e) => e.toLowerCase().replace(/[\s_\-.]+/g, "").trim(), Ej = (e) => e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[\s_\-.]+/g, " ").toLowerCase().split(" ").filter(Boolean), Dj = (e, t) => {
+	let n = new Set(Ej(e)), r = new Set(Ej(t));
+	if (n.size === 0 || r.size === 0) return 0;
+	let i = 0;
+	for (let e of n) r.has(e) && i++;
+	return i / Math.max(n.size, r.size);
+}, Oj = (e, t) => {
+	if (e.length === 0) return t.length;
+	if (t.length === 0) return e.length;
+	e.length > t.length && ([e, t] = [t, e]);
+	let n = e.length, r = t.length, i = Array(n + 1);
+	for (let e = 0; e <= n; e++) i[e] = e;
+	for (let a = 1; a <= r; a++) {
+		let r = i[0];
+		i[0] = a;
+		for (let o = 1; o <= n; o++) {
+			let n = e[o - 1] === t[a - 1] ? 0 : 1, s = i[o];
+			i[o] = Math.min(i[o] + 1, i[o - 1] + 1, r + n), r = s;
+		}
+	}
+	return i[n];
+}, kj = (e) => e <= 4 ? 1 : e <= 8 ? 2 : e <= 15 ? 3 : 4, Aj = (e, t) => {
+	let n = Math.max(e.length, t.length);
+	if (n === 0) return !0;
+	let r = kj(n);
+	return Oj(e, t) <= r;
+}, jj = (e, t) => {
+	let n = Tj(e), r = Tj(t);
+	return (n.length <= r.length ? n : r).length < 4 ? !1 : n.includes(r) || r.includes(n);
+}, Mj = (e, t, n) => {
+	let r = Tj(e), i = Tj(t);
+	for (let [e, t] of Object.entries(n)) {
+		let n = [e, ...t], a = n.includes(r), o = n.includes(i);
+		if (a && o) return !0;
+	}
+	return !1;
+}, Nj = (e, t, n) => {
+	let r = Tj(e), i = Tj(t);
+	if (r === i) return 100;
+	if (n && Mj(e, t, n)) return 90;
+	if (jj(e, t)) return 80;
+	let a = Dj(e, t);
+	return a >= .5 ? 70 : Aj(r, i) ? 65 : a > 0 ? Math.round(a * 60) : 0;
+}, Pj = (e, t, n, r) => {
+	let i = Nj(e, t, r), a = Nj(e, n, r);
+	return Math.max(i, a);
+}, Fj = (e, t, n = Sj, r = wj) => {
+	let i, a = 0;
+	for (let r of t) {
+		let t = Nj(e, r, n);
+		t > a && (a = t, i = r);
+	}
+	return a >= r ? i : void 0;
+}, Ij = (e, t) => {
+	let n = Cj(Sj, t), r = {};
+	for (let [t, { importedValues: i, options: a }] of Object.entries(e)) {
+		let e = {};
+		for (let t of i) e[t] = Fj(t, a, n);
+		r[t] = e;
+	}
+	return r;
+}, Lj = async (e, t, n) => {
+	if (!t) return Ij(e, n);
+	let r = Cj(Sj, n), i = await t(e), a = {};
+	for (let [t, { importedValues: n, options: o }] of Object.entries(e)) {
+		let e = i[t], s = {};
+		for (let t of n) e && t in e ? s[t] = e[t] ?? void 0 : s[t] = Fj(t, o, r);
+		a[t] = s;
+	}
+	return a;
+}, Rj = "action:create", zj = (e, t, n) => Pj(e, t.id, t.title, n), Bj = (e, t, n, r, i = 60) => {
 	let a = null, o = 0;
 	for (let i of t) {
 		if (n.has(i.id)) continue;
@@ -46237,13 +46309,13 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 		...s
 	};
 }, Hj = (e, t, n) => {
-	let r = Rj(Lj, n), i = {}, a = /* @__PURE__ */ new Set();
+	let r = Cj(Sj, n), i = {}, a = /* @__PURE__ */ new Set();
 	for (let n of e) {
-		let e = Cj(n);
+		let e = Tj(n);
 		for (let r of t) {
 			let t = r.id;
 			if (a.has(t)) continue;
-			let o = Cj(t), s = Cj(r.title);
+			let o = Tj(t), s = Tj(r.title);
 			if (e === o || e === s) {
 				i[n] = t, a.add(t);
 				break;
@@ -46368,7 +46440,7 @@ var sj = ({ text: e, onSelect: t }) => /* @__PURE__ */ (0, O.jsx)(at, {
 				id: `${r}_d`,
 				type: "divider"
 			}, {
-				id: Ij,
+				id: Rj,
 				text: a,
 				icon: /* @__PURE__ */ (0, O.jsx)(Ae, { size: "1rem" })
 			}), [r, c];
@@ -47458,14 +47530,15 @@ function PM() {
 			return;
 		}
 		let t = ++Ne.current;
-		Fj(e, c).then((e) => {
+		Lj(e, c, l).then((e) => {
 			Ne.current === t && Me(e);
 		});
 	}, [
 		_,
 		b,
 		n,
-		c
+		c,
+		l
 	]);
 	let Pe = (0, y.useMemo)(() => {
 		let e = {};
@@ -48136,7 +48209,7 @@ function _N(e) {
 		g,
 		v,
 		e.readonly
-	]), x = (0, y.useCallback)(() => v?.(), [v]), S = n(f ? "dataEditor.modal.importTitle" : "dataEditor.modal.editTitle");
+	]), x = (0, y.useCallback)(() => v?.(), [v]), S = f ? n("dataEditor.modal.importTitle") : e.variant === "viewer" ? n("dataEditor.modal.viewTitle") : n("dataEditor.modal.editTitle");
 	(0, y.useEffect)(() => {
 		t === "modal" && !o && p(e.variant === "uploader");
 	}, [

package/package.json

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