@taocompany/magic-grid 0.10.3 → 0.10.5

package/dist/index.es.js

@@ -2647,6 +2647,7 @@ function oo(e) {
 		refreshCellStyles: (t) => e.refreshCellStyles(t),
 		startEditingCell: (t) => e.startEditingCell(t),
 		stopEditing: (t) => e.stopEditing(t),
+		commit: (t) => e.commit(t),
 		isEditing: () => e.isEditing(),
 		isCommitting: () => e.isCommitting(),
 		awaitCommitIdle: () => e.awaitCommitIdle(),
@@ -2952,9 +2953,9 @@ var rs = class {
 		} else e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && this.onEditingInput?.();
 	};
 	handleEditorFocusOut = (e) => {
-		let t = e;
+		let t = e, n = this.editing;
 		requestAnimationFrame(() => {
-			this.isEditing() && this.phase !== "committing" && (this.isFocusWithinEditorSurface(t) || (this.clearPendingBlurCommit(), this.scheduleBlurCommitAfterClick()));
+			this.isEditing() && this.editing === n && this.phase !== "committing" && (this.isFocusWithinEditorSurface(t) || (this.clearPendingBlurCommit(), this.scheduleBlurCommitAfterClick()));
 		});
 	};
 	constructor(e) {
@@ -3320,9 +3321,9 @@ var Cs = class {
 		e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.stopRowEditing(!1));
 	};
 	handleEditorBlur = (e) => {
-		let t = e;
+		let t = e, n = this.editing;
 		requestAnimationFrame(() => {
-			this.isEditing() && this.phase !== "committing" && (this.isFocusWithinRowEditors(t.relatedTarget) || (this.clearPendingBlurCommit(), this.scheduleBlurCommitAfterClick()));
+			this.isEditing() && this.editing === n && this.phase !== "committing" && (this.isFocusWithinRowEditors(t.relatedTarget) || (this.clearPendingBlurCommit(), this.scheduleBlurCommitAfterClick()));
 		});
 	};
 	constructor(e) {
@@ -15912,7 +15913,12 @@ function Zx(e, t) {
 	$x(e, t);
 }
 function Qx(e, t) {
-	if (e.deps.rowEditingService.isCommitting()) return;
+	if (e.deps.rowEditingService.isCommitting()) {
+		e.deps.rowEditingService.awaitCommitIdle().then(() => {
+			e.deps.rowEditingService.isCommitting() || Qx(e, t);
+		});
+		return;
+	}
 	if (e.deps.editingService.isEditing()) {
 		e.deps.editingService.stopEditing(!0).then(() => {
 			e.deps.editingService.isEditing() || Qx(e, t);
@@ -15998,6 +16004,12 @@ function Qx(e, t) {
 }
 function $x(e, t) {
 	if (e.deps.rowEditingService.isCommitting()) return;
+	if (e.deps.editingService.isCommitting()) {
+		e.deps.editingService.awaitCommitIdle().then(() => {
+			e.deps.editingService.isCommitting() || $x(e, t);
+		});
+		return;
+	}
 	if (e.deps.rowEditingService.isEditing()) {
 		e.deps.rowEditingService.stopRowEditing(!0).then((n) => {
 			n?.committed && !e.deps.rowEditingService.isEditing() && $x(e, t);
@@ -16094,6 +16106,10 @@ var eS = class {
 	stopEditing(e = !1) {
 		return this.deps.rowEditingService.isEditing() ? this.deps.rowEditingService.stopRowEditing(!e).then((e) => e ? { committed: e.committed } : null) : this.deps.editingService.isEditing() ? this.deps.editingService.stopEditing(!e).then((e) => e ? { committed: e.committed } : null) : Promise.resolve(null);
 	}
+	async commit(e = !1) {
+		let t = await this.stopEditing(e);
+		return t === null ? !this.isEditing() : e ? !0 : t.committed === !0;
+	}
 	isCommitting() {
 		return this.deps.editingService.isCommitting() || this.deps.rowEditingService.isCommitting();
 	}
@@ -20338,12 +20354,15 @@ var ST = class {
 	}
 }, CT = class {
 	ctx;
+	pendingSingleClickGesture = null;
+	clearPendingSingleClickGesture = null;
+	consumedPointerUpCellAction = null;
 	constructor(e) {
 		this.ctx = e;
 	}
 	handleCellMouseDown = async (e) => {
 		if (e.button !== 0) return;
-		if (e.target instanceof Element && e.target.closest(".mg-range-handle")) {
+		if (this.clearPendingSingleClickGesture?.(), this.clearPendingSingleClickGesture = null, this.pendingSingleClickGesture = null, this.consumedPointerUpCellAction = null, e.target instanceof Element && e.target.closest(".mg-range-handle")) {
 			if (e.preventDefault(), e.stopPropagation(), this.ctx.deps.isCommitting() && await this.ctx.deps.awaitCommitIdle(), this.ctx.deps.isEditing() && (await this.ctx.deps.commitEditing(), this.ctx.deps.isEditing())) return;
 			this.ctx.rangeHandleSession.begin(e.clientX, e.clientY);
 			return;
@@ -20366,7 +20385,7 @@ var ST = class {
 				colId: t.colId,
 				rowIndex: t.rowIndex,
 				colIndex: this.ctx.host.getColIndex(t.colId)
-			}), this.ctx.deps.viewportEl.focus();
+			}), this.ctx.deps.viewportEl.focus({ preventScroll: !0 });
 			return;
 		}
 		if (e.target instanceof Element && e.target.closest(".mg-column-settings-menu")) {
@@ -20379,7 +20398,7 @@ var ST = class {
 				colId: t.colId,
 				rowIndex: t.rowIndex,
 				colIndex: this.ctx.host.getColIndex(t.colId)
-			}), this.ctx.deps.viewportEl.focus();
+			}), this.ctx.deps.viewportEl.focus({ preventScroll: !0 });
 			return;
 		}
 		if (t && this.ctx.rowResizeSession.canStart(t.colId, e.target, this.ctx.indexSelectionDragSession.isActive() || this.ctx.rowDragSession.isActive())) {
@@ -20416,60 +20435,43 @@ var ST = class {
 			});
 			return;
 		}
-		if (t && this.ctx.deps.isCellSelectionEnabled?.() && !As(this.ctx.deps.editBehavior) && !await this.commitEditingForCellRangeInteraction(t, e)) return;
-		if (t && this.ctx.cellRangeDragSession.canStart(t, e, "replace")) {
-			e.preventDefault(), this.ctx.host.clearIndexFocusIfNeeded(t.colId), this.emitCellClicked(t), this.ctx.cellRangeDragSession.begin({
-				anchorRowId: t.rowId,
-				anchorColId: t.colId,
-				anchorRowIndex: t.rowIndex,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				mode: "replace"
-			});
-			return;
-		}
-		if (t && this.ctx.cellRangeDragSession.canStart(t, e, "append")) {
-			e.preventDefault(), this.ctx.host.clearIndexFocusIfNeeded(t.colId), this.emitCellClicked(t), this.ctx.cellRangeDragSession.begin({
-				anchorRowId: t.rowId,
-				anchorColId: t.colId,
-				anchorRowIndex: t.rowIndex,
-				clientX: e.clientX,
-				clientY: e.clientY,
-				mode: "append"
-			});
-			return;
-		}
+		let r = !1;
+		if (t && this.ctx.deps.isCellSelectionEnabled?.() && !As(this.ctx.deps.editBehavior) && this.ctx.deps.isEditing() && (!this.isSameEditingTarget(t) && this.shouldSchedulePointerUpWhileEditingSwitch(t, e) && (this.scheduleSingleClickEditingAfterPointerDown(t), r = !0), !await this.commitEditingForCellRangeInteraction(t, e)) || t && this.tryBeginCellRangeDragFromMouseDown(t, e, "replace", r) || t && this.tryBeginCellRangeDragFromMouseDown(t, e, "append", r)) return;
 		if (t && this.ctx.cellRangeInteraction.tryHandleModifierMouseDown(t, e)) {
 			this.emitCellClicked(t), this.ctx.host.clearIndexFocusIfNeeded(t.colId), this.ctx.host.setFocusedCell({
 				rowId: t.rowId,
 				colId: t.colId,
 				rowIndex: t.rowIndex,
 				colIndex: this.ctx.host.getColIndex(t.colId)
-			}), this.ctx.deps.viewportEl.focus();
+			}), this.ctx.deps.viewportEl.focus({ preventScroll: !0 });
 			return;
 		}
-		if (this.ctx.deps.isCommitting() && (e.preventDefault(), await this.ctx.deps.awaitCommitIdle()), this.ctx.deps.isEditing() && mo(e.target)) return;
-		let r = Gb(this.ctx.deps.rowModel, e.target);
-		if (this.ctx.deps.isEditing() && (r && this.isSameEditingTarget(r) || (await this.ctx.deps.commitEditing(), this.ctx.deps.isEditing()))) return;
-		if (!r) {
+		this.ctx.deps.isCommitting() && (e.preventDefault(), await this.ctx.deps.awaitCommitIdle());
+		let i = Gb(this.ctx.deps.rowModel, e.target);
+		if (this.ctx.deps.isEditing()) {
+			let t = i, n = this.resolveCellTargetUnderPointer(e);
+			if (t && !this.isSameEditingTarget(t) ? i = t : n && (i = n), i && this.isSameEditingTarget(i) && mo(e.target) || mo(e.target) && !i) return;
+		}
+		if (this.ctx.deps.isEditing() && (i && this.isSameEditingTarget(i) || (i && (this.scheduleSingleClickEditingAfterPointerDown(i), r = !0), await this.ctx.deps.commitEditing(), this.ctx.deps.isEditing()))) return;
+		if (!i) {
 			this.ctx.host.clearIndexFocusState(), this.ctx.cellRangeInteraction.tryClearOnBlankViewportClick();
 			return;
 		}
-		let { rowId: i, colId: a, rowIndex: o } = r;
-		(this.ctx.host.isExpandColumnEntry(a) || this.ctx.host.isGroupColumnEntry(a) || this.ctx.host.isTreeColumnEntry(a) || this.ctx.host.isSelectionColumnEntry(a) || e.shiftKey || e.ctrlKey || e.metaKey) && e.preventDefault(), this.emitCellClicked(r), this.ctx.host.isIndexColumnEntry(a) ? this.ctx.host.applyIndexFocus(i, o, a, {
+		let { rowId: a, colId: o, rowIndex: s } = i;
+		(this.ctx.host.isExpandColumnEntry(o) || this.ctx.host.isGroupColumnEntry(o) || this.ctx.host.isTreeColumnEntry(o) || this.ctx.host.isSelectionColumnEntry(o) || e.shiftKey || e.ctrlKey || e.metaKey) && e.preventDefault(), this.emitCellClicked(i), this.ctx.host.isIndexColumnEntry(o) ? this.ctx.host.applyIndexFocus(a, s, o, {
 			ctrlKey: e.ctrlKey || e.metaKey,
 			shiftKey: e.shiftKey,
 			toggleOnReselect: !0
-		}) : (this.ctx.host.clearIndexFocusIfNeeded(a), this.ctx.host.isExpandColumnEntry(a) ? this.ctx.host.applyRowExpansionToggle(i, o, a) : this.ctx.host.isSelectionColumnEntry(a) && this.ctx.host.applyRowSelection(i, o, a, {
+		}) : (this.ctx.host.clearIndexFocusIfNeeded(o), this.ctx.host.isExpandColumnEntry(o) ? this.ctx.host.applyRowExpansionToggle(a, s, o) : this.ctx.host.isSelectionColumnEntry(o) && this.ctx.host.applyRowSelection(a, s, o, {
 			ctrlKey: e.ctrlKey || e.metaKey,
 			shiftKey: e.shiftKey,
 			toggleOnReselect: !0
 		})), this.ctx.host.setFocusedCell({
-			rowId: i,
-			colId: a,
-			rowIndex: o,
-			colIndex: this.ctx.host.getColIndex(a)
-		}), this.ctx.deps.viewportEl.focus();
+			rowId: a,
+			colId: o,
+			rowIndex: s,
+			colIndex: this.ctx.host.getColIndex(o)
+		}), this.ctx.deps.viewportEl.focus({ preventScroll: !0 }), !r && this.isOverlaySingleClickEditableColumn(i) && this.scheduleSingleClickEditingAfterPointerDown(i);
 	};
 	handleCellClick = async (e) => {
 		if (e.button !== 0 || (this.ctx.deps.isCommitting() && (e.preventDefault(), await this.ctx.deps.awaitCommitIdle()), e.ctrlKey || e.metaKey || e.shiftKey)) return;
@@ -20478,26 +20480,13 @@ var ST = class {
 			return;
 		}
 		let t = Gb(this.ctx.deps.rowModel, e.target);
-		if (!t) return;
-		if (this.emitRowPointerEvent("rowClicked", t), this.ctx.cellRangeInteraction.tryClearOnPlainClick(t), this.ctx.deps.isEditing()) {
-			if (As(this.ctx.deps.editBehavior) && this.ctx.deps.getEditingRowId() === t.rowId && t.colId !== this.ctx.deps.getEditingCell()?.colId && this.ctx.deps.focusRowEditingColumn?.(t.colId)) return;
-			if (this.isSameEditingTarget(t)) return this.ctx.cellCommentSession?.handleCellClick(e, t), void 0;
-			if (await this.ctx.deps.commitEditing(), this.ctx.deps.isEditing()) return;
-		}
-		if (this.ctx.focusController.focusCellTarget(t), this.ctx.cellCommentSession?.handleCellClick(e, t)) return;
-		if (As(this.ctx.deps.editBehavior)) {
-			let e = this.ctx.deps.columnModel.getColumnById(t.colId);
-			if (!e || Os(e, this.ctx.deps.editType) !== "singleClick") return;
-			this.ctx.cellCommentSession?.closeAll(), this.ctx.deps.tryStartRowEditing(t);
-			return;
-		}
-		let n = this.ctx.deps.columnModel.getColumnById(t.colId);
-		if (n) {
-			if (r(n)) {
-				(n.cellEditor === "checkbox" || n.cellEditor === "switch") && !this.ctx.focusController.isInlineToggleClickTarget(e.target) && this.ctx.focusController.toggleInlineToggleAtCell(t.rowId, t.colId, t.rowIndex);
-				return;
+		if (t) {
+			if (this.emitRowPointerEvent("rowClicked", t), this.ctx.cellRangeInteraction.tryClearOnPlainClick(t), this.ctx.deps.isEditing()) {
+				if (As(this.ctx.deps.editBehavior) && this.ctx.deps.getEditingRowId() === t.rowId && t.colId !== this.ctx.deps.getEditingCell()?.colId && this.ctx.deps.focusRowEditingColumn?.(t.colId)) return;
+				if (this.isSameEditingTarget(t)) return this.ctx.cellCommentSession?.handleCellClick(e, t), void 0;
+				if (await this.ctx.deps.commitEditing(), this.ctx.deps.isEditing()) return;
 			}
-			Os(n, this.ctx.deps.editType) === "singleClick" && (this.ctx.cellCommentSession?.closeAll(), this.ctx.deps.tryStartCellEditing(t));
+			this.ctx.focusController.focusCellTarget(t), !this.ctx.cellCommentSession?.handleCellClick(e, t) && (this.consumePointerUpCellActionIfMatched(t) || this.maybeStartSingleClickEditing(e, t));
 		}
 	};
 	handleCellDoubleClick = async (e) => {
@@ -20519,8 +20508,110 @@ var ST = class {
 	unbind(e) {
 		e.removeEventListener("mousedown", this.handleCellMouseDown, !0), e.removeEventListener("click", this.handleCellClick), e.removeEventListener("dblclick", this.handleCellDoubleClick);
 	}
+	tryBeginCellRangeDragFromMouseDown(e, t, n, r) {
+		return r || this.shouldSkipCellRangeDragForInlineToggleWhileEditing(e, t) || !this.ctx.cellRangeDragSession.canStart(e, t, n) ? !1 : (t.preventDefault(), this.ctx.host.clearIndexFocusIfNeeded(e.colId), this.emitCellClicked(e), this.ctx.cellRangeDragSession.begin({
+			anchorRowId: e.rowId,
+			anchorColId: e.colId,
+			anchorRowIndex: e.rowIndex,
+			clientX: t.clientX,
+			clientY: t.clientY,
+			mode: n
+		}), !0);
+	}
 	async commitEditingForCellRangeInteraction(e, t) {
-		return !this.ctx.deps.isEditing() || this.isSameEditingTarget(e) || t.target instanceof Element && mo(t.target) ? !0 : (this.ctx.deps.isCommitting() && await this.ctx.deps.awaitCommitIdle(), await this.ctx.deps.commitEditing(), !this.ctx.deps.isEditing());
+		if (!this.ctx.deps.isEditing() || this.isSameEditingTarget(e)) return !0;
+		let n = Gb(this.ctx.deps.rowModel, t.target);
+		return n && this.isSameEditingTarget(n) && t.target instanceof Element && mo(t.target) ? !0 : (this.ctx.deps.isCommitting() && await this.ctx.deps.awaitCommitIdle(), await this.ctx.deps.commitEditing(), !this.ctx.deps.isEditing());
+	}
+	resolveCellTargetUnderPointer(e) {
+		if (typeof document.elementsFromPoint != "function") return null;
+		for (let t of document.elementsFromPoint(e.clientX, e.clientY)) {
+			let e = Gb(this.ctx.deps.rowModel, t);
+			if (e && !(this.ctx.deps.isEditing() && this.isSameEditingTarget(e))) return e;
+		}
+		return null;
+	}
+	resolveCellTargetByIds(e, t) {
+		let n = this.ctx.deps.mountEl.querySelector(`.mg-row[data-row-id="${this.escapeCssAttr(String(e))}"]`);
+		if (!n) return null;
+		let r = n.querySelector(`.mg-cell[data-col-id="${this.escapeCssAttr(t)}"]`);
+		return r ? Gb(this.ctx.deps.rowModel, r) : null;
+	}
+	escapeCssAttr(e) {
+		return typeof CSS < "u" && typeof CSS.escape == "function" ? CSS.escape(e) : e.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+	}
+	async completeSingleClickEditingGesture(e, t, n) {
+		if (e.button !== 0) return;
+		this.ctx.deps.isCommitting() && await this.ctx.deps.awaitCommitIdle();
+		let i = this.resolveAnchoredCellTargetAtPointer(e, t, n) ?? this.resolveCellTargetByIds(t, n);
+		if (!i) return;
+		this.ctx.deps.isEditing() && !this.isSameEditingTarget(i) && await this.ctx.deps.commitEditing();
+		let a = this.ctx.deps.columnModel.getColumnById(i.colId);
+		if (a && r(a) && Ko(a.cellEditor) && Y(a, i.rowNode)) {
+			this.ctx.focusController.focusCellTarget(i), this.ctx.focusController.isInlineToggleClickTarget(e.target) || this.ctx.focusController.toggleInlineToggleAtCell(i.rowId, i.colId, i.rowIndex), this.markPointerUpCellActionConsumed(i);
+			return;
+		}
+		this.ctx.focusController.focusCellTarget(i), this.maybeStartSingleClickEditing(e, i), this.markPointerUpCellActionConsumed(i);
+	}
+	resolveAnchoredCellTargetAtPointer(e, t, n) {
+		let r = String(t);
+		if (typeof document.elementsFromPoint == "function") for (let t of document.elementsFromPoint(e.clientX, e.clientY)) {
+			let e = Gb(this.ctx.deps.rowModel, t);
+			if (e && String(e.rowId) === r && e.colId === n) return e;
+		}
+		let i = Gb(this.ctx.deps.rowModel, e.target);
+		return i && String(i.rowId) === r && i.colId === n ? i : null;
+	}
+	scheduleSingleClickEditingAfterPointerDown(e) {
+		this.clearPendingSingleClickGesture?.();
+		let t = Symbol("single-click-edit");
+		this.pendingSingleClickGesture = t;
+		let n = e.rowId, r = e.colId, i = (e) => {
+			this.pendingSingleClickGesture === t && e.button === 0 && (this.pendingSingleClickGesture = null, this.clearPendingSingleClickGesture = null, document.removeEventListener("mouseup", i, !0), document.removeEventListener("pointerup", i, !0), this.completeSingleClickEditingGesture(e, n, r));
+		};
+		document.addEventListener("mouseup", i, { capture: !0 }), document.addEventListener("pointerup", i, { capture: !0 }), this.clearPendingSingleClickGesture = () => {
+			document.removeEventListener("mouseup", i, !0), document.removeEventListener("pointerup", i, !0);
+		};
+	}
+	shouldSchedulePointerUpWhileEditingSwitch(e, t) {
+		return this.isOverlaySingleClickEditableColumn(e) || this.shouldSkipCellRangeDragForInlineToggleWhileEditing(e, t);
+	}
+	isOverlaySingleClickEditableColumn(e) {
+		if (As(this.ctx.deps.editBehavior)) return !1;
+		let t = this.ctx.deps.columnModel.getColumnById(e.colId);
+		return !t || r(t) || Os(t, this.ctx.deps.editType) !== "singleClick" ? !1 : Y(t, e.rowNode);
+	}
+	shouldSkipCellRangeDragForInlineToggleWhileEditing(e, t) {
+		if (!this.ctx.deps.isEditing() || t.shiftKey || t.ctrlKey || t.metaKey || this.ctx.focusController.isInlineToggleClickTarget(t.target)) return !1;
+		let n = this.ctx.deps.columnModel.getColumnById(e.colId);
+		return !n || !r(n) || !Ko(n.cellEditor) ? !1 : Y(n, e.rowNode);
+	}
+	markPointerUpCellActionConsumed(e) {
+		this.consumedPointerUpCellAction = {
+			rowId: String(e.rowId),
+			colId: e.colId
+		};
+	}
+	consumePointerUpCellActionIfMatched(e) {
+		let t = this.consumedPointerUpCellAction;
+		return !t || String(e.rowId) !== t.rowId || e.colId !== t.colId ? !1 : (this.consumedPointerUpCellAction = null, !0);
+	}
+	maybeStartSingleClickEditing(e, t) {
+		if (e.ctrlKey || e.metaKey || e.shiftKey || this.ctx.deps.isEditing() && (As(this.ctx.deps.editBehavior) && this.ctx.deps.getEditingRowId() === t.rowId && t.colId !== this.ctx.deps.getEditingCell()?.colId && this.ctx.deps.focusRowEditingColumn?.(t.colId) || this.isSameEditingTarget(t))) return;
+		if (As(this.ctx.deps.editBehavior)) {
+			let e = this.ctx.deps.columnModel.getColumnById(t.colId);
+			if (!e || Os(e, this.ctx.deps.editType) !== "singleClick") return;
+			this.ctx.cellCommentSession?.closeAll(), this.ctx.deps.tryStartRowEditing(t);
+			return;
+		}
+		let n = this.ctx.deps.columnModel.getColumnById(t.colId);
+		if (n) {
+			if (r(n)) {
+				(n.cellEditor === "checkbox" || n.cellEditor === "switch") && !this.ctx.focusController.isInlineToggleClickTarget(e.target) && this.ctx.focusController.toggleInlineToggleAtCell(t.rowId, t.colId, t.rowIndex);
+				return;
+			}
+			Os(n, this.ctx.deps.editType) === "singleClick" && (this.ctx.cellCommentSession?.closeAll(), this.ctx.deps.tryStartCellEditing(t));
+		}
 	}
 	isSameEditingTarget(e) {
 		if (!this.ctx.deps.isEditing()) return !1;
@@ -25618,6 +25709,10 @@ var lO = class {
 	stopEditing(e = !1) {
 		return this.cellEditing.stopEditing(e).then(() => void 0);
 	}
+	async commit(e = !1) {
+		let t = await this.cellEditing.commit(e);
+		return e || await this.awaitCommitIdle(), e ? t : t && !this.cellEditing.isEditing();
+	}
 	isCommitting() {
 		return this.cellEditing.isCommitting() || this.inlineCellEditorService.isCommitting();
 	}