@toolbox-web/grid 0.3.3 → 0.4.1

package/lib/plugins/editing/index.js

@@ -0,0 +1,721 @@
+const R = {
+  expand: "▶",
+  collapse: "▼",
+  sortAsc: "▲",
+  sortDesc: "▼",
+  sortNone: "⇅",
+  submenuArrow: "▶",
+  dragHandle: "⋮⋮",
+  toolPanel: "☰"
+};
+class _ {
+  /**
+   * Plugin dependencies - declare other plugins this one requires.
+   *
+   * Dependencies are validated when the plugin is attached.
+   * Required dependencies throw an error if missing.
+   * Optional dependencies log an info message if missing.
+   *
+   * @example
+   * ```typescript
+   * static readonly dependencies: PluginDependency[] = [
+   *   { name: 'editing', required: true, reason: 'Tracks cell edits for undo/redo' },
+   *   { name: 'selection', required: false, reason: 'Enables selection-based undo' },
+   * ];
+   * ```
+   */
+  static dependencies;
+  /** Plugin version - override in subclass if needed */
+  version = "1.0.0";
+  /** CSS styles to inject into the grid's shadow DOM */
+  styles;
+  /** Custom cell renderers keyed by type name */
+  cellRenderers;
+  /** Custom header renderers keyed by type name */
+  headerRenderers;
+  /** Custom cell editors keyed by type name */
+  cellEditors;
+  /** The grid instance this plugin is attached to */
+  grid;
+  /** Plugin configuration - merged with defaults in attach() */
+  config;
+  /** User-provided configuration from constructor */
+  userConfig;
+  /**
+   * Plugin-level AbortController for event listener cleanup.
+   * Created fresh in attach(), aborted in detach().
+   * This ensures event listeners are properly cleaned up when plugins are re-attached.
+   */
+  #e;
+  /**
+   * Default configuration - subclasses should override this getter.
+   * Note: This must be a getter (not property initializer) for proper inheritance
+   * since property initializers run after parent constructor.
+   */
+  get defaultConfig() {
+    return {};
+  }
+  constructor(e = {}) {
+    this.userConfig = e;
+  }
+  /**
+   * Called when the plugin is attached to a grid.
+   * Override to set up event listeners, initialize state, etc.
+   *
+   * @example
+   * ```ts
+   * attach(grid: GridElement): void {
+   *   super.attach(grid);
+   *   // Set up document-level listeners with auto-cleanup
+   *   document.addEventListener('keydown', this.handleEscape, {
+   *     signal: this.disconnectSignal
+   *   });
+   * }
+   * ```
+   */
+  attach(e) {
+    this.#e?.abort(), this.#e = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+  }
+  /**
+   * Called when the plugin is detached from a grid.
+   * Override to clean up event listeners, timers, etc.
+   *
+   * @example
+   * ```ts
+   * detach(): void {
+   *   // Clean up any state not handled by disconnectSignal
+   *   this.selectedRows.clear();
+   *   this.cache = null;
+   * }
+   * ```
+   */
+  detach() {
+    this.#e?.abort(), this.#e = void 0;
+  }
+  /**
+   * Get another plugin instance from the same grid.
+   * Use for inter-plugin communication.
+   *
+   * @example
+   * ```ts
+   * const selection = this.getPlugin(SelectionPlugin);
+   * if (selection) {
+   *   const selectedRows = selection.getSelectedRows();
+   * }
+   * ```
+   */
+  getPlugin(e) {
+    return this.grid?.getPlugin(e);
+  }
+  /**
+   * Emit a custom event from the grid.
+   */
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
+  }
+  /**
+   * Request a re-render of the grid.
+   */
+  requestRender() {
+    this.grid?.requestRender?.();
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Use this instead of requestRender() when only CSS classes need updating.
+   */
+  requestAfterRender() {
+    this.grid?.requestAfterRender?.();
+  }
+  /**
+   * Get the current rows from the grid.
+   */
+  get rows() {
+    return this.grid?.rows ?? [];
+  }
+  /**
+   * Get the original unfiltered/unprocessed rows from the grid.
+   * Use this when you need all source data regardless of active filters.
+   */
+  get sourceRows() {
+    return this.grid?.sourceRows ?? [];
+  }
+  /**
+   * Get the current columns from the grid.
+   */
+  get columns() {
+    return this.grid?.columns ?? [];
+  }
+  /**
+   * Get only visible columns from the grid (excludes hidden).
+   * Use this for rendering that needs to match the grid template.
+   */
+  get visibleColumns() {
+    return this.grid?._visibleColumns ?? [];
+  }
+  /**
+   * Get the shadow root of the grid.
+   */
+  get shadowRoot() {
+    return this.grid?.shadowRoot ?? null;
+  }
+  /**
+   * Get the disconnect signal for event listener cleanup.
+   * This signal is aborted when the grid disconnects from the DOM.
+   * Use this when adding event listeners that should be cleaned up automatically.
+   *
+   * Best for:
+   * - Document/window-level listeners added in attach()
+   * - Listeners on the grid element itself
+   * - Any listener that should persist across renders
+   *
+   * Not needed for:
+   * - Listeners on elements created in afterRender() (removed with element)
+   *
+   * @example
+   * element.addEventListener('click', handler, { signal: this.disconnectSignal });
+   * document.addEventListener('keydown', handler, { signal: this.disconnectSignal });
+   */
+  get disconnectSignal() {
+    return this.#e?.signal ?? this.grid?.disconnectSignal;
+  }
+  /**
+   * Get the grid-level icons configuration.
+   * Returns merged icons (user config + defaults).
+   */
+  get gridIcons() {
+    const e = this.grid?.gridConfig?.icons ?? {};
+    return { ...R, ...e };
+  }
+  /**
+   * Resolve an icon value to string or HTMLElement.
+   * Checks plugin config first, then grid-level icons, then defaults.
+   *
+   * @param iconKey - The icon key in GridIcons (e.g., 'expand', 'collapse')
+   * @param pluginOverride - Optional plugin-level override
+   * @returns The resolved icon value
+   */
+  resolveIcon(e, t) {
+    return t !== void 0 ? t : this.gridIcons[e];
+  }
+  /**
+   * Set an icon value on an element.
+   * Handles both string (text/HTML) and HTMLElement values.
+   *
+   * @param element - The element to set the icon on
+   * @param icon - The icon value (string or HTMLElement)
+   */
+  setIcon(e, t) {
+    typeof t == "string" ? e.innerHTML = t : t instanceof HTMLElement && (e.innerHTML = "", e.appendChild(t.cloneNode(!0)));
+  }
+  /**
+   * Log a warning message.
+   */
+  warn(e) {
+    console.warn(`[tbw-grid:${this.name}] ${e}`);
+  }
+  // #endregion
+}
+function k(f) {
+  switch (f.type) {
+    case "number":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "number", t.value = e.value != null ? String(e.value) : "", t.addEventListener("blur", () => e.commit(t.value === "" ? null : Number(t.value))), t.addEventListener("keydown", (i) => {
+          i.key === "Enter" && e.commit(t.value === "" ? null : Number(t.value)), i.key === "Escape" && e.cancel();
+        }), t;
+      };
+    case "boolean":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "checkbox", t.checked = !!e.value, t.addEventListener("change", () => e.commit(t.checked)), t;
+      };
+    case "date":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "date", e.value instanceof Date && (t.valueAsDate = e.value), t.addEventListener("change", () => e.commit(t.valueAsDate)), t.addEventListener("keydown", (i) => {
+          i.key === "Escape" && e.cancel();
+        }), t;
+      };
+    case "select":
+    case "typeahead":
+      return (e) => {
+        const t = document.createElement("select"), i = e.column;
+        i.multi && (t.multiple = !0);
+        const s = i.options;
+        (typeof s == "function" ? s() : s || []).forEach((r) => {
+          const c = document.createElement("option");
+          c.value = String(r.value), c.textContent = r.label, (i.multi && Array.isArray(e.value) && e.value.includes(r.value) || !i.multi && e.value === r.value) && (c.selected = !0), t.appendChild(c);
+        });
+        const l = () => {
+          if (i.multi) {
+            const r = [];
+            Array.from(t.selectedOptions).forEach((c) => {
+              r.push(c.value);
+            }), e.commit(r);
+          } else
+            e.commit(t.value);
+        };
+        return t.addEventListener("change", l), t.addEventListener("blur", l), t.addEventListener("keydown", (r) => {
+          r.key === "Escape" && e.cancel();
+        }), t;
+      };
+    default:
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "text", t.value = e.value != null ? String(e.value) : "", t.addEventListener("blur", () => e.commit(t.value)), t.addEventListener("keydown", (i) => {
+          i.key === "Enter" && e.commit(t.value), i.key === "Escape" && e.cancel();
+        }), t;
+      };
+  }
+}
+const w = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
+function b(f) {
+  return !(typeof f != "string" || f === "__proto__" || f === "constructor" || f === "prototype");
+}
+function T(f) {
+  return (f.__editingCellCount ?? 0) > 0;
+}
+function L(f) {
+  const e = (f.__editingCellCount ?? 0) + 1;
+  f.__editingCellCount = e, f.setAttribute("data-has-editing", "");
+}
+function S(f) {
+  f.__editingCellCount = 0, f.removeAttribute("data-has-editing");
+}
+function A(f, e, t) {
+  const i = f.querySelector("input,textarea,select");
+  if (!i) return;
+  const s = () => i instanceof HTMLInputElement ? i.type === "checkbox" ? i.checked : i.type === "number" ? i.value === "" ? null : Number(i.value) : i.type === "date" ? i.valueAsDate : i.value : e.type === "number" && i.value !== "" ? Number(i.value) : i.value;
+  i.addEventListener("blur", () => {
+    t(s());
+  }), i instanceof HTMLInputElement && i.type === "checkbox" ? i.addEventListener("change", () => t(i.checked)) : i instanceof HTMLSelectElement && i.addEventListener("change", () => t(s()));
+}
+class q extends _ {
+  name = "editing";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      editOn: "click"
+    };
+  }
+  // #region Editing State (fully owned by plugin)
+  /** Currently active edit row index, or -1 if not editing */
+  #e = -1;
+  /** Currently active edit column index, or -1 if not editing */
+  #r = -1;
+  /** Snapshots of row data before editing started */
+  #s = /* @__PURE__ */ new Map();
+  /** Set of row indices that have been modified */
+  #t = /* @__PURE__ */ new Set();
+  /** Set of cells currently in edit mode: "rowIndex:colIndex" */
+  #n = /* @__PURE__ */ new Set();
+  /** Flag to restore focus after next render (used when exiting edit mode) */
+  #o = !1;
+  // #endregion
+  // #region Lifecycle
+  attach(e) {
+    super.attach(e);
+    const t = this.disconnectSignal, i = e;
+    i._activeEditRows = -1, i._rowEditSnapshots = /* @__PURE__ */ new Map(), i._changedRowIndices = /* @__PURE__ */ new Set(), Object.defineProperty(e, "changedRows", {
+      get: () => this.changedRows,
+      configurable: !0
+    }), Object.defineProperty(e, "changedRowIndices", {
+      get: () => this.changedRowIndices,
+      configurable: !0
+    }), e.resetChangedRows = (s) => this.resetChangedRows(s), e.beginBulkEdit = (s, n) => {
+      n && this.beginCellEdit(s, n);
+    }, document.addEventListener(
+      "keydown",
+      (s) => {
+        s.key === "Escape" && this.#e !== -1 && this.#i(this.#e, !0);
+      },
+      { capture: !0, signal: t }
+    ), document.addEventListener(
+      "mousedown",
+      (s) => {
+        if (this.#e === -1) return;
+        const n = i.findRenderedRowElement?.(this.#e);
+        !n || (s.composedPath && s.composedPath() || []).includes(n) || this.#i(this.#e, !1);
+      },
+      { signal: t }
+    );
+  }
+  detach() {
+    this.#e = -1, this.#r = -1, this.#s.clear(), this.#t.clear(), this.#n.clear(), super.detach();
+  }
+  // #endregion
+  // #region Config Augmentation (processColumns hook)
+  /**
+   * Augment columns with editing metadata.
+   * This enables the grid to recognize editable columns without core knowledge.
+   */
+  processColumns(e) {
+    return e;
+  }
+  // #endregion
+  // #region Event Handlers (event distribution)
+  /**
+   * Handle cell clicks - start editing if configured for click mode.
+   * Both click and dblclick events come through this handler.
+   * Starts row-based editing (all editable cells in the row get editors).
+   */
+  onCellClick(e) {
+    const t = this.grid, i = this.config.editOn ?? t.effectiveConfig?.editOn;
+    if (i === !1 || i === "manual" || i !== "click" && i !== "dblclick") return !1;
+    const s = e.originalEvent.type === "dblclick";
+    if (i === "click" && s || i === "dblclick" && !s) return !1;
+    const { rowIndex: n } = e;
+    return t._columns?.some((r) => r.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
+  }
+  /**
+   * Handle keyboard events for edit lifecycle.
+   */
+  onKeyDown(e) {
+    const t = this.grid;
+    if (e.key === "Escape" && this.#e !== -1)
+      return this.#i(this.#e, !0), !0;
+    if (e.key === " " || e.key === "Spacebar") {
+      const i = t._focusRow, s = t._focusCol;
+      if (i >= 0 && s >= 0) {
+        const n = t._visibleColumns[s], l = t._rows[i];
+        if (n?.editable && n.type === "boolean" && l) {
+          const r = n.field;
+          if (b(r)) {
+            const u = !l[r];
+            return this.#c(i, n, u, l), e.preventDefault(), this.requestRender(), !0;
+          }
+        }
+      }
+      return !1;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      if (this.#e !== -1)
+        return !1;
+      const i = this.config.editOn ?? t.effectiveConfig?.editOn;
+      if (i === !1 || i === "manual") return !1;
+      const s = t._focusRow;
+      return s >= 0 && t._columns?.some((l) => l.editable) ? (this.beginBulkEdit(s), !0) : !1;
+    }
+    return !1;
+  }
+  // #endregion
+  // #region Render Hooks
+  /**
+   * After render, reapply editors to cells in edit mode.
+   * This handles virtualization - when a row scrolls back into view,
+   * we need to re-inject the editor.
+   */
+  afterRender() {
+    const e = this.grid;
+    if (this.#o && (this.#o = !1, this.#u(e)), this.#n.size !== 0)
+      for (const t of this.#n) {
+        const [i, s] = t.split(":"), n = parseInt(i, 10), l = parseInt(s, 10), r = e.findRenderedRowElement?.(n);
+        if (!r) continue;
+        const c = r.querySelector(`.cell[data-col="${l}"]`);
+        if (!c || c.classList.contains("editing")) continue;
+        const u = e._rows[n], a = e._visibleColumns[l];
+        u && a && this.#a(u, n, a, l, c, !0);
+      }
+  }
+  /**
+   * On scroll render, reapply editors to recycled cells.
+   */
+  onScrollRender() {
+    this.afterRender();
+  }
+  // #endregion
+  // #region Public API
+  /**
+   * Get all rows that have been modified.
+   */
+  get changedRows() {
+    const e = this.grid;
+    return Array.from(this.#t).map((t) => e._rows[t]);
+  }
+  /**
+   * Get indices of all modified rows.
+   */
+  get changedRowIndices() {
+    return Array.from(this.#t);
+  }
+  /**
+   * Get the currently active edit row index, or -1 if not editing.
+   */
+  get activeEditRow() {
+    return this.#e;
+  }
+  /**
+   * Get the currently active edit column index, or -1 if not editing.
+   */
+  get activeEditCol() {
+    return this.#r;
+  }
+  /**
+   * Check if a specific row is currently being edited.
+   */
+  isRowEditing(e) {
+    return this.#e === e;
+  }
+  /**
+   * Check if a specific cell is currently being edited.
+   */
+  isCellEditing(e, t) {
+    return this.#n.has(`${e}:${t}`);
+  }
+  /**
+   * Check if a specific row has been modified.
+   */
+  isRowChanged(e) {
+    return this.#t.has(e);
+  }
+  /**
+   * Reset all change tracking.
+   */
+  resetChangedRows(e) {
+    const t = this.changedRows, i = this.changedRowIndices;
+    this.#t.clear(), this.#l(), e || this.emit("changed-rows-reset", { rows: t, indices: i }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
+  }
+  /**
+   * Programmatically begin editing a cell.
+   */
+  beginCellEdit(e, t) {
+    const i = this.grid, s = i._visibleColumns.findIndex((c) => c.field === t);
+    if (s === -1 || !i._visibleColumns[s]?.editable) return;
+    const r = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${s}"]`);
+    r && this.#f(e, s, r);
+  }
+  /**
+   * Programmatically begin editing all editable cells in a row.
+   */
+  beginBulkEdit(e) {
+    const t = this.grid;
+    if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((r) => r.editable)) return;
+    const n = t.findRenderedRowElement?.(e);
+    if (!n) return;
+    const l = t._rows[e];
+    this.#d(e, l), Array.from(n.children).forEach((r, c) => {
+      const u = t._visibleColumns[c];
+      if (u?.editable) {
+        const a = r;
+        a.classList.contains("editing") || this.#a(l, e, u, c, a, !0);
+      }
+    }), setTimeout(() => {
+      let r = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
+      if (r?.classList.contains("editing") || (r = n.querySelector(".cell.editing")), r?.classList.contains("editing")) {
+        const c = r.querySelector(w);
+        try {
+          c?.focus({ preventScroll: !0 });
+        } catch {
+        }
+      }
+    }, 0);
+  }
+  /**
+   * Commit the currently active row edit.
+   */
+  commitActiveRowEdit() {
+    this.#e !== -1 && this.#i(this.#e, !1);
+  }
+  /**
+   * Cancel the currently active row edit.
+   */
+  cancelActiveRowEdit() {
+    this.#e !== -1 && this.#i(this.#e, !0);
+  }
+  // #endregion
+  // #region Internal Methods
+  /**
+   * Begin editing a single cell.
+   */
+  #f(e, t, i) {
+    const s = this.grid, n = s._rows[e], l = s._visibleColumns[t];
+    !n || !l?.editable || i.classList.contains("editing") || (this.#e !== e && this.#d(e, n), this.#r = t, this.#a(n, e, l, t, i, !1));
+  }
+  /**
+   * Sync the internal grid state with the plugin's editing state.
+   */
+  #l() {
+    const e = this.grid;
+    e._activeEditRows = this.#e, e._rowEditSnapshots = this.#s, e._changedRowIndices = this.#t;
+  }
+  /**
+   * Snapshot original row data and mark as editing.
+   */
+  #d(e, t) {
+    this.#e !== e && (this.#s.set(e, { ...t }), this.#e = e, this.#l());
+  }
+  /**
+   * Exit editing for a row.
+   */
+  #i(e, t) {
+    if (this.#e !== e) return;
+    const i = this.grid, s = this.#s.get(e), n = i._rows[e], l = i.findRenderedRowElement?.(e);
+    if (!t && l && n && l.querySelectorAll(".cell.editing").forEach((c) => {
+      const u = Number(c.getAttribute("data-col"));
+      if (isNaN(u)) return;
+      const a = i._visibleColumns[u];
+      if (!a) return;
+      const g = c.querySelector("input,textarea,select");
+      if (g) {
+        let o;
+        g instanceof HTMLInputElement && g.type === "checkbox" ? o = g.checked : (o = g.value, a.type === "number" && o !== "" && (o = Number(o))), n[a.field] !== o && this.#c(e, a, o, n);
+      }
+    }), t && s && n)
+      Object.keys(s).forEach((r) => {
+        n[r] = s[r];
+      }), this.#t.delete(e);
+    else if (!t) {
+      const r = this.#t.has(e);
+      this.emit("row-commit", {
+        rowIndex: e,
+        row: n,
+        changed: r,
+        changedRows: this.changedRows,
+        changedRowIndices: this.changedRowIndices
+      });
+    }
+    this.#s.delete(e), this.#e = -1, this.#r = -1, this.#l();
+    for (const r of this.#n)
+      r.startsWith(`${e}:`) && this.#n.delete(r);
+    l && (l.querySelectorAll(".cell.editing").forEach((r) => {
+      r.classList.remove("editing"), S(r.parentElement);
+    }), this.requestRender()), this.#o = !0, l || (this.#u(i), this.#o = !1);
+  }
+  /**
+   * Commit a single cell value change.
+   */
+  #c(e, t, i, s) {
+    const n = t.field;
+    if (!b(n) || s[n] === i) return;
+    s[n] = i;
+    const r = !this.#t.has(e);
+    this.#t.add(e), this.#l();
+    const u = this.grid.findRenderedRowElement?.(e);
+    u && u.classList.add("changed"), this.emit("cell-commit", {
+      row: s,
+      field: n,
+      value: i,
+      rowIndex: e,
+      changedRows: this.changedRows,
+      changedRowIndices: this.changedRowIndices,
+      firstTimeForRow: r
+    });
+  }
+  /**
+   * Inject an editor into a cell.
+   */
+  #a(e, t, i, s, n, l) {
+    if (!i.editable || n.classList.contains("editing")) return;
+    const r = b(i.field) ? e[i.field] : void 0;
+    n.classList.add("editing"), this.#n.add(`${t}:${s}`);
+    const c = n.parentElement;
+    c && L(c);
+    let u = !1;
+    const a = (h) => {
+      u || this.#e === -1 || this.#c(t, i, h, e);
+    }, g = () => {
+      u = !0, b(i.field) && (e[i.field] = r);
+    }, o = document.createElement("div");
+    o.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(o), o.addEventListener("keydown", (h) => {
+      h.key === "Enter" && (h.stopPropagation(), h.preventDefault(), u = !0, this.#i(t, !1)), h.key === "Escape" && (h.stopPropagation(), h.preventDefault(), g(), this.#i(t, !0));
+    });
+    const p = i, v = p.__editorTemplate, d = p.editor || (v ? "template" : k(i)), m = r;
+    if (d === "template" && v)
+      this.#h(o, p, e, r, a, g, l, t);
+    else if (typeof d == "string") {
+      const h = document.createElement(d);
+      h.value = m, h.addEventListener("change", () => a(h.value)), o.appendChild(h), l || queueMicrotask(() => {
+        o.querySelector(w)?.focus({ preventScroll: !0 });
+      });
+    } else if (typeof d == "function") {
+      const h = { row: e, value: m, field: i.field, column: i, commit: a, cancel: g }, E = d(h);
+      typeof E == "string" ? (o.innerHTML = E, A(o, i, a)) : E instanceof Node && o.appendChild(E), l || queueMicrotask(() => {
+        o.querySelector(w)?.focus({ preventScroll: !0 });
+      });
+    } else if (d && typeof d == "object") {
+      const h = this.grid, E = document.createElement("div");
+      E.setAttribute("data-external-editor", ""), E.setAttribute("data-field", i.field), o.appendChild(E);
+      const y = { row: e, value: m, field: i.field, column: i, commit: a, cancel: g };
+      if (d.mount)
+        try {
+          d.mount({ placeholder: E, context: y, spec: d });
+        } catch (C) {
+          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, C);
+        }
+      else
+        h.dispatchEvent(
+          new CustomEvent("mount-external-editor", { detail: { placeholder: E, spec: d, context: y } })
+        );
+    }
+  }
+  /**
+   * Render a template-based editor.
+   */
+  #h(e, t, i, s, n, l, r, c) {
+    const u = t.__editorTemplate;
+    if (!u) return;
+    const a = u.cloneNode(!0), g = t.__compiledEditor;
+    g ? a.innerHTML = g({
+      row: i,
+      value: s,
+      field: t.field,
+      column: t,
+      commit: n,
+      cancel: l
+    }) : a.querySelectorAll("*").forEach((p) => {
+      p.childNodes.length === 1 && p.firstChild?.nodeType === Node.TEXT_NODE && (p.textContent = p.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (v, d) => {
+        if (!b(d)) return "";
+        const m = i[d];
+        return m == null ? "" : String(m);
+      }) || "");
+    });
+    const o = a.querySelector(
+      "input,textarea,select"
+    );
+    if (o) {
+      o instanceof HTMLInputElement && o.type === "checkbox" ? o.checked = !!s : o.value = String(s ?? "");
+      let p = !1;
+      o.addEventListener("blur", () => {
+        if (p) return;
+        const v = o instanceof HTMLInputElement && o.type === "checkbox" ? o.checked : o.value;
+        n(v);
+      }), o.addEventListener("keydown", (v) => {
+        const d = v;
+        if (d.key === "Enter") {
+          d.stopPropagation(), d.preventDefault(), p = !0;
+          const m = o instanceof HTMLInputElement && o.type === "checkbox" ? o.checked : o.value;
+          n(m), this.#i(c, !1);
+        }
+        d.key === "Escape" && (d.stopPropagation(), d.preventDefault(), l(), this.#i(c, !0));
+      }), o instanceof HTMLInputElement && o.type === "checkbox" && o.addEventListener("change", () => n(o.checked)), r || setTimeout(() => o.focus({ preventScroll: !0 }), 0);
+    }
+    e.appendChild(a);
+  }
+  /**
+   * Restore focus to cell after exiting edit mode.
+   */
+  #u(e) {
+    queueMicrotask(() => {
+      try {
+        const t = e._focusRow, i = e._focusCol, s = e.findRenderedRowElement?.(t);
+        if (s) {
+          Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
+            (l) => l.classList.remove("cell-focus")
+          );
+          const n = s.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);
+          n && (n.classList.add("cell-focus"), n.setAttribute("aria-selected", "true"), n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1"), n.focus({ preventScroll: !0 }));
+        }
+      } catch {
+      }
+    });
+  }
+  // #endregion
+}
+export {
+  q as EditingPlugin,
+  w as FOCUSABLE_EDITOR_SELECTOR,
+  S as clearEditingState,
+  k as defaultEditorFor,
+  T as hasEditingCells
+};
+//# sourceMappingURL=index.js.map