@updog/data-editor 0.1.72 → 0.1.74

package/index.d.ts

@@ -168,6 +168,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

@@ -157,6 +157,7 @@ var Hr = {
 			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"
 		},
@@ -1194,34 +1195,38 @@ var Ci = () => {
 		})]
 	});
 }, Mi = (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: g, children: _, ...v } = e, y = h(), b = l || y, 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: g, renderCheckbox: _, children: v, ...b } = e, x = h(), S = l || x, T = y(null);
+	m(() => {
+		T.current && (T.current.indeterminate = f);
+	}, [f]);
+	let E = p === "sm" ? 14 : 16, D = [
 		"updog-checkbox",
 		o === "end" && "updog-checkbox--reverse",
 		i && "updog-checkbox--with-description",
 		s && "updog-checkbox--disabled",
 		d && "updog-checkbox--card",
 		c
-	].filter(Boolean).join(" "), T = [
+	].filter(Boolean).join(" "), O = [
 		"updog-checkbox__box",
 		`updog-checkbox__box--${p}`,
 		t && "updog-checkbox__box--checked",
 		f && "updog-checkbox__box--indeterminate"
-	].filter(Boolean).join(" "), E = (e) => {
+	].filter(Boolean).join(" "), k = (e) => {
 		n(e.target.checked, e);
-	}, D = (e) => {
-		m && m(e);
-	}, O = i ? `${b}__desc` : void 0, k = a ? `${b}-accessory` : void 0, A;
-	if (_) A = /* @__PURE__ */ C("div", {
+	}, A = (e) => {
+		g && g(e);
+	}, j = i ? `${S}__desc` : void 0, M = a ? `${S}-accessory` : void 0, N;
+	if (v) N = /* @__PURE__ */ C("div", {
 		className: "updog-checkbox__children",
-		children: _
+		children: v
 	});
-	else if (g) {
+	else if (_) {
 		let { renderCheckbox: t, ...n } = e;
-		A = g({
+		N = _({
 			...n,
-			checkboxId: b
+			checkboxId: S
 		});
-	} else A = (r || i) && /* @__PURE__ */ w("div", {
+	} else N = (r || i) && /* @__PURE__ */ w("div", {
 		className: "updog-checkbox__content",
 		children: [r && /* @__PURE__ */ w("div", {
 			className: "updog-checkbox__label-wrapper",
@@ -1229,44 +1234,45 @@ var Ci = () => {
 				className: "updog-checkbox__label updog-text--sm",
 				children: r
 			}), a && /* @__PURE__ */ C("div", {
-				id: k,
+				id: M,
 				className: "updog-checkbox__accessory",
 				children: a
 			})]
 		}), i && /* @__PURE__ */ C("div", {
 			className: "updog-checkbox__description updog-text--sm",
-			id: O,
+			id: j,
 			children: i
 		})]
 	});
 	return /* @__PURE__ */ w("label", {
-		className: S,
-		htmlFor: b,
+		className: D,
+		htmlFor: S,
 		"data-iscard": d,
 		style: u,
-		onClick: D,
+		onClick: A,
 		children: [
 			/* @__PURE__ */ C("input", {
-				...v,
-				id: b,
+				...b,
+				ref: T,
+				id: S,
 				type: "checkbox",
 				className: "updog-checkbox__input",
 				tabIndex: s ? -1 : 0,
 				checked: t,
-				onChange: E,
+				onChange: k,
 				disabled: s,
-				"aria-label": !r && typeof v["aria-label"] == "string" ? v["aria-label"] : void 0,
-				"aria-describedby": _ ? void 0 : [O, k].filter(Boolean).join(" ") || void 0
+				"aria-label": !r && typeof b["aria-label"] == "string" ? b["aria-label"] : void 0,
+				"aria-describedby": v ? void 0 : [j, M].filter(Boolean).join(" ") || void 0
 			}),
-			!g && /* @__PURE__ */ C("div", {
-				className: T,
+			!_ && /* @__PURE__ */ C("div", {
+				className: O,
 				style: { outlineOffset: 1 },
 				children: /* @__PURE__ */ C("div", {
 					className: "updog-checkbox__icon",
-					children: C(f ? ve : F, { size: x })
+					children: C(f ? ve : F, { size: E })
 				})
 			}),
-			A
+			N
 		]
 	});
 }, Ni = ({ disabled: e, checkboxPosition: t = "start", color: n = "layer2", className: r, ...i }) => {
@@ -12816,14 +12822,14 @@ var xf = class {
 			return;
 		}
 		let s = uf(e);
-		t.fillStyle = n.cellBgIdle, Pd(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, Pd(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, Pd(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;
 	}
@@ -18990,12 +18996,17 @@ function uv(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 dv = {
 	clipboard: null,
+	marqueeVisible: !1,
 	version: 0
 }, fv = class {
 	_store;
@@ -19012,6 +19023,9 @@ var dv = {
 	_clipboardMaxRow = -1;
 	_sourceMinRowIndex = -1;
 	_sourceMaxRowIndex = -1;
+	_marqueeVisible = !1;
+	_osText = null;
+	_osWrite = null;
 	_sortState = null;
 	_t = (e) => e;
 	_version = 0;
@@ -19039,7 +19053,7 @@ var dv = {
 			operation: "copy",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), uv(this._clipboard, this._columns, this._store));
+		}, this._marqueeVisible = !0, this.precomputeLookup(), this.notify(), this.writeToOs(this._clipboard));
 	}
 	cut() {
 		let e = this.buildClipboardFromSnapshot();
@@ -19047,10 +19061,11 @@ var dv = {
 			operation: "cut",
 			columnIds: e.columnIds,
 			rowIds: e.rowIds
-		}, this.precomputeLookup(), this.notify(), uv(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 = dl(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, {
@@ -19060,27 +19075,28 @@ var dv = {
 			i && (this.syncInternalPasteToServer(i, t, e), this._sortState && Fs.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);
@@ -19090,7 +19106,7 @@ var dv = {
 		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,
@@ -19099,6 +19115,32 @@ var dv = {
 			maxRow: e
 		};
 	}
+	writeToOs(e) {
+		let t = uv(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"
+			}), Fs.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 = yd(this._selection.getSelection(), this.resolveContext());
 		return e === null ? null : {
@@ -19201,6 +19243,7 @@ var dv = {
 	notify() {
 		this._version++, this._snapshot = {
 			clipboard: this._clipboard,
+			marqueeVisible: this._marqueeVisible,
 			version: this._version
 		};
 		for (let e of this._listeners) e();
@@ -19588,8 +19631,8 @@ var Tv = 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();
@@ -20402,6 +20445,8 @@ var Lv = {
 	}, [j]), m(() => {
 		H.clipboard.setSortState(E);
 	}, [H, E]), m(() => {
+		H.clipboard.hideMarquee();
+	}, [H, j]), m(() => {
 		H.clipboard.setTranslate(N);
 	}, [H, N]), m(() => {
 		H.setBounds(g, ae.columns.length);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@updog/data-editor",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "description": "Client-side CSV importer and spreadsheet editor for React. Import CSV, Excel, JSON, TSV, and XML, match columns, validate, and edit 1M+ rows entirely in the browser.",
   "author": "Mikhail Kutateladze <admin@updog.tech>",
   "homepage": "https://updog.tech",