@toolbox-web/grid 1.10.1 → 1.11.0

package/lib/plugins/editing/index.js

@@ -1,4 +1,59 @@
-const S = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', L = {
+function k(s) {
+  s && s.querySelectorAll(".cell-focus").forEach((e) => e.classList.remove("cell-focus"));
+}
+const I = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])', T = document.createElement("template");
+T.innerHTML = '<div class="cell" role="gridcell" part="cell"></div>';
+const q = document.createElement("template");
+q.innerHTML = '<div class="data-grid-row" role="row" part="row"></div>';
+function S(s, e) {
+  if (s._virtualization?.enabled) {
+    const { rowHeight: l, container: o, viewportEl: a } = s._virtualization, c = o, d = a?.clientHeight ?? c?.clientHeight ?? 0;
+    if (c && d > 0) {
+      const f = s._focusRow * l;
+      f < c.scrollTop ? c.scrollTop = f : f + l > c.scrollTop + d && (c.scrollTop = f - d + l);
+    }
+  }
+  const t = s._activeEditRows !== void 0 && s._activeEditRows !== -1;
+  t || s.refreshVirtualWindow(!1), k(s._bodyEl), Array.from(s._bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((l) => {
+    l.setAttribute("aria-selected", "false");
+  });
+  const i = s._focusRow, r = s._virtualization.start ?? 0, n = s._virtualization.end ?? s._rows.length;
+  if (i >= r && i < n) {
+    const l = s._bodyEl.querySelectorAll(".data-grid-row")[i - r];
+    let o = l?.children[s._focusCol];
+    if ((!o || !o.classList?.contains("cell")) && (o = l?.querySelector(`.cell[data-col="${s._focusCol}"]`) ?? l?.querySelector(".cell[data-col]")), o) {
+      o.classList.add("cell-focus"), o.setAttribute("aria-selected", "true");
+      const a = s.querySelector(".tbw-scroll-area");
+      if (a && o && (!t || e?.forceHorizontalScroll))
+        if (e?.forceScrollLeft)
+          a.scrollLeft = 0;
+        else if (e?.forceScrollRight)
+          a.scrollLeft = a.scrollWidth - a.clientWidth;
+        else {
+          const c = s._getHorizontalScrollOffsets?.(l ?? void 0, o) ?? { left: 0, right: 0 };
+          if (!c.skipScroll) {
+            const d = o.getBoundingClientRect(), f = a.getBoundingClientRect(), u = d.left - f.left + a.scrollLeft, m = u + d.width, p = a.scrollLeft + c.left, g = a.scrollLeft + a.clientWidth - c.right;
+            u < p ? a.scrollLeft = u - c.left : m > g && (a.scrollLeft = m - a.clientWidth + c.right);
+          }
+        }
+      if (s._activeEditRows !== void 0 && s._activeEditRows !== -1 && o.classList.contains("editing")) {
+        const c = o.querySelector(I);
+        if (c && document.activeElement !== c)
+          try {
+            c.focus({ preventScroll: !0 });
+          } catch {
+          }
+      } else if (!o.contains(document.activeElement)) {
+        o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1");
+        try {
+          o.focus({ preventScroll: !0 });
+        } catch {
+        }
+      }
+    }
+  }
+}
+const L = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', P = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,11 +62,11 @@ const S = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: S,
-  filterActive: S,
+  filter: L,
+  filterActive: L,
   print: "🖨️"
 };
-class I {
+class O {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -301,7 +356,7 @@ class I {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...L, ...e };
+    return { ...P, ...e };
   }
   // #region Animation Helpers
   /**
@@ -377,12 +432,12 @@ class I {
   }
   // #endregion
 }
-const A = "@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-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}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}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";
-function P(s) {
+const D = "@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-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}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}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";
+function M(s) {
   const e = s.options;
   return e ? typeof e == "function" ? e() : e : [];
 }
-function T(s) {
+function x(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("input");
     i.type = "number", i.value = e.value != null ? String(e.value) : "", t?.min !== void 0 && (i.min = String(t.min)), t?.max !== void 0 && (i.max = String(t.max)), t?.step !== void 0 && (i.step = String(t.step)), t?.placeholder && (i.placeholder = t.placeholder);
@@ -392,13 +447,13 @@ function T(s) {
     }), i;
   };
 }
-function q() {
+function B() {
   return (s) => {
     const e = document.createElement("input");
     return e.type = "checkbox", e.checked = !!s.value, e.addEventListener("change", () => s.commit(e.checked)), e;
   };
 }
-function O(s) {
+function H(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("input");
     i.type = "date", e.value instanceof Date ? i.valueAsDate = e.value : typeof e.value == "string" && e.value && (i.value = e.value.split("T")[0]), t?.min && (i.min = t.min), t?.max && (i.max = t.max), t?.placeholder && (i.placeholder = t.placeholder);
@@ -410,30 +465,30 @@ function O(s) {
     }), i;
   };
 }
-function D(s) {
+function N(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("select");
     if (s.multi && (i.multiple = !0), t?.includeEmpty) {
-      const o = document.createElement("option");
-      o.value = "", o.textContent = t.emptyLabel ?? "", i.appendChild(o);
+      const l = document.createElement("option");
+      l.value = "", l.textContent = t.emptyLabel ?? "", i.appendChild(l);
     }
-    P(s).forEach((o) => {
-      const a = document.createElement("option");
-      a.value = String(o.value), a.textContent = o.label, (s.multi && Array.isArray(e.value) && e.value.includes(o.value) || !s.multi && e.value === o.value) && (a.selected = !0), i.appendChild(a);
+    M(s).forEach((l) => {
+      const o = document.createElement("option");
+      o.value = String(l.value), o.textContent = l.label, (s.multi && Array.isArray(e.value) && e.value.includes(l.value) || !s.multi && e.value === l.value) && (o.selected = !0), i.appendChild(o);
     });
     const n = () => {
       if (s.multi) {
-        const o = Array.from(i.selectedOptions).map((a) => a.value);
-        e.commit(o);
+        const l = Array.from(i.selectedOptions).map((o) => o.value);
+        e.commit(l);
       } else
         e.commit(i.value);
     };
-    return i.addEventListener("change", n), i.addEventListener("blur", n), i.addEventListener("keydown", (o) => {
-      o.key === "Escape" && e.cancel();
+    return i.addEventListener("change", n), i.addEventListener("blur", n), i.addEventListener("keydown", (l) => {
+      l.key === "Escape" && e.cancel();
     }), i;
   };
 }
-function M(s) {
+function z(s) {
   return (e) => {
     const t = s.editorParams, i = document.createElement("input");
     i.type = "text", i.value = e.value != null ? String(e.value) : "", t?.maxLength !== void 0 && (i.maxLength = t.maxLength), t?.pattern && (i.pattern = t.pattern), t?.placeholder && (i.placeholder = t.placeholder);
@@ -446,21 +501,21 @@ function M(s) {
     }), i;
   };
 }
-function N(s) {
+function $(s) {
   switch (s.type) {
     case "number":
-      return T(s);
+      return x(s);
     case "boolean":
-      return q();
+      return B();
     case "date":
-      return O(s);
+      return H(s);
     case "select":
-      return D(s);
+      return N(s);
     default:
-      return M(s);
+      return z(s);
   }
 }
-const R = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
+const C = 'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])';
 function G(s, e) {
   if (e.editor) return e.editor;
   if (e.__editorTemplate) return "template";
@@ -475,28 +530,28 @@ function G(s, e) {
       return n.editor;
   }
 }
-function w(s) {
+function E(s) {
   return !(typeof s != "string" || s === "__proto__" || s === "constructor" || s === "prototype");
 }
-function H(s) {
+function F(s) {
   const e = (s.__editingCellCount ?? 0) + 1;
   s.__editingCellCount = e, s.setAttribute("data-has-editing", "");
 }
-function x(s) {
+function j(s) {
   s.__editingCellCount = 0, s.removeAttribute("data-has-editing");
 }
-function E(s, e, t) {
-  return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? typeof t == "string" ? s.value : s.valueAsDate : typeof t == "number" ? s.value === "" ? null : Number(s.value) : s.value : e?.type === "number" && s.value !== "" || typeof t == "number" && s.value !== "" ? Number(s.value) : s.value;
+function y(s, e, t) {
+  return s instanceof HTMLInputElement ? s.type === "checkbox" ? s.checked : s.type === "number" ? s.value === "" ? null : Number(s.value) : s.type === "date" ? typeof t == "string" ? s.value : s.valueAsDate : typeof t == "number" ? s.value === "" ? null : Number(s.value) : t == null && s.value === "" ? t : s.value : e?.type === "number" && s.value !== "" || typeof t == "number" && s.value !== "" ? Number(s.value) : t == null && s.value === "" ? t : s.value;
 }
-function k(s) {
+function A(s) {
 }
-function $(s, e, t, i) {
+function W(s, e, t, i) {
   const r = s.querySelector("input,textarea,select");
   r && (r.addEventListener("blur", () => {
-    t(E(r, e, i));
-  }), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(E(r, e, i))));
+    t(y(r, e, i));
+  }), r instanceof HTMLInputElement && r.type === "checkbox" ? r.addEventListener("change", () => t(r.checked)) : r instanceof HTMLSelectElement && r.addEventListener("change", () => t(y(r, e, i))));
 }
-class z extends I {
+class K extends O {
   /**
    * Plugin manifest - declares owned properties for configuration validation.
    * @internal
@@ -536,7 +591,7 @@ class z extends I {
   /** @internal */
   name = "editing";
   /** @internal */
-  styles = A;
+  styles = D;
   /** @internal */
   get defaultConfig() {
     return {
@@ -555,9 +610,9 @@ class z extends I {
   /** Set of cells currently in edit mode: "rowIndex:colIndex" */
   #r = /* @__PURE__ */ new Set();
   /** Flag to restore focus after next render (used when exiting edit mode) */
-  #a = !1;
+  #l = !1;
   /** Row index pending animation after render, or -1 if none */
-  #l = -1;
+  #a = -1;
   /**
    * Invalid cell tracking: Map<rowId, Map<field, message>>
    * Used for validation feedback without canceling edits.
@@ -580,7 +635,11 @@ class z extends I {
     }, document.addEventListener(
       "keydown",
       (r) => {
-        r.key === "Escape" && this.#e !== -1 && this.#n(this.#e, !0);
+        if (r.key === "Escape" && this.#e !== -1) {
+          if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1)
+            return;
+          this.#n(this.#e, !0);
+        }
       },
       { capture: !0, signal: t }
     ), document.addEventListener(
@@ -588,7 +647,7 @@ class z extends I {
       (r) => {
         if (this.#e === -1) return;
         const n = i.findRenderedRowElement?.(this.#e);
-        !n || (r.composedPath && r.composedPath() || []).includes(n) || queueMicrotask(() => {
+        !n || (r.composedPath && r.composedPath() || []).includes(n) || this.config.onBeforeEditClose && this.config.onBeforeEditClose(r) === !1 || queueMicrotask(() => {
           this.#e !== -1 && this.#n(this.#e, !1);
         });
       },
@@ -621,7 +680,7 @@ class z extends I {
     const r = e.originalEvent.type === "dblclick";
     if (i === "click" && r || i === "dblclick" && !r) return !1;
     const { rowIndex: n } = e;
-    return t._columns?.some((a) => a.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
+    return t._columns?.some((o) => o.editable) ? (e.originalEvent.stopPropagation(), this.beginBulkEdit(n), !0) : !1;
   }
   /**
    * Handle keyboard events for edit lifecycle.
@@ -630,16 +689,29 @@ class z extends I {
   onKeyDown(e) {
     const t = this.grid;
     if (e.key === "Escape" && this.#e !== -1)
-      return this.#n(this.#e, !0), !0;
+      return this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1 || this.#n(this.#e, !0), !0;
+    if ((e.key === "ArrowUp" || e.key === "ArrowDown") && this.#e !== -1) {
+      if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1)
+        return !0;
+      const i = t._rows.length - 1, r = this.#e;
+      return this.#n(r, !1), e.key === "ArrowDown" ? t._focusRow = Math.min(i, t._focusRow + 1) : t._focusRow = Math.max(0, t._focusRow - 1), e.preventDefault(), S(t), this.requestAfterRender(), !0;
+    }
+    if (e.key === "Tab" && this.#e !== -1) {
+      e.preventDefault();
+      const i = !e.shiftKey;
+      return this.#m(i), !0;
+    }
     if (e.key === " " || e.key === "Spacebar") {
+      if (this.#e !== -1)
+        return !1;
       const i = t._focusRow, r = t._focusCol;
       if (i >= 0 && r >= 0) {
-        const n = t._visibleColumns[r], o = t._rows[i];
-        if (n?.editable && n.type === "boolean" && o) {
-          const a = n.field;
-          if (w(a)) {
-            const d = !o[a];
-            return this.#u(i, n, d, o), e.preventDefault(), this.requestRender(), !0;
+        const n = t._visibleColumns[r], l = t._rows[i];
+        if (n?.editable && n.type === "boolean" && l) {
+          const o = n.field;
+          if (E(o)) {
+            const c = !l[o];
+            return this.#u(i, n, c, l), e.preventDefault(), this.requestRender(), !0;
           }
         }
       }
@@ -647,21 +719,21 @@ class z extends I {
     }
     if (e.key === "Enter" && !e.shiftKey) {
       if (this.#e !== -1)
-        return !1;
+        return !!(this.config.onBeforeEditClose && this.config.onBeforeEditClose(e) === !1);
       const i = this.config.editOn ?? t.effectiveConfig?.editOn;
       if (i === !1 || i === "manual") return !1;
       const r = t._focusRow, n = t._focusCol;
-      if (r >= 0 && t._columns?.some((a) => a.editable)) {
-        const a = t._visibleColumns[n], l = t._rows[r], d = a?.field ?? "", c = d && l ? l[d] : void 0, p = this.gridElement.querySelector(`[data-row="${r}"][data-col="${n}"]`), u = new CustomEvent("cell-activate", {
+      if (r >= 0 && t._columns?.some((o) => o.editable)) {
+        const o = t._visibleColumns[n], a = t._rows[r], c = o?.field ?? "", d = c && a ? a[c] : void 0, f = this.gridElement.querySelector(`[data-row="${r}"][data-col="${n}"]`), u = new CustomEvent("cell-activate", {
           cancelable: !0,
           bubbles: !0,
           detail: {
             rowIndex: r,
             colIndex: n,
-            field: d,
-            value: c,
-            row: l,
-            cellEl: p,
+            field: c,
+            value: d,
+            row: a,
+            cellEl: f,
             trigger: "keyboard",
             originalEvent: e
           }
@@ -689,14 +761,14 @@ class z extends I {
     const t = this.grid, i = t.effectiveConfig?.typeDefaults, r = t.__frameworkAdapter;
     return !i && !r?.getTypeDefault ? e : e.map((n) => {
       if (!n.type) return n;
-      let o;
-      if (i?.[n.type]?.editorParams && (o = i[n.type].editorParams), !o && r?.getTypeDefault) {
-        const a = r.getTypeDefault(n.type);
-        a?.editorParams && (o = a.editorParams);
+      let l;
+      if (i?.[n.type]?.editorParams && (l = i[n.type].editorParams), !l && r?.getTypeDefault) {
+        const o = r.getTypeDefault(n.type);
+        o?.editorParams && (l = o.editorParams);
       }
-      return o ? {
+      return l ? {
         ...n,
-        editorParams: { ...o, ...n.editorParams }
+        editorParams: { ...l, ...n.editorParams }
       } : n;
     });
   }
@@ -708,18 +780,18 @@ class z extends I {
    */
   afterRender() {
     const e = this.grid;
-    if (this.#a && (this.#a = !1, this.#g(e)), this.#l !== -1) {
-      const t = this.#l;
-      this.#l = -1, e.animateRow?.(t, "change");
+    if (this.#l && (this.#l = !1, this.#g(e)), this.#a !== -1) {
+      const t = this.#a;
+      this.#a = -1, e.animateRow?.(t, "change");
     }
     if (this.#r.size !== 0)
       for (const t of this.#r) {
-        const [i, r] = t.split(":"), n = parseInt(i, 10), o = parseInt(r, 10), a = e.findRenderedRowElement?.(n);
-        if (!a) continue;
-        const l = a.querySelector(`.cell[data-col="${o}"]`);
-        if (!l || l.classList.contains("editing")) continue;
-        const d = e._rows[n], c = e._visibleColumns[o];
-        d && c && this.#f(d, n, c, o, l, !0);
+        const [i, r] = t.split(":"), n = parseInt(i, 10), l = parseInt(r, 10), o = e.findRenderedRowElement?.(n);
+        if (!o) continue;
+        const a = o.querySelector(`.cell[data-col="${l}"]`);
+        if (!a || a.classList.contains("editing")) continue;
+        const c = e._rows[n], d = e._visibleColumns[l];
+        c && d && this.#f(c, n, d, l, a, !0);
       }
   }
   /**
@@ -818,7 +890,7 @@ class z extends I {
    */
   setInvalid(e, t, i = "") {
     let r = this.#t.get(e);
-    r || (r = /* @__PURE__ */ new Map(), this.#t.set(e, r)), r.set(t, i), this.#d(e, t, !0);
+    r || (r = /* @__PURE__ */ new Map(), this.#t.set(e, r)), r.set(t, i), this.#c(e, t, !0);
   }
   /**
    * Clear the invalid state for a specific cell.
@@ -828,7 +900,7 @@ class z extends I {
    */
   clearInvalid(e, t) {
     const i = this.#t.get(e);
-    i && (i.delete(t), i.size === 0 && this.#t.delete(e)), this.#d(e, t, !1);
+    i && (i.delete(t), i.size === 0 && this.#t.delete(e)), this.#c(e, t, !1);
   }
   /**
    * Clear all invalid cells for a specific row.
@@ -839,7 +911,7 @@ class z extends I {
     const t = this.#t.get(e);
     if (t) {
       const i = Array.from(t.keys());
-      this.#t.delete(e), i.forEach((r) => this.#d(e, r, !1));
+      this.#t.delete(e), i.forEach((r) => this.#c(e, r, !1));
     }
   }
   /**
@@ -848,7 +920,7 @@ class z extends I {
   clearAllInvalid() {
     const e = Array.from(this.#t.entries());
     this.#t.clear(), e.forEach(([t, i]) => {
-      i.forEach((r, n) => this.#d(t, n, !1));
+      i.forEach((r, n) => this.#c(t, n, !1));
     });
   }
   /**
@@ -893,25 +965,25 @@ class z extends I {
   /**
    * Sync the data-invalid attribute on a cell element.
    */
-  #d(e, t, i) {
-    const r = this.grid, n = r._visibleColumns?.findIndex((c) => c.field === t);
+  #c(e, t, i) {
+    const r = this.grid, n = r._visibleColumns?.findIndex((d) => d.field === t);
     if (n === -1 || n === void 0) return;
-    const a = r._rows?.findIndex((c) => {
+    const o = r._rows?.findIndex((d) => {
       try {
-        return r.getRowId?.(c) === e;
+        return r.getRowId?.(d) === e;
       } catch {
         return !1;
       }
     });
-    if (a === -1 || a === void 0) return;
-    const d = r.findRenderedRowElement?.(a)?.querySelector(`.cell[data-col="${n}"]`);
-    if (d)
+    if (o === -1 || o === void 0) return;
+    const c = r.findRenderedRowElement?.(o)?.querySelector(`.cell[data-col="${n}"]`);
+    if (c)
       if (i) {
-        d.setAttribute("data-invalid", "true");
-        const c = this.#t.get(e)?.get(t);
-        c && d.setAttribute("title", c);
+        c.setAttribute("data-invalid", "true");
+        const d = this.#t.get(e)?.get(t);
+        d && c.setAttribute("title", d);
       } else
-        d.removeAttribute("data-invalid"), d.removeAttribute("title");
+        c.removeAttribute("data-invalid"), c.removeAttribute("title");
   }
   // #endregion
   /**
@@ -921,7 +993,7 @@ class z extends I {
    */
   resetChangedRows(e) {
     const t = this.changedRows, i = this.changedRowIds;
-    this.#i.clear(), this.#c(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
+    this.#i.clear(), this.#d(), e || this.emit("changed-rows-reset", { rows: t, ids: i }), this.grid._rowPool?.forEach((n) => n.classList.remove("changed"));
   }
   /**
    * Programmatically begin editing a cell.
@@ -930,10 +1002,10 @@ class z extends I {
    * @fires cell-commit - Emitted when the cell value is committed (on blur or Enter)
    */
   beginCellEdit(e, t) {
-    const i = this.grid, r = i._visibleColumns.findIndex((l) => l.field === t);
+    const i = this.grid, r = i._visibleColumns.findIndex((a) => a.field === t);
     if (r === -1 || !i._visibleColumns[r]?.editable) return;
-    const a = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
-    a && this.#p(e, r, a);
+    const o = i.findRenderedRowElement?.(e)?.querySelector(`.cell[data-col="${r}"]`);
+    o && this.#p(e, r, o);
   }
   /**
    * Programmatically begin editing all editable cells in a row.
@@ -943,22 +1015,22 @@ class z extends I {
    */
   beginBulkEdit(e) {
     const t = this.grid;
-    if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((a) => a.editable)) return;
+    if ((this.config.editOn ?? t.effectiveConfig?.editOn) === !1 || !t._columns?.some((o) => o.editable)) return;
     const n = t.findRenderedRowElement?.(e);
     if (!n) return;
-    const o = t._rows[e];
-    this.#h(e, o), Array.from(n.children).forEach((a, l) => {
-      const d = t._visibleColumns[l];
-      if (d?.editable) {
-        const c = a;
-        c.classList.contains("editing") || this.#f(o, e, d, l, c, !0);
+    const l = t._rows[e];
+    this.#h(e, l), Array.from(n.children).forEach((o, a) => {
+      const c = t._visibleColumns[a];
+      if (c?.editable) {
+        const d = o;
+        d.classList.contains("editing") || this.#f(l, e, c, a, d, !0);
       }
     }), setTimeout(() => {
-      let a = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
-      if (a?.classList.contains("editing") || (a = n.querySelector(".cell.editing")), a?.classList.contains("editing")) {
-        const l = a.querySelector(R);
+      let o = n.querySelector(`.cell[data-col="${t._focusCol}"]`);
+      if (o?.classList.contains("editing") || (o = n.querySelector(".cell.editing")), o?.classList.contains("editing")) {
+        const a = o.querySelector(C);
         try {
-          l?.focus({ preventScroll: !0 });
+          a?.focus({ preventScroll: !0 });
         } catch {
         }
       }
@@ -983,13 +1055,31 @@ class z extends I {
    * Begin editing a single cell.
    */
   #p(e, t, i) {
-    const r = this.grid, n = r._rows[e], o = r._visibleColumns[t];
-    !n || !o?.editable || i.classList.contains("editing") || (this.#e !== e && this.#h(e, n), this.#o = t, this.#f(n, e, o, t, i, !1));
+    const r = this.grid, n = r._rows[e], l = r._visibleColumns[t];
+    !n || !l?.editable || i.classList.contains("editing") || (this.#e !== e && this.#h(e, n), this.#o = t, this.#f(n, e, l, t, i, !1));
+  }
+  /**
+   * Handle Tab/Shift+Tab navigation while editing.
+   * Moves to next/previous editable cell, staying in edit mode.
+   * Wraps to next/previous row when reaching row boundaries.
+   */
+  #m(e) {
+    const t = this.grid, i = t._rows, r = this.#e, n = t._visibleColumns.map((c, d) => c.editable ? d : -1).filter((c) => c >= 0);
+    if (n.length === 0) return;
+    const o = n.indexOf(t._focusCol) + (e ? 1 : -1);
+    if (o >= 0 && o < n.length) {
+      t._focusCol = n[o];
+      const d = t.findRenderedRowElement?.(r)?.querySelector(`.cell[data-col="${n[o]}"]`);
+      d?.classList.contains("editing") && d.querySelector(C)?.focus({ preventScroll: !0 }), S(t, { forceHorizontalScroll: !0 });
+      return;
+    }
+    const a = r + (e ? 1 : -1);
+    a >= 0 && a < i.length && (this.#n(r, !1), t._focusRow = a, t._focusCol = e ? n[0] : n[n.length - 1], this.beginBulkEdit(a), S(t, { forceHorizontalScroll: !0 }));
   }
   /**
    * Sync the internal grid state with the plugin's editing state.
    */
-  #c() {
+  #d() {
     const e = this.grid;
     e._activeEditRows = this.#e, e._rowEditSnapshots = this.#s;
   }
@@ -997,55 +1087,56 @@ class z extends I {
    * Snapshot original row data and mark as editing.
    */
   #h(e, t) {
-    this.#e !== e && (this.#s.set(e, { ...t }), this.#e = e, this.#c());
+    this.#e !== e && (this.#s.set(e, { ...t }), this.#e = e, this.#d());
   }
   /**
    * Exit editing for a row.
    */
   #n(e, t) {
     if (this.#e !== e) return;
-    const i = this.grid, r = this.#s.get(e), n = i._rows[e], o = i.findRenderedRowElement?.(e);
-    let a;
+    const i = this.grid, r = this.#s.get(e), n = i._rows[e], l = i.findRenderedRowElement?.(e);
+    let o;
     if (n)
       try {
-        a = i.getRowId?.(n);
+        o = i.getRowId?.(n);
       } catch {
       }
-    if (!t && o && n && o.querySelectorAll(".cell.editing").forEach((d) => {
-      const c = Number(d.getAttribute("data-col"));
-      if (isNaN(c)) return;
-      const p = i._visibleColumns[c];
-      if (!p) return;
-      const u = d.querySelector("input,textarea,select");
+    if (!t && l && n && l.querySelectorAll(".cell.editing").forEach((c) => {
+      const d = Number(c.getAttribute("data-col"));
+      if (isNaN(d)) return;
+      const f = i._visibleColumns[d];
+      if (!f || c.hasAttribute("data-editor-managed"))
+        return;
+      const u = c.querySelector("input,textarea,select");
       if (u) {
-        const m = p.field, h = n[m], g = E(u, p, h);
-        h !== g && this.#u(e, p, g, n);
+        const m = f.field, p = n[m], g = y(u, f, p);
+        p !== g && this.#u(e, f, g, n);
       }
     }), t && r && n)
-      Object.keys(r).forEach((l) => {
-        n[l] = r[l];
-      }), a && (this.#i.delete(a), this.clearRowInvalid(a));
+      Object.keys(r).forEach((a) => {
+        n[a] = r[a];
+      }), o && (this.#i.delete(o), this.clearRowInvalid(o));
     else if (!t && n) {
-      const l = this.#v(r, n), d = a ? this.#i.has(a) : l, c = this.emitCancelable("row-commit", {
+      const a = this.#b(r, n), c = o ? this.#i.has(o) : a, d = this.emitCancelable("row-commit", {
         rowIndex: e,
-        rowId: a ?? "",
+        rowId: o ?? "",
         row: n,
         oldValue: r,
         newValue: n,
-        changed: d,
+        changed: c,
         changedRows: this.changedRows,
         changedRowIds: this.changedRowIds
       });
-      c && r ? (Object.keys(r).forEach((p) => {
-        n[p] = r[p];
-      }), a && (this.#i.delete(a), this.clearRowInvalid(a))) : !c && l && this.isAnimationEnabled && (this.#l = e);
+      d && r ? (Object.keys(r).forEach((f) => {
+        n[f] = r[f];
+      }), o && (this.#i.delete(o), this.clearRowInvalid(o))) : !d && a && this.isAnimationEnabled && (this.#a = e);
     }
-    this.#s.delete(e), this.#e = -1, this.#o = -1, this.#c();
-    for (const l of this.#r)
-      l.startsWith(`${e}:`) && this.#r.delete(l);
-    o && (o.querySelectorAll(".cell.editing").forEach((l) => {
-      l.classList.remove("editing"), x(l.parentElement);
-    }), this.requestRender()), this.#a = !0, o || (this.#g(i), this.#a = !1);
+    this.#s.delete(e), this.#e = -1, this.#o = -1, this.#d();
+    for (const a of this.#r)
+      a.startsWith(`${e}:`) && this.#r.delete(a);
+    l && (l.querySelectorAll(".cell.editing").forEach((a) => {
+      a.classList.remove("editing"), j(a.parentElement);
+    }), this.requestRender()), this.#l = !0, l || (this.#g(i), this.#l = !1);
   }
   /**
    * Commit a single cell value change.
@@ -1053,158 +1144,176 @@ class z extends I {
    */
   #u(e, t, i, r) {
     const n = t.field;
-    if (!w(n)) return;
-    const o = r[n];
-    if (o === i) return;
-    const a = this.grid;
-    let l;
+    if (!E(n)) return;
+    const l = r[n];
+    if (l === i) return;
+    const o = this.grid;
+    let a;
     try {
-      l = this.grid.getRowId(r);
+      a = this.grid.getRowId(r);
     } catch {
     }
-    const d = l ? !this.#i.has(l) : !0, c = l ? (g) => this.grid.updateRow(l, g, "cascade") : k;
-    let p = !1;
-    const u = l ? (g) => {
-      p = !0, this.setInvalid(l, n, g ?? "");
+    const c = a ? !this.#i.has(a) : !0, d = a ? (g) => this.grid.updateRow(a, g, "cascade") : A;
+    let f = !1;
+    const u = a ? (g) => {
+      f = !0, this.setInvalid(a, n, g ?? "");
     } : () => {
     };
     if (this.emitCancelable("cell-commit", {
       row: r,
-      rowId: l ?? "",
+      rowId: a ?? "",
       field: n,
-      oldValue: o,
+      oldValue: l,
       value: i,
       rowIndex: e,
       changedRows: this.changedRows,
       changedRowIds: this.changedRowIds,
-      firstTimeForRow: d,
-      updateRow: c,
+      firstTimeForRow: c,
+      updateRow: d,
       setInvalid: u
     })) return;
-    l && !p && this.isCellInvalid(l, n) && this.clearInvalid(l, n), r[n] = i, l && this.#i.add(l), this.#c(), this.emitPluginEvent("cell-edit-committed", {
+    a && !f && this.isCellInvalid(a, n) && this.clearInvalid(a, n), r[n] = i, a && this.#i.add(a), this.#d(), this.emitPluginEvent("cell-edit-committed", {
       rowIndex: e,
       field: n,
-      oldValue: o,
+      oldValue: l,
       newValue: i
     });
-    const h = a.findRenderedRowElement?.(e);
-    h && h.classList.add("changed");
+    const p = o.findRenderedRowElement?.(e);
+    p && p.classList.add("changed");
   }
   /**
    * Inject an editor into a cell.
    */
-  #f(e, t, i, r, n, o) {
+  #f(e, t, i, r, n, l) {
     if (!i.editable || n.classList.contains("editing")) return;
-    let a;
+    let o;
     try {
-      a = this.grid.getRowId(e);
+      o = this.grid.getRowId(e);
     } catch {
     }
-    const l = a ? (f) => this.grid.updateRow(a, f, "cascade") : k, d = w(i.field) ? e[i.field] : void 0;
+    const a = o ? (h) => this.grid.updateRow(o, h, "cascade") : A, c = E(i.field) ? e[i.field] : void 0;
     n.classList.add("editing"), this.#r.add(`${t}:${r}`);
-    const c = n.parentElement;
-    c && H(c);
-    let p = !1;
-    const u = (f) => {
-      p || this.#e === -1 || this.#u(t, i, f, e);
+    const d = n.parentElement;
+    d && F(d);
+    let f = !1;
+    const u = (h) => {
+      f || this.#e === -1 || this.#u(t, i, h, e);
     }, m = () => {
-      p = !0, w(i.field) && (e[i.field] = d);
-    }, h = document.createElement("div");
-    h.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(h), h.addEventListener("keydown", (f) => {
-      f.key === "Enter" && (f.stopPropagation(), f.preventDefault(), p = !0, this.#n(t, !1)), f.key === "Escape" && (f.stopPropagation(), f.preventDefault(), m(), this.#n(t, !0));
+      f = !0, E(i.field) && (e[i.field] = c);
+    }, p = document.createElement("div");
+    p.className = "tbw-editor-host", n.innerHTML = "", n.appendChild(p), p.addEventListener("keydown", (h) => {
+      if (h.key === "Enter") {
+        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(h) === !1)
+          return;
+        h.stopPropagation(), h.preventDefault(), f = !0, this.#n(t, !1);
+      }
+      if (h.key === "Escape") {
+        if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(h) === !1)
+          return;
+        h.stopPropagation(), h.preventDefault(), m(), this.#n(t, !0);
+      }
     });
-    const g = i, y = g.__editorTemplate, v = G(this.grid, g) ?? N(i), C = d;
-    if (v === "template" && y)
-      this.#m(h, g, e, d, u, m, o, t);
-    else if (typeof v == "string") {
-      const f = document.createElement(v);
-      f.value = C, f.addEventListener("change", () => u(f.value)), h.appendChild(f), o || queueMicrotask(() => {
-        h.querySelector(R)?.focus({ preventScroll: !0 });
+    const g = i, w = g.__editorTemplate, b = G(this.grid, g) ?? $(i), R = c;
+    if (b === "template" && w)
+      this.#v(p, g, e, c, u, m, l, t);
+    else if (typeof b == "string") {
+      const h = document.createElement(b);
+      h.value = R, h.addEventListener("change", () => u(h.value)), p.appendChild(h), l || queueMicrotask(() => {
+        p.querySelector(C)?.focus({ preventScroll: !0 });
       });
-    } else if (typeof v == "function") {
-      const f = {
+    } else if (typeof b == "function") {
+      const h = {
         row: e,
-        rowId: a ?? "",
-        value: C,
+        rowId: o ?? "",
+        value: R,
         field: i.field,
         column: i,
         commit: u,
         cancel: m,
-        updateRow: l
-      }, b = v(f);
-      typeof b == "string" ? (h.innerHTML = b, $(h, i, u, d)) : b instanceof Node && h.appendChild(b), o || queueMicrotask(() => {
-        h.querySelector(R)?.focus({ preventScroll: !0 });
+        updateRow: a
+      }, v = b(h);
+      typeof v == "string" ? (p.innerHTML = v, W(p, i, u, c)) : v instanceof Node && (p.appendChild(v), v instanceof HTMLInputElement || v instanceof HTMLSelectElement || v instanceof HTMLTextAreaElement || n.setAttribute("data-editor-managed", "")), l || queueMicrotask(() => {
+        p.querySelector(C)?.focus({ preventScroll: !0 });
       });
-    } else if (v && typeof v == "object") {
-      const f = document.createElement("div");
-      f.setAttribute("data-external-editor", ""), f.setAttribute("data-field", i.field), h.appendChild(f);
-      const b = {
+    } else if (b && typeof b == "object") {
+      const h = document.createElement("div");
+      h.setAttribute("data-external-editor", ""), h.setAttribute("data-field", i.field), p.appendChild(h), n.setAttribute("data-editor-managed", "");
+      const v = {
         row: e,
-        rowId: a ?? "",
-        value: C,
+        rowId: o ?? "",
+        value: R,
         field: i.field,
         column: i,
         commit: u,
         cancel: m,
-        updateRow: l
+        updateRow: a
       };
-      if (v.mount)
+      if (b.mount)
         try {
-          v.mount({ placeholder: f, context: b, spec: v });
+          b.mount({ placeholder: h, context: v, spec: b });
         } catch (_) {
           console.warn(`[tbw-grid] External editor mount error for column '${i.field}':`, _);
         }
       else
         this.grid.dispatchEvent(
-          new CustomEvent("mount-external-editor", { detail: { placeholder: f, spec: v, context: b } })
+          new CustomEvent("mount-external-editor", { detail: { placeholder: h, spec: b, context: v } })
         );
     }
   }
   /**
    * Render a template-based editor.
    */
-  #m(e, t, i, r, n, o, a, l) {
-    const d = t.__editorTemplate;
-    if (!d) return;
-    const c = d.cloneNode(!0), p = t.__compiledEditor;
-    p ? c.innerHTML = p({
+  #v(e, t, i, r, n, l, o, a) {
+    const c = t.__editorTemplate;
+    if (!c) return;
+    const d = c.cloneNode(!0), f = t.__compiledEditor;
+    f ? d.innerHTML = f({
       row: i,
       value: r,
       field: t.field,
       column: t,
       commit: n,
-      cancel: o
-    }) : c.querySelectorAll("*").forEach((m) => {
-      m.childNodes.length === 1 && m.firstChild?.nodeType === Node.TEXT_NODE && (m.textContent = m.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (h, g) => {
-        if (!w(g)) return "";
-        const y = i[g];
-        return y == null ? "" : String(y);
+      cancel: l
+    }) : d.querySelectorAll("*").forEach((m) => {
+      m.childNodes.length === 1 && m.firstChild?.nodeType === Node.TEXT_NODE && (m.textContent = m.textContent?.replace(/{{\s*value\s*}}/g, r == null ? "" : String(r)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (p, g) => {
+        if (!E(g)) return "";
+        const w = i[g];
+        return w == null ? "" : String(w);
       }) || "");
     });
-    const u = c.querySelector(
+    const u = d.querySelector(
       "input,textarea,select"
     );
     if (u) {
       u instanceof HTMLInputElement && u.type === "checkbox" ? u.checked = !!r : u.value = String(r ?? "");
       let m = !1;
       u.addEventListener("blur", () => {
-        m || n(E(u, t, r));
-      }), u.addEventListener("keydown", (h) => {
-        const g = h;
-        g.key === "Enter" && (g.stopPropagation(), g.preventDefault(), m = !0, n(E(u, t, r)), this.#n(l, !1)), g.key === "Escape" && (g.stopPropagation(), g.preventDefault(), o(), this.#n(l, !0));
-      }), u instanceof HTMLInputElement && u.type === "checkbox" && u.addEventListener("change", () => n(u.checked)), a || setTimeout(() => u.focus({ preventScroll: !0 }), 0);
+        m || n(y(u, t, r));
+      }), u.addEventListener("keydown", (p) => {
+        const g = p;
+        if (g.key === "Enter") {
+          if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(g) === !1)
+            return;
+          g.stopPropagation(), g.preventDefault(), m = !0, n(y(u, t, r)), this.#n(a, !1);
+        }
+        if (g.key === "Escape") {
+          if (this.config.onBeforeEditClose && this.config.onBeforeEditClose(g) === !1)
+            return;
+          g.stopPropagation(), g.preventDefault(), l(), this.#n(a, !0);
+        }
+      }), u instanceof HTMLInputElement && u.type === "checkbox" && u.addEventListener("change", () => n(u.checked)), o || setTimeout(() => u.focus({ preventScroll: !0 }), 0);
     }
-    e.appendChild(c);
+    e.appendChild(d);
   }
   /**
    * Compare snapshot vs current row to detect if any values changed during this edit session.
    * Uses shallow comparison of all properties.
    */
-  #v(e, t) {
+  #b(e, t) {
     if (!e) return !1;
     const i = e, r = t, n = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
-    for (const o of n)
-      if (i[o] !== r[o])
+    for (const l of n)
+      if (i[l] !== r[l])
         return !0;
     return !1;
   }
@@ -1217,7 +1326,7 @@ class z extends I {
         const t = e._focusRow, i = e._focusCol, r = e.findRenderedRowElement?.(t);
         if (r) {
           Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(
-            (o) => o.classList.remove("cell-focus")
+            (l) => l.classList.remove("cell-focus")
           );
           const n = r.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 }));
@@ -1229,7 +1338,7 @@ class z extends I {
   // #endregion
 }
 export {
-  z as EditingPlugin,
-  N as defaultEditorFor
+  K as EditingPlugin,
+  $ as defaultEditorFor
 };
 //# sourceMappingURL=index.js.map