@iyulab/flex-table 0.48.6 → 0.49.1

package/dist/{flex-table-CoqeYojZ.js → flex-table-CpAhHipx.js}

@@ -1973,14 +1973,10 @@ var K = {
 	}
 	_dispatchRowSelectionEvent() {
 		let { selectedIndices: e, selectedRows: t } = this.getSelectedRows();
-		this.dispatchEvent(new CustomEvent("selection-change", {
-			detail: {
-				selectedIndices: e,
-				selectedRows: t
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._emit("selection-change", {
+			selectedIndices: e,
+			selectedRows: t
+		});
 	}
 	setFilter(e, t) {
 		this._filters = this._filters.filter((t) => t.key !== e), this._filters.push({
@@ -2010,25 +2006,26 @@ var K = {
 	clearUndoHistory() {
 		this._undo.clear(), this._dispatchUndoStateEvent();
 	}
-	_dispatchUndoStateEvent() {
-		this.dispatchEvent(new CustomEvent("undo-state-change", {
-			detail: {
-				canUndo: this.canUndo,
-				canRedo: this.canRedo
-			},
+	_emit(e, t, n) {
+		let r = new CustomEvent(e, {
+			detail: t,
 			bubbles: !0,
-			composed: !0
-		}));
+			composed: !0,
+			...n
+		});
+		return this.dispatchEvent(r), r;
+	}
+	_dispatchUndoStateEvent() {
+		this._emit("undo-state-change", {
+			canUndo: this.canUndo,
+			canRedo: this.canRedo
+		});
 	}
 	_dispatchFilterEvent() {
-		this.dispatchEvent(new CustomEvent("filter-change", {
-			detail: {
-				keys: this.filterKeys,
-				filteredCount: this.filteredRowCount
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._emit("filter-change", {
+			keys: this.filterKeys,
+			filteredCount: this.filteredRowCount
+		});
 	}
 	addColumn(e, t) {
 		let n = t ?? this.columns.length;
@@ -2048,14 +2045,10 @@ var K = {
 					...this.columns.slice(n)
 				], this.requestUpdate();
 			}
-		}), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-add", {
-			detail: {
-				column: e,
-				index: n
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent(), e;
+		}), this.requestUpdate(), this._emit("column-add", {
+			column: e,
+			index: n
+		}), this._dispatchUndoStateEvent(), e;
 	}
 	deleteColumn(e) {
 		let t = this.columns.findIndex((t) => t.key === e);
@@ -2073,15 +2066,11 @@ var K = {
 			redo: () => {
 				this._filters = this._filters.filter((t) => t.key !== e), this._sortCriteria = this._sortCriteria.filter((t) => t.key !== e), this._columnWidths.delete(e), this.columns = this.columns.filter((t) => t.key !== e), this.requestUpdate();
 			}
-		}), this._activeCell && this._activeCell.col >= this.visibleColumns.length && (this._selection.clear(), this._activeCell = null), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-delete", {
-			detail: {
-				column: n,
-				key: e,
-				index: t
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent();
+		}), this._activeCell && this._activeCell.col >= this.visibleColumns.length && (this._selection.clear(), this._activeCell = null), this.requestUpdate(), this._emit("column-delete", {
+			column: n,
+			key: e,
+			index: t
+		}), this._dispatchUndoStateEvent();
 	}
 	moveColumn(e, t) {
 		let n = this.columns.findIndex((t) => t.key === e);
@@ -2099,15 +2088,11 @@ var K = {
 				let e = [...this.columns];
 				e.splice(n, 1), e.splice(r, 0, i), this.columns = e, this.requestUpdate();
 			}
-		}), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-reorder", {
-			detail: {
-				key: e,
-				oldIndex: n,
-				newIndex: r
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent();
+		}), this.requestUpdate(), this._emit("column-reorder", {
+			key: e,
+			oldIndex: n,
+			newIndex: r
+		}), this._dispatchUndoStateEvent();
 	}
 	hideColumn(e) {
 		let t = this.columns.findIndex((t) => t.key === e);
@@ -2142,14 +2127,10 @@ var K = {
 		n !== -1 && (this.columns = this.columns.map((e, r) => r === n ? {
 			...e,
 			hidden: t
-		} : e), this.dispatchEvent(new CustomEvent("column-visibility-change", {
-			detail: {
-				key: e,
-				hidden: t
-			},
-			bubbles: !0,
-			composed: !0
-		})));
+		} : e), this._emit("column-visibility-change", {
+			key: e,
+			hidden: t
+		}));
 	}
 	getHiddenColumns() {
 		return this.columns.filter((e) => e.hidden);
@@ -2165,14 +2146,10 @@ var K = {
 			redo: () => {
 				this.data.splice(r, 0, n), this.requestUpdate();
 			}
-		}), this.requestUpdate(), this.dispatchEvent(new CustomEvent("row-add", {
-			detail: {
-				row: n,
-				index: r
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent(), n;
+		}), this.requestUpdate(), this._emit("row-add", {
+			row: n,
+			index: r
+		}), this._dispatchUndoStateEvent(), n;
 	}
 	deleteRows(e) {
 		let t = e ?? this._getSelectedDataRows();
@@ -2198,14 +2175,10 @@ var K = {
 				let e = this._toDataIndex(this._activeCell.row);
 				t.includes(e) && (this._selection.clear(), this._activeCell = null);
 			}
-			this.requestUpdate(), this.dispatchEvent(new CustomEvent("row-delete", {
-				detail: {
-					indices: r.map((e) => e.index),
-					rows: r.map((e) => e.row)
-				},
-				bubbles: !0,
-				composed: !0
-			})), this._dispatchUndoStateEvent();
+			this.requestUpdate(), this._emit("row-delete", {
+				indices: r.map((e) => e.index),
+				rows: r.map((e) => e.row)
+			}), this._dispatchUndoStateEvent();
 		}
 	}
 	updateRows(e) {
@@ -2231,11 +2204,7 @@ var K = {
 				for (let e of t) this.data[e.row][e.key] = e.newValue;
 				this.requestUpdate();
 			}
-		}), this.requestUpdate(), this.dispatchEvent(new CustomEvent("batch-update", {
-			detail: { changes: t },
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent());
+		}), this.requestUpdate(), this._emit("batch-update", { changes: t }), this._dispatchUndoStateEvent());
 	}
 	_createEmptyRow() {
 		let e = {};
@@ -2298,15 +2267,11 @@ var K = {
 			let n = this._comments.get(e);
 			n && (n.delete(t), n.size === 0 && this._comments.delete(e));
 		}
-		this.dispatchEvent(new CustomEvent("comment-change", {
-			detail: {
-				dataIndex: e,
-				colKey: t,
-				text: n ?? null
-			},
-			bubbles: !0,
-			composed: !0
-		})), this.requestUpdate();
+		this._emit("comment-change", {
+			dataIndex: e,
+			colKey: t,
+			text: n ?? null
+		}), this.requestUpdate();
 	}
 	getComment(e, t) {
 		return this._comments.get(e)?.get(t) ?? null;
@@ -2360,11 +2325,7 @@ var K = {
 			redo: () => {
 				this.data = n, this.requestUpdate();
 			}
-		}), this.dispatchEvent(new CustomEvent("data-import", {
-			detail: { count: n.length },
-			bubbles: !0,
-			composed: !0
-		}));
+		}), this._emit("data-import", { count: n.length });
 	}
 	_applyImportedRows(e) {
 		if (e.length === 0) return;
@@ -2385,11 +2346,7 @@ var K = {
 			redo: () => {
 				this.data = r, this.requestUpdate();
 			}
-		}), this.dispatchEvent(new CustomEvent("data-import", {
-			detail: { count: r.length },
-			bubbles: !0,
-			composed: !0
-		}));
+		}), this._emit("data-import", { count: r.length });
 	}
 	_buildHeaderColumnMap(e) {
 		let t = /* @__PURE__ */ new Map();
@@ -2528,15 +2485,11 @@ var K = {
 			return;
 		}
 		if (this._filteredIndices = ce(this.data, this._filters, (e, t, n) => {
-			this.dispatchEvent(new CustomEvent("filter-error", {
-				detail: {
-					error: e,
-					row: t,
-					filterKey: n.key
-				},
-				bubbles: !0,
-				composed: !0
-			}));
+			this._emit("filter-error", {
+				error: e,
+				row: t,
+				filterKey: n.key
+			});
 		}), this._filters.length === 0 && this._sortCriteria.length === 0) this._sortedIndices = Array.from({ length: this.data.length }, (e, t) => t);
 		else if (this._sortCriteria.length === 0) this._sortedIndices = [...this._filteredIndices];
 		else {
@@ -2584,21 +2537,16 @@ var K = {
 		if (r < 0 || a < 0) return;
 		let o = this._toDataIndex(a), s = this.visibleColumns[r];
 		if (!s) return;
-		let c = new CustomEvent("context-menu", {
-			detail: {
-				x: e.clientX,
-				y: e.clientY,
-				row: o,
-				col: r,
-				key: s.key,
-				value: this.data[o]?.[s.key],
-				rowData: this.data[o]
-			},
-			bubbles: !0,
-			composed: !0,
-			cancelable: !0
-		});
-		this.dispatchEvent(c), this._cancelCommentPopup(), this.showContextMenu && !c.defaultPrevented && (this._bodyContextMenu = {
+		let c = this._emit("context-menu", {
+			x: e.clientX,
+			y: e.clientY,
+			row: o,
+			col: r,
+			key: s.key,
+			value: this.data[o]?.[s.key],
+			rowData: this.data[o]
+		}, { cancelable: !0 });
+		this._cancelCommentPopup(), this.showContextMenu && !c.defaultPrevented && (this._bodyContextMenu = {
 			rowIndex: a,
 			colIndex: r,
 			dataIndex: o,
@@ -2651,16 +2599,12 @@ var K = {
 	_fireRowActivate(e) {
 		if (!this._activeCell) return;
 		let t = this._toDataIndex(this._activeCell.row), n = this.data[t];
-		n && this.dispatchEvent(new CustomEvent("row-activate", {
-			detail: {
-				row: n,
-				index: t,
-				col: this._activeCell.col,
-				key: e?.key
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		n && this._emit("row-activate", {
+			row: n,
+			index: t,
+			col: this._activeCell.col,
+			key: e?.key
+		});
 	}
 	_startEdit() {
 		if (!this._activeCell) return;
@@ -2672,16 +2616,12 @@ var K = {
 			return;
 		}
 		let t = this._toDataIndex(this._activeCell.row), n = this.data[t];
-		this._editing.start(this._activeCell, n[e.key]), this._editingCell = { ...this._activeCell }, this.dispatchEvent(new CustomEvent("cell-edit-start", {
-			detail: {
-				row: t,
-				col: this._activeCell.col,
-				key: e.key,
-				value: n[e.key]
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._editing.start(this._activeCell, n[e.key]), this._editingCell = { ...this._activeCell }, this._emit("cell-edit-start", {
+			row: t,
+			col: this._activeCell.col,
+			key: e.key,
+			value: n[e.key]
+		});
 	}
 	_commitEdit() {
 		if (!this._editing.current) return;
@@ -2722,48 +2662,36 @@ var K = {
 		let { row: n, col: r } = t.position, i = this._toDataIndex(n), a = this.visibleColumns[r], o = t.originalValue;
 		if (a.autocomplete === "strict" && e != null && e !== "" && !this._getAutocompleteCandidates(a, "").includes(String(e))) {
 			let t = k("notInList");
-			this._markCellInvalid(n, r, t), this.dispatchEvent(new CustomEvent("validation-error", {
-				detail: {
-					row: i,
-					col: r,
-					key: a.key,
-					value: e,
-					error: t
-				},
-				bubbles: !0,
-				composed: !0
-			}));
+			this._markCellInvalid(n, r, t), this._emit("validation-error", {
+				row: i,
+				col: r,
+				key: a.key,
+				value: e,
+				error: t
+			});
 			return;
 		}
 		if (a.type === "number" && typeof e == "string" || a.type === "date" && typeof e == "string" && f(e) === null || a.type === "datetime" && typeof e == "string" && p(e) === null) {
 			let t = k(a.type === "number" ? "notANumber" : a.type === "date" ? "notADate" : "notADateTime");
-			this._markCellInvalid(n, r, t), this.dispatchEvent(new CustomEvent("validation-error", {
-				detail: {
-					row: i,
-					col: r,
-					key: a.key,
-					value: e,
-					error: t
-				},
-				bubbles: !0,
-				composed: !0
-			}));
+			this._markCellInvalid(n, r, t), this._emit("validation-error", {
+				row: i,
+				col: r,
+				key: a.key,
+				value: e,
+				error: t
+			});
 			return;
 		}
 		if (a.validator) {
 			let t = a.validator(e, this.data[i], a);
 			if (t) {
-				this._markCellInvalid(n, r, t), this.dispatchEvent(new CustomEvent("validation-error", {
-					detail: {
-						row: i,
-						col: r,
-						key: a.key,
-						value: e,
-						error: t
-					},
-					bubbles: !0,
-					composed: !0
-				}));
+				this._markCellInvalid(n, r, t), this._emit("validation-error", {
+					row: i,
+					col: r,
+					key: a.key,
+					value: e,
+					error: t
+				});
 				return;
 			}
 		}
@@ -2775,29 +2703,21 @@ var K = {
 			redo: () => {
 				this.data[i][a.key] = e, this.requestUpdate();
 			}
-		}), this.requestUpdate(), this.dispatchEvent(new CustomEvent("cell-edit-commit", {
-			detail: {
-				row: i,
-				col: r,
-				key: a.key,
-				oldValue: o,
-				newValue: e
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._dispatchUndoStateEvent();
+		}), this.requestUpdate(), this._emit("cell-edit-commit", {
+			row: i,
+			col: r,
+			key: a.key,
+			oldValue: o,
+			newValue: e
+		}), this._dispatchUndoStateEvent();
 	}
 	_cancelEdit() {
 		this._autocompleteState = null;
 		let e = this._editing.cancel();
-		this._editingCell = null, e && this.dispatchEvent(new CustomEvent("cell-edit-cancel", {
-			detail: {
-				row: e.position.row,
-				col: e.position.col
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._editingCell = null, e && this._emit("cell-edit-cancel", {
+			row: e.position.row,
+			col: e.position.col
+		});
 	}
 	_onEditorKeyDown(e) {
 		if (_(e)) return;
@@ -2942,15 +2862,11 @@ var K = {
 		let n = this.visibleColumns.findIndex((t) => t.key === e), r = this.visibleColumns[n];
 		if (!r) return;
 		let i = this._columnWidths.get(r.key) ?? r.width ?? q, a = r.minWidth ?? J, o = Math.max(a, i + t);
-		this._columnWidths.set(r.key, o), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
-			detail: {
-				key: r.key,
-				width: o,
-				colIndex: n
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._columnWidths.set(r.key, o), this.requestUpdate(), this._emit("column-resize", {
+			key: r.key,
+			width: o,
+			colIndex: n
+		});
 	}
 	_handleNavigation(e) {
 		switch (e.key) {
@@ -2987,24 +2903,16 @@ var K = {
 		}
 	}
 	_clipboardError(e, t) {
-		this.dispatchEvent(new CustomEvent("clipboard-error", {
-			detail: {
-				action: e,
-				error: t
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._emit("clipboard-error", {
+			action: e,
+			error: t
+		});
 	}
 	_afterCopy(e, t, n) {
-		n && this._clearRange(e), this.dispatchEvent(new CustomEvent(n ? "clipboard-cut" : "clipboard-copy", {
-			detail: {
-				range: e,
-				text: t
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		n && this._clearRange(e), this._emit(n ? "clipboard-cut" : "clipboard-copy", {
+			range: e,
+			text: t
+		});
 	}
 	_pasteText(e) {
 		if (!this._activeCell) return;
@@ -3026,14 +2934,10 @@ var K = {
 				}
 			}), this._dispatchUndoStateEvent();
 		}
-		this.requestUpdate(), this.dispatchEvent(new CustomEvent("clipboard-paste", {
-			detail: {
-				changes: r,
-				addedRows: n.length
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this.requestUpdate(), this._emit("clipboard-paste", {
+			changes: r,
+			addedRows: n.length
+		});
 	}
 	_selectPastedRange(e, t) {
 		let n = Math.max(...t.map((e) => e.length)), r = Math.min(e.row + t.length, this._visibleRowCount) - 1, i = Math.min(e.col + n, this.visibleColumns.length) - 1;
@@ -3203,11 +3107,7 @@ var K = {
 		i < this.scrollLeft ? this.scrollLeft = i : a > this.scrollLeft + this.clientWidth && (this.scrollLeft = a - this.clientWidth);
 	}
 	_dispatchSelectionEvent() {
-		this.dispatchEvent(new CustomEvent("cell-select", {
-			detail: this._activeCell ? { ...this._activeCell } : null,
-			bubbles: !0,
-			composed: !0
-		}));
+		this._emit("cell-select", this._activeCell ? { ...this._activeCell } : null);
 	}
 	_onHeaderClick(t, n) {
 		if (this._wasHeaderDrag) {
@@ -3219,26 +3119,18 @@ var K = {
 			this._selectColumn(r);
 			return;
 		}
-		n.sortable !== !1 && (this._sortCriteria = e(this._sortCriteria, n.key, t.shiftKey), this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sort-change", {
-			detail: { criteria: [...this._sortCriteria] },
-			bubbles: !0,
-			composed: !0
-		})));
+		n.sortable !== !1 && (this._sortCriteria = e(this._sortCriteria, n.key, t.shiftKey), this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this._emit("sort-change", { criteria: [...this._sortCriteria] }));
 	}
 	_selectColumn(e) {
 		let t = this._visibleRowCount;
 		t === 0 || e < 0 || (this._selection.setActive(0, e), this._selection.setActiveWithRange(t - 1, e), this._activeCell = {
 			row: 0,
 			col: e
-		}, this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-select", {
-			detail: {
-				colIndex: e,
-				key: this.visibleColumns[e]?.key,
-				rowCount: t
-			},
-			bubbles: !0,
-			composed: !0
-		})));
+		}, this.requestUpdate(), this._emit("column-select", {
+			colIndex: e,
+			key: this.visibleColumns[e]?.key,
+			rowCount: t
+		}));
 	}
 	selectColumn(e) {
 		this._selectColumn(e);
@@ -3294,6 +3186,7 @@ var K = {
         ${o >= 0 ? i`<span class="ft-sort-order">${o + 1}</span>` : ""}
         <button class="ft-column-menu-btn ${s ? "ft-filter-active" : ""}"
           type="button"
+          data-key=${e.key}
           title=${k("columnMenu")}
           aria-label=${k("columnMenuFor", { header: e.label })}
           aria-haspopup="menu"
@@ -3325,16 +3218,12 @@ var K = {
 			x: e.clientX,
 			y: e.clientY,
 			hiddenNeighbors: this._hiddenNeighbors(t)
-		}, this.dispatchEvent(new CustomEvent("header-context-menu", {
-			detail: {
-				key: t.key,
-				label: t.label,
-				x: e.clientX,
-				y: e.clientY
-			},
-			bubbles: !0,
-			composed: !0
-		})), requestAnimationFrame(() => {
+		}, this._emit("header-context-menu", {
+			key: t.key,
+			label: t.label,
+			x: e.clientX,
+			y: e.clientY
+		}), requestAnimationFrame(() => {
 			document.addEventListener("click", this._onDocumentClick, { once: !0 });
 		});
 	}
@@ -3519,11 +3408,7 @@ var K = {
 		n && n.sortable !== !1 && (this._sortCriteria = [{
 			key: e,
 			direction: t
-		}], this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sort-change", {
-			detail: { criteria: [...this._sortCriteria] },
-			bubbles: !0,
-			composed: !0
-		})));
+		}], this.dataMode !== "server" && this._recomputeView(), this.requestUpdate(), this._emit("sort-change", { criteria: [...this._sortCriteria] }));
 	}
 	_keepMenuInView(e) {
 		let t = this.shadowRoot?.querySelector(e);
@@ -3540,11 +3425,28 @@ var K = {
 		let s = Math.max(4, Math.min(n.left, i - r.width - 4));
 		e.style.left = `${s}px`, e.style.top = `${o}px`;
 	}
+	_closeFilterDropdown(e = !0) {
+		let t = this._openFilterKey;
+		this._openFilterKey = null, e && t !== null && this.updateComplete.then(() => {
+			[...this.shadowRoot?.querySelectorAll(".ft-column-menu-btn") ?? []].find((e) => e.dataset.key === t)?.focus();
+		});
+	}
+	_onFilterDialogKeydown(e) {
+		if (e.key !== "Tab") return;
+		let t = [...e.currentTarget.querySelectorAll("input, select, textarea, button, u-date-picker")].filter((e) => !e.disabled && e.getClientRects().length > 0);
+		if (t.length === 0) return;
+		let n = e.composedPath(), r = t.findIndex((e) => n.includes(e)), i = t.length - 1;
+		e.shiftKey && r <= 0 ? (e.preventDefault(), t[i].focus()) : !e.shiftKey && (r === i || r === -1) && (e.preventDefault(), t[0].focus());
+	}
 	_renderFilterDropdown(e) {
 		let t = e.type ?? "text";
 		return i`
-      <div class="ft-filter-dropdown" role="group" aria-label=${k("filterFor", { header: e.label })}
-        @click=${(e) => e.stopPropagation()}>
+      <div class="ft-filter-dropdown" role="dialog" aria-label=${k("filterFor", { header: e.label })}
+        @click=${(e) => e.stopPropagation()}
+        @keydown=${{
+			handleEvent: (e) => this._onFilterDialogKeydown(e),
+			capture: !0
+		}}>
         ${t === "boolean" ? this._renderBooleanFilter(e) : t === "number" ? this._renderNumberFilter(e) : t === "date" || t === "datetime" ? this._renderDateFilter(e) : this._renderTextFilter(e)}
         <div class="ft-filter-actions">
           <button class="ft-filter-clear" @click=${() => this._clearColumnFilter(e.key)}>${k("clear")}</button>
@@ -3588,7 +3490,7 @@ var K = {
 			(r === "" || r === "empty" || r === "non-empty") && (r ? this._emptyFilterState.set(e, r) : this._emptyFilterState.delete(e), t?.(), this._applyFilterForKey(e));
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="">${k("blankAll")}</option>
           <option value="empty">${k("emptyOnly")}</option>
@@ -3666,7 +3568,7 @@ var K = {
 			}), this._applyTextFilter(e.key);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="contains">${k("contains")}</option>
           <option value="starts">${k("startsWith")}</option>
@@ -3687,7 +3589,7 @@ var K = {
 			}), this._emptyFilterState.delete(e.key), this._applyTextFilter(e.key);
 		}}
         @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
       ${this._renderEmptyFilterRow(e.key, () => {
 			this._textFilterState.delete(e.key);
@@ -3721,7 +3623,7 @@ var K = {
 			}, this._numberFilterState.set(e, i), this._emptyFilterState.delete(e), this._applyFilterForKey(e);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           ${Object.keys(K).map((e) => i`<option value=${e}>${K[e]}</option>`)}
         </select>
@@ -3738,7 +3640,7 @@ var K = {
 			}, this._numberFilterState.set(e, i), this._emptyFilterState.delete(e), this._applyFilterForKey(e);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
       </div>
     `;
@@ -3755,7 +3657,7 @@ var K = {
 			r.join = n, this._numberFilterState.set(e.key, r), this._emptyFilterState.delete(e.key), this._applyFilterForKey(e.key);
 		}}
           @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
           <option value="and">AND</option>
           <option value="or">OR</option>
@@ -3787,7 +3689,7 @@ var K = {
 	}
 	_renderDateFilter(e) {
 		let t = e.type === "datetime", n = this._dateFilterState.get(e.key) ?? {}, r = (e) => e?.slice(0, 10), o = (e) => {
-			e.key === "Escape" && $(e.currentTarget) || (e.stopPropagation(), e.key === "Escape" && (this._openFilterKey = null));
+			e.key === "Escape" && $(e.currentTarget) || (e.stopPropagation(), e.key === "Escape" && this._closeFilterDropdown());
 		};
 		return i`
       <div class="ft-filter-range ft-filter-range-dates">
@@ -3819,7 +3721,7 @@ var K = {
 			n === "all" ? this.removeFilter(e.key) : this.setFilter(e.key, (e) => !!e == (n === "true"));
 		}}
         @keydown=${(e) => {
-			e.key === "Escape" && (this._openFilterKey = null), e.stopPropagation();
+			e.key === "Escape" && this._closeFilterDropdown(), e.stopPropagation();
 		}}>
         <option value="all">${k("all")}</option>
         <option value="true">\u2714 ${k("booleanTrue")}</option>
@@ -3837,15 +3739,11 @@ var K = {
 		let r = this.shadowRoot?.querySelectorAll(`.ft-cell[data-col-index="${t}"]`), i = 0, a = this.shadowRoot?.querySelector(`.ft-header-cell[data-col-index="${t}"]`);
 		if (a && (i = Math.max(i, a.scrollWidth)), r) for (let e of r) i = Math.max(i, e.scrollWidth);
 		let o = n.minWidth ?? J, s = Math.max(o, i + 8);
-		this._columnWidths.set(n.key, s), this.requestUpdate(), this.dispatchEvent(new CustomEvent("column-resize", {
-			detail: {
-				key: n.key,
-				width: s,
-				colIndex: t
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		this._columnWidths.set(n.key, s), this.requestUpdate(), this._emit("column-resize", {
+			key: n.key,
+			width: s,
+			colIndex: t
+		});
 	}
 	_onResizeStart(e, t) {
 		e.preventDefault(), e.stopPropagation();
@@ -3864,15 +3762,11 @@ var K = {
 		}, o = () => {
 			if (a(), this._resizing) {
 				let e = this._columnWidths.get(n.key) ?? q;
-				this.dispatchEvent(new CustomEvent("column-resize", {
-					detail: {
-						key: n.key,
-						width: e,
-						colIndex: t
-					},
-					bubbles: !0,
-					composed: !0
-				})), this._resizing = null;
+				this._emit("column-resize", {
+					key: n.key,
+					width: e,
+					colIndex: t
+				}), this._resizing = null;
 			}
 		};
 		document.addEventListener("mousemove", i), document.addEventListener("mouseup", o), this._resizeCleanup = a;
@@ -4001,15 +3895,11 @@ var K = {
 				for (let e of r) this.data[e.dataRow][e.key] = e.newValue;
 				this.requestUpdate();
 			}
-		}), this._dispatchUndoStateEvent(), this.dispatchEvent(new CustomEvent("fill-handle-apply", {
-			detail: {
-				sourceRange: e,
-				targetRange: t,
-				cells: r
-			},
-			bubbles: !0,
-			composed: !0
-		}))), this.requestUpdate();
+		}), this._dispatchUndoStateEvent(), this._emit("fill-handle-apply", {
+			sourceRange: e,
+			targetRange: t,
+			cells: r
+		})), this.requestUpdate();
 	}
 	_detectNumericSeries(e) {
 		if (e.length < 2) return null;
@@ -4101,14 +3991,10 @@ var K = {
 			redo: () => {
 				this.data = [...a], this.requestUpdate();
 			}
-		}), this._dispatchUndoStateEvent(), this.dispatchEvent(new CustomEvent("row-reorder", {
-			detail: {
-				from: n,
-				to: r
-			},
-			bubbles: !0,
-			composed: !0
-		}));
+		}), this._dispatchUndoStateEvent(), this._emit("row-reorder", {
+			from: n,
+			to: r
+		});
 	}
 	_toggleFindPanel(e) {
 		if (this._findState?.mode === e) {
@@ -4191,19 +4077,15 @@ var K = {
 				for (let e of r) this.data[e.dataRow][e.key] = e.newValue;
 				this.requestUpdate();
 			}
-		}), this._dispatchUndoStateEvent(), this.dispatchEvent(new CustomEvent("find-replace", {
-			detail: {
-				type: "replace-all",
-				cells: r.map((e) => ({
-					row: e.dataRow,
-					col: e.key,
-					oldValue: e.oldValue,
-					newValue: e.newValue
-				}))
-			},
-			bubbles: !0,
-			composed: !0
-		}))), this._findState.results = [], this._findState.currentIndex = 0, this.requestUpdate();
+		}), this._dispatchUndoStateEvent(), this._emit("find-replace", {
+			type: "replace-all",
+			cells: r.map((e) => ({
+				row: e.dataRow,
+				col: e.key,
+				oldValue: e.oldValue,
+				newValue: e.newValue
+			}))
+		})), this._findState.results = [], this._findState.currentIndex = 0, this.requestUpdate();
 	}
 	_replaceOne() {
 		if (!this._findState || this._findState.results.length === 0) return;
@@ -4216,19 +4098,15 @@ var K = {
 			redo: () => {
 				this.data[a][o] = n, this.requestUpdate();
 			}
-		}), this._dispatchUndoStateEvent(), this.dispatchEvent(new CustomEvent("find-replace", {
-			detail: {
-				type: "replace",
-				cells: [{
-					row: a,
-					col: o,
-					oldValue: s,
-					newValue: n
-				}]
-			},
-			bubbles: !0,
-			composed: !0
-		})), this._findSearch(), this._findGoTo(Math.min(e, this._findState.results.length - 1));
+		}), this._dispatchUndoStateEvent(), this._emit("find-replace", {
+			type: "replace",
+			cells: [{
+				row: a,
+				col: o,
+				oldValue: s,
+				newValue: n
+			}]
+		}), this._findSearch(), this._findGoTo(Math.min(e, this._findState.results.length - 1));
 	}
 	_renderFindPanel() {
 		if (!this._findState) return "";