@updog/data-editor-wc 0.1.72 → 0.1.74

package/index.d.ts

@@ -166,6 +166,8 @@ declare var export_default = {
       filteredRows_other: "{{filtered}} of {{total}} rows",
     },
     toast: {
+      clipboardWriteFailed:
+        "The browser blocked the copy to the clipboard. You can paste inside this table.",
       dismiss: "Dismiss",
       rowMayNotBeVisible:
         "Row has been added but may not be visible due to active filters or sorting",

package/index.js

@@ -8157,6 +8157,7 @@ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescr
 			filteredRows_other: "{{filtered}} of {{total}} rows"
 		},
 		toast: {
+			clipboardWriteFailed: "The browser blocked the copy to the clipboard. You can paste inside this table.",
 			dismiss: "Dismiss",
 			rowMayNotBeVisible: "Row has been added but may not be visible due to active filters or sorting"
 		},
@@ -9945,34 +9946,38 @@ var Ct = () => {
 		})]
 	});
 }, Mt = (e) => {
-	let { checked: t, onChange: n, label: r, description: i, accessory: a, checkboxPosition: o = "start", disabled: s = !1, className: c, id: l, style: u, isCard: d = !1, indeterminate: f = !1, size: p = "md", onClick: m, renderCheckbox: h, children: g, ..._ } = e, v = (0, y.useId)(), b = l || v, x = p === "sm" ? 14 : 16, S = [
+	let { checked: t, onChange: n, label: r, description: i, accessory: a, checkboxPosition: o = "start", disabled: s = !1, className: c, id: l, style: u, isCard: d = !1, indeterminate: f = !1, size: p = "md", onClick: m, renderCheckbox: h, children: g, ..._ } = e, v = (0, y.useId)(), b = l || v, x = (0, y.useRef)(null);
+	(0, y.useEffect)(() => {
+		x.current && (x.current.indeterminate = f);
+	}, [f]);
+	let S = p === "sm" ? 14 : 16, C = [
 		"updog-checkbox",
 		o === "end" && "updog-checkbox--reverse",
 		i && "updog-checkbox--with-description",
 		s && "updog-checkbox--disabled",
 		d && "updog-checkbox--card",
 		c
-	].filter(Boolean).join(" "), C = [
+	].filter(Boolean).join(" "), w = [
 		"updog-checkbox__box",
 		`updog-checkbox__box--${p}`,
 		t && "updog-checkbox__box--checked",
 		f && "updog-checkbox__box--indeterminate"
-	].filter(Boolean).join(" "), w = (e) => {
+	].filter(Boolean).join(" "), T = (e) => {
 		n(e.target.checked, e);
-	}, T = (e) => {
+	}, E = (e) => {
 		m && m(e);
-	}, E = i ? `${b}__desc` : void 0, D = a ? `${b}-accessory` : void 0, k;
-	if (g) k = /* @__PURE__ */ (0, O.jsx)("div", {
+	}, D = i ? `${b}__desc` : void 0, k = a ? `${b}-accessory` : void 0, A;
+	if (g) A = /* @__PURE__ */ (0, O.jsx)("div", {
 		className: "updog-checkbox__children",
 		children: g
 	});
 	else if (h) {
 		let { renderCheckbox: t, ...n } = e;
-		k = h({
+		A = h({
 			...n,
 			checkboxId: b
 		});
-	} else k = (r || i) && /* @__PURE__ */ (0, O.jsxs)("div", {
+	} else A = (r || i) && /* @__PURE__ */ (0, O.jsxs)("div", {
 		className: "updog-checkbox__content",
 		children: [r && /* @__PURE__ */ (0, O.jsxs)("div", {
 			className: "updog-checkbox__label-wrapper",
@@ -9980,44 +9985,45 @@ var Ct = () => {
 				className: "updog-checkbox__label updog-text--sm",
 				children: r
 			}), a && /* @__PURE__ */ (0, O.jsx)("div", {
-				id: D,
+				id: k,
 				className: "updog-checkbox__accessory",
 				children: a
 			})]
 		}), i && /* @__PURE__ */ (0, O.jsx)("div", {
 			className: "updog-checkbox__description updog-text--sm",
-			id: E,
+			id: D,
 			children: i
 		})]
 	});
 	return /* @__PURE__ */ (0, O.jsxs)("label", {
-		className: S,
+		className: C,
 		htmlFor: b,
 		"data-iscard": d,
 		style: u,
-		onClick: T,
+		onClick: E,
 		children: [
 			/* @__PURE__ */ (0, O.jsx)("input", {
 				..._,
+				ref: x,
 				id: b,
 				type: "checkbox",
 				className: "updog-checkbox__input",
 				tabIndex: s ? -1 : 0,
 				checked: t,
-				onChange: w,
+				onChange: T,
 				disabled: s,
 				"aria-label": !r && typeof _["aria-label"] == "string" ? _["aria-label"] : void 0,
-				"aria-describedby": g ? void 0 : [E, D].filter(Boolean).join(" ") || void 0
+				"aria-describedby": g ? void 0 : [D, k].filter(Boolean).join(" ") || void 0
 			}),
 			!h && /* @__PURE__ */ (0, O.jsx)("div", {
-				className: C,
+				className: w,
 				style: { outlineOffset: 1 },
 				children: /* @__PURE__ */ (0, O.jsx)("div", {
 					className: "updog-checkbox__icon",
-					children: f ? /* @__PURE__ */ (0, O.jsx)(De, { size: x }) : /* @__PURE__ */ (0, O.jsx)(oe, { size: x })
+					children: f ? /* @__PURE__ */ (0, O.jsx)(De, { size: S }) : /* @__PURE__ */ (0, O.jsx)(oe, { size: S })
 				})
 			}),
-			k
+			A
 		]
 	});
 }, Nt = ({ disabled: e, checkboxPosition: t = "start", color: n = "layer2", className: r, ...i }) => {
@@ -33036,14 +33042,14 @@ var pv = class {
 			return;
 		}
 		let s = nv(e);
-		t.fillStyle = n.cellBgIdle, D_(t, 0, 0, a, o), this.paintBodyPane(s, s.panes.scrollable), this.selectionPainter.paintSelectionOutlines(s, null), this.selectionPainter.paintFocusBorder(s, null), this.lastFillHandleRect = this.selectionPainter.paintFillHandle(s, null), this.overlayPainter.paintClipboardOverlay(s), this.overlayPainter.paintFillOverlay(s);
+		t.fillStyle = n.cellBgIdle, D_(t, 0, 0, a, o), this.paintBodyPane(s, s.panes.scrollable), this.selectionPainter.paintSelectionOutlines(s, null), this.selectionPainter.paintFocusBorder(s, null), this.overlayPainter.paintClipboardOverlay(s), this.overlayPainter.paintFillOverlay(s), this.lastFillHandleRect = this.selectionPainter.paintFillHandle(s, null);
 		let c = s.panes.pinned;
 		if (c?.clip) {
 			t.fillStyle = n.cellBgIdle, D_(t, c.clip.x, c.clip.y, c.clip.w, c.clip.h), t.save(), t.beginPath(), t.rect(c.clip.x, c.clip.y, c.clip.w, c.clip.h), t.clip(), this.paintBodyPane(s, c), t.restore(), t.save(), t.beginPath();
 			let e = Math.min(s.totalRows * 34, o - 36);
-			t.rect(c.clip.x, 36, c.clip.w, e), t.clip(), this.selectionPainter.paintSelectionOutlines(s, c), this.selectionPainter.paintFocusBorder(s, c);
+			t.rect(c.clip.x, 36, c.clip.w, e), t.clip(), this.selectionPainter.paintSelectionOutlines(s, c), this.selectionPainter.paintFocusBorder(s, c), this.overlayPainter.paintClipboardOverlay(s);
 			let r = this.selectionPainter.paintFillHandle(s, c);
-			r && (this.lastFillHandleRect = r), this.overlayPainter.paintClipboardOverlay(s), t.restore();
+			r && (this.lastFillHandleRect = r), t.restore();
 		}
 		this.markerPainter.paint(s), this.headerPainter.paintHeaderRow(s), this.headerPainter.paintCornerCell(s), s.resizeGuideX >= 0 && this.overlayPainter.paintResizeGuide(s), this.hasSkeletons = s.hasSkeletons, this.hasPendingCells = s.hasPendingCells;
 	}
@@ -43918,12 +43924,17 @@ function Tj(e, t, n) {
 		}
 		o.push(r.map((e) => String(t[e.id] ?? "")).join("	"));
 	}
-	navigator.clipboard.writeText(o.join("\n"));
+	let s = o.join("\n");
+	return {
+		text: s,
+		written: navigator.clipboard.writeText(s).then(() => !0).catch(() => !1)
+	};
 }
 //#endregion
 //#region src/components/DataEditor/DataEditorGrid/controller/ClipboardManager.ts
 var Ej = {
 	clipboard: null,
+	marqueeVisible: !1,
 	version: 0
 }, Dj = class {
 	_store;
@@ -43940,6 +43951,9 @@ var Ej = {
 	_clipboardMaxRow = -1;
 	_sourceMinRowIndex = -1;
 	_sourceMaxRowIndex = -1;
+	_marqueeVisible = !1;
+	_osText = null;
+	_osWrite = null;
 	_sortState = null;
 	_t = (e) => e;
 	_version = 0;
@@ -43967,7 +43981,7 @@ var Ej = {
 			operation: "copy",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), Tj(this._clipboard, this._columns, this._store));
+		}, this._marqueeVisible = !0, this.precomputeLookup(), this.notify(), this.writeToOs(this._clipboard));
 	}
 	cut() {
 		let e = this.buildClipboardFromSnapshot();
@@ -43975,10 +43989,11 @@ var Ej = {
 			operation: "cut",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), Tj(this._clipboard, this._columns, this._store));
+		}, this._marqueeVisible = !0, this.precomputeLookup(), this.notify(), this.writeToOs(this._clipboard));
 	}
 	async paste() {
-		if (this._clipboard) {
+		let e = await this.readOsClipboard();
+		if (this._clipboard && (!e.ok || e.ours)) {
 			let e = this.resolveTargetFromSnapshot();
 			if (!e) return;
 			let t = this._clipboard, n = this._store, r = Dm(t.columnIds, e.columnIds, t.rowIds ?? null, e.rowIds, this._columns, (e) => n.getRowId(e), n.getSnapshot().filteredCount, t.operation === "cut"), i = await n.pasteInternal(r, e.rowIds, {
@@ -43988,27 +44003,28 @@ var Ej = {
 			i && (this.syncInternalPasteToServer(i, t, e), this._sortState && Xd.info(this._t("dataEditor.toast.rowMayNotBeVisible")), this.clear());
 			return;
 		}
-		let e;
-		try {
-			e = await navigator.clipboard.readText();
-		} catch (e) {
+		if (!e.ok) {
 			this._store.errorHandler.handleError({
 				code: "OPERATION_ERROR",
 				message: "Failed to read clipboard",
 				source: "clipboard-manager",
-				originalError: e
+				originalError: e.error
 			});
 			return;
 		}
-		if (!e) return;
-		let { row: t, col: n } = this.resolveAnchor(), r = await this._store.pasteFromText(e, t, n, this._validator);
-		r && this.syncExternalPasteToServer(r, t, n, e);
+		let t = e.text;
+		if (!t) return;
+		let { row: n, col: r } = this.resolveAnchor(), i = await this._store.pasteFromText(t, n, r, this._validator);
+		i && this.syncExternalPasteToServer(i, n, r, t);
 	}
 	clear() {
-		this._clipboard && (this._clipboard = null, this._clipboardColIndices = null, this._clipboardRowSet = null, this._clipboardIsWholeColumn = !1, this._clipboardMinCol = -1, this._clipboardMaxCol = -1, this._clipboardMinRow = -1, this._clipboardMaxRow = -1, this._sourceMinRowIndex = -1, this._sourceMaxRowIndex = -1, this.notify());
+		this._clipboard && (this._clipboard = null, this._clipboardColIndices = null, this._clipboardRowSet = null, this._clipboardIsWholeColumn = !1, this._clipboardMinCol = -1, this._clipboardMaxCol = -1, this._clipboardMinRow = -1, this._clipboardMaxRow = -1, this._sourceMinRowIndex = -1, this._sourceMaxRowIndex = -1, this._marqueeVisible = !1, this._osText = null, this._osWrite = null, this.notify());
+	}
+	hideMarquee() {
+		this._marqueeVisible && (this._marqueeVisible = !1, this.notify());
 	}
 	isCellInClipboard(e, t) {
-		if (!this._clipboard || !this._clipboardColIndices || !this._clipboardColIndices.has(e)) return !1;
+		if (!this._marqueeVisible || !this._clipboard || !this._clipboardColIndices || !this._clipboardColIndices.has(e)) return !1;
 		if (this._clipboardIsWholeColumn) return !0;
 		if (!this._clipboardRowSet) return !1;
 		let n = this._store.getRowId(t);
@@ -44018,7 +44034,7 @@ var Ej = {
 		return this._clipboard?.operation ?? null;
 	}
 	getClipboardBounds() {
-		if (!this._clipboard) return null;
+		if (!this._clipboard || !this._marqueeVisible) return null;
 		let e = this._clipboardIsWholeColumn ? this._store.getSnapshot().filteredCount - 1 : this._clipboardMaxRow;
 		return {
 			minCol: this._clipboardMinCol,
@@ -44027,6 +44043,32 @@ var Ej = {
 			maxRow: e
 		};
 	}
+	writeToOs(e) {
+		let t = Tj(e, this._columns, this._store);
+		this._osText = t.text, this._osWrite = t.written, t.written.then((e) => {
+			e || (this._store.errorHandler.handleError({
+				code: "OPERATION_ERROR",
+				message: "Failed to write clipboard",
+				source: "clipboard-manager"
+			}), Xd.error(this._t("dataEditor.toast.clipboardWriteFailed")));
+		});
+	}
+	async readOsClipboard() {
+		let e = this._osWrite ? await this._osWrite : !0;
+		try {
+			let t = await navigator.clipboard.readText();
+			return {
+				ok: !0,
+				text: t,
+				ours: !e || t === this._osText
+			};
+		} catch (e) {
+			return {
+				ok: !1,
+				error: e
+			};
+		}
+	}
 	buildClipboardFromSnapshot() {
 		let e = f_(this._selection.getSelection(), this.resolveContext());
 		return e === null ? null : {
@@ -44129,6 +44171,7 @@ var Ej = {
 	notify() {
 		this._version++, this._snapshot = {
 			clipboard: this._clipboard,
+			marqueeVisible: this._marqueeVisible,
 			version: this._version
 		};
 		for (let e of this._listeners) e();
@@ -44516,8 +44559,8 @@ var Bj = class {
 			return;
 		}
 		if (e.key === "Escape") {
-			if (this._clipboard.getSnapshot().clipboard) {
-				this._clipboard.clear();
+			if (this._clipboard.getSnapshot().marqueeVisible) {
+				this._clipboard.hideMarquee();
 				return;
 			}
 			this._selection.clear();
@@ -45330,6 +45373,8 @@ var Qj = {
 	}, [b]), (0, y.useEffect)(() => {
 		R.clipboard.setSortState(m);
 	}, [R, m]), (0, y.useEffect)(() => {
+		R.clipboard.hideMarquee();
+	}, [R, b]), (0, y.useEffect)(() => {
 		R.clipboard.setTranslate(S);
 	}, [R, S]), (0, y.useEffect)(() => {
 		R.setBounds(p, B.columns.length);

package/package.json

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