@toolbox-web/grid 0.4.1 → 0.5.0

package/lib/plugins/editing/index.js

@@ -1,4 +1,4 @@
-const R = {
+const _ = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const R = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class _ {
+class S {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -25,8 +25,11 @@ class _ {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,12 +116,28 @@ class _ {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, t) {
+    const i = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class _ {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -184,8 +227,53 @@ class _ {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...R, ...e };
+    return { ..._, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.gridElement;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
+      if (!isNaN(i)) return i;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -215,8 +303,9 @@ class _ {
   }
   // #endregion
 }
-function k(f) {
-  switch (f.type) {
+const L = "@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px}tbw-grid .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}}";
+function k(l) {
+  switch (l.type) {
     case "number":
       return (e) => {
         const t = document.createElement("input");
@@ -243,19 +332,19 @@ function k(f) {
         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 a = document.createElement("option");
+          a.value = String(r.value), a.textContent = r.label, (i.multi && Array.isArray(e.value) && e.value.includes(r.value) || !i.multi && e.value === r.value) && (a.selected = !0), t.appendChild(a);
         });
-        const l = () => {
+        const o = () => {
           if (i.multi) {
             const r = [];
-            Array.from(t.selectedOptions).forEach((c) => {
-              r.push(c.value);
+            Array.from(t.selectedOptions).forEach((a) => {
+              r.push(a.value);
             }), e.commit(r);
           } else
             e.commit(t.value);
         };
-        return t.addEventListener("change", l), t.addEventListener("blur", l), t.addEventListener("keydown", (r) => {
+        return t.addEventListener("change", o), t.addEventListener("blur", o), t.addEventListener("keydown", (r) => {
           r.key === "Escape" && e.cancel();
         }), t;
       };
@@ -268,31 +357,32 @@ function k(f) {
       };
   }
 }
-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");
+const C = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
+function w(l) {
+  return !(typeof l != "string" || l === "__proto__" || l === "constructor" || l === "prototype");
+}
+function O(l) {
+  return (l.__editingCellCount ?? 0) > 0;
 }
-function T(f) {
-  return (f.__editingCellCount ?? 0) > 0;
+function A(l) {
+  const e = (l.__editingCellCount ?? 0) + 1;
+  l.__editingCellCount = e, l.setAttribute("data-has-editing", "");
 }
-function L(f) {
-  const e = (f.__editingCellCount ?? 0) + 1;
-  f.__editingCellCount = e, f.setAttribute("data-has-editing", "");
+function q(l) {
+  l.__editingCellCount = 0, l.removeAttribute("data-has-editing");
 }
-function S(f) {
-  f.__editingCellCount = 0, f.removeAttribute("data-has-editing");
+function v(l, e) {
+  return l instanceof HTMLInputElement ? l.type === "checkbox" ? l.checked : l.type === "number" ? l.value === "" ? null : Number(l.value) : l.type === "date" ? l.valueAsDate : l.value : e?.type === "number" && l.value !== "" ? Number(l.value) : l.value;
 }
-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()));
+function T(l, e, t) {
+  const i = l.querySelector("input,textarea,select");
+  i && (i.addEventListener("blur", () => {
+    t(v(i, e));
+  }), i instanceof HTMLInputElement && i.type === "checkbox" ? i.addEventListener("change", () => t(i.checked)) : i instanceof HTMLSelectElement && i.addEventListener("change", () => t(v(i, e))));
 }
-class q extends _ {
+class N extends S {
   name = "editing";
-  version = "1.0.0";
+  styles = L;
   get defaultConfig() {
     return {
       editOn: "click"
@@ -344,15 +434,6 @@ class q extends _ {
     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.
@@ -377,12 +458,12 @@ class q extends _ {
     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 n = t._visibleColumns[s], o = t._rows[i];
+        if (n?.editable && n.type === "boolean" && o) {
           const r = n.field;
-          if (b(r)) {
-            const u = !l[r];
-            return this.#c(i, n, u, l), e.preventDefault(), this.requestRender(), !0;
+          if (w(r)) {
+            const f = !o[r];
+            return this.#a(i, n, f, o), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -394,7 +475,7 @@ class q extends _ {
       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 s >= 0 && t._columns?.some((o) => o.editable) ? (this.beginBulkEdit(s), !0) : !1;
     }
     return !1;
   }
@@ -409,12 +490,12 @@ class q extends _ {
     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);
+        const [i, s] = t.split(":"), n = parseInt(i, 10), o = 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);
+        const a = r.querySelector(`.cell[data-col="${o}"]`);
+        if (!a || a.classList.contains("editing")) continue;
+        const f = e._rows[n], d = e._visibleColumns[o];
+        f && d && this.#c(f, n, d, o, a, !0);
       }
   }
   /**
@@ -479,7 +560,7 @@ class q extends _ {
    * Programmatically begin editing a cell.
    */
   beginCellEdit(e, t) {
-    const i = this.grid, s = i._visibleColumns.findIndex((c) => c.field === t);
+    const i = this.grid, s = i._visibleColumns.findIndex((a) => a.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);
@@ -492,19 +573,19 @@ class q extends _ {
     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);
+    const o = t._rows[e];
+    this.#d(e, o), Array.from(n.children).forEach((r, a) => {
+      const f = t._visibleColumns[a];
+      if (f?.editable) {
+        const d = r;
+        d.classList.contains("editing") || this.#c(o, e, f, a, d, !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);
+        const a = r.querySelector(C);
         try {
-          c?.focus({ preventScroll: !0 });
+          a?.focus({ preventScroll: !0 });
         } catch {
         }
       }
@@ -528,8 +609,8 @@ class q extends _ {
    * 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));
+    const s = this.grid, n = s._rows[e], o = s._visibleColumns[t];
+    !n || !o?.editable || i.classList.contains("editing") || (this.#e !== e && this.#d(e, n), this.#r = t, this.#c(n, e, o, t, i, !1));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
@@ -549,16 +630,16 @@ class q extends _ {
    */
   #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);
+    const i = this.grid, s = this.#s.get(e), n = i._rows[e], o = i.findRenderedRowElement?.(e);
+    if (!t && o && n && o.querySelectorAll(".cell.editing").forEach((a) => {
+      const f = Number(a.getAttribute("data-col"));
+      if (isNaN(f)) return;
+      const d = i._visibleColumns[f];
+      if (!d) return;
+      const b = a.querySelector("input,textarea,select");
+      if (b) {
+        const c = v(b, d);
+        n[d.field] !== c && this.#a(e, d, c, n);
       }
     }), t && s && n)
       Object.keys(s).forEach((r) => {
@@ -577,119 +658,115 @@ class q extends _ {
     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);
+    o && (o.querySelectorAll(".cell.editing").forEach((r) => {
+      r.classList.remove("editing"), q(r.parentElement);
+    }), this.requestRender()), this.#o = !0, o || (this.#u(i), this.#o = !1);
   }
   /**
    * Commit a single cell value change.
    */
-  #c(e, t, i, s) {
+  #a(e, t, i, s) {
     const n = t.field;
-    if (!b(n) || s[n] === i) return;
-    s[n] = i;
+    if (!w(n)) return;
+    const o = s[n];
+    if (o === i) return;
     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", {
+    if (this.emitCancelable("cell-commit", {
       row: s,
       field: n,
+      oldValue: o,
       value: i,
       rowIndex: e,
       changedRows: this.changedRows,
       changedRowIndices: this.changedRowIndices,
       firstTimeForRow: r
-    });
+    })) return;
+    s[n] = i, this.#t.add(e), this.#l();
+    const d = this.grid.findRenderedRowElement?.(e);
+    d && d.classList.add("changed");
   }
   /**
    * Inject an editor into a cell.
    */
-  #a(e, t, i, s, n, l) {
+  #c(e, t, i, s, n, o) {
     if (!i.editable || n.classList.contains("editing")) return;
-    const r = b(i.field) ? e[i.field] : void 0;
+    const r = w(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 a = n.parentElement;
+    a && A(a);
+    let f = !1;
+    const d = (h) => {
+      f || this.#e === -1 || this.#a(t, i, h, e);
+    }, b = () => {
+      f = !0, w(i.field) && (e[i.field] = r);
+    }, c = document.createElement("div");
+    c.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(c), c.addEventListener("keydown", (h) => {
+      h.key === "Enter" && (h.stopPropagation(), h.preventDefault(), f = !0, this.#i(t, !1)), h.key === "Escape" && (h.stopPropagation(), h.preventDefault(), b(), 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 });
+    const g = i, E = g.__editorTemplate, u = g.editor || (E ? "template" : k(i)), m = r;
+    if (u === "template" && E)
+      this.#h(c, g, e, r, d, b, o, t);
+    else if (typeof u == "string") {
+      const h = document.createElement(u);
+      h.value = m, h.addEventListener("change", () => d(h.value)), c.appendChild(h), o || queueMicrotask(() => {
+        c.querySelector(C)?.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 (typeof u == "function") {
+      const h = { row: e, value: m, field: i.field, column: i, commit: d, cancel: b }, p = u(h);
+      typeof p == "string" ? (c.innerHTML = p, T(c, i, d)) : p instanceof Node && c.appendChild(p), o || queueMicrotask(() => {
+        c.querySelector(C)?.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)
+    } else if (u && typeof u == "object") {
+      const h = this.grid, p = document.createElement("div");
+      p.setAttribute("data-external-editor", ""), p.setAttribute("data-field", i.field), c.appendChild(p);
+      const y = { row: e, value: m, field: i.field, column: i, commit: d, cancel: b };
+      if (u.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);
+          u.mount({ placeholder: p, context: y, spec: u });
+        } catch (R) {
+          console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, R);
         }
       else
         h.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: E, spec: d, context: y } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: p, spec: u, 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({
+  #h(e, t, i, s, n, o, r, a) {
+    const f = t.__editorTemplate;
+    if (!f) return;
+    const d = f.cloneNode(!0), b = t.__compiledEditor;
+    b ? d.innerHTML = b({
       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];
+      cancel: o
+    }) : d.querySelectorAll("*").forEach((g) => {
+      g.childNodes.length === 1 && g.firstChild?.nodeType === Node.TEXT_NODE && (g.textContent = g.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (E, u) => {
+        if (!w(u)) return "";
+        const m = i[u];
         return m == null ? "" : String(m);
       }) || "");
     });
-    const o = a.querySelector(
+    const c = d.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);
+    if (c) {
+      c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : c.value = String(s ?? "");
+      let g = !1;
+      c.addEventListener("blur", () => {
+        g || n(v(c, t));
+      }), c.addEventListener("keydown", (E) => {
+        const u = E;
+        u.key === "Enter" && (u.stopPropagation(), u.preventDefault(), g = !0, n(v(c, t)), this.#i(a, !1)), u.key === "Escape" && (u.stopPropagation(), u.preventDefault(), o(), this.#i(a, !0));
+      }), c instanceof HTMLInputElement && c.type === "checkbox" && c.addEventListener("change", () => n(c.checked)), r || setTimeout(() => c.focus({ preventScroll: !0 }), 0);
     }
-    e.appendChild(a);
+    e.appendChild(d);
   }
   /**
    * Restore focus to cell after exiting edit mode.
@@ -700,7 +777,7 @@ class q extends _ {
         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")
+            (o) => o.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 }));
@@ -712,10 +789,10 @@ class q extends _ {
   // #endregion
 }
 export {
-  q as EditingPlugin,
-  w as FOCUSABLE_EDITOR_SELECTOR,
-  S as clearEditingState,
+  N as EditingPlugin,
+  C as FOCUSABLE_EDITOR_SELECTOR,
+  q as clearEditingState,
   k as defaultEditorFor,
-  T as hasEditingCells
+  O as hasEditingCells
 };
 //# sourceMappingURL=index.js.map