@toolbox-web/grid 1.11.0 → 1.12.1

package/lib/plugins/master-detail/index.js

@@ -1,4 +1,4 @@
-const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", E = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, v = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, y = /* @__PURE__ */ new Set([
+const A = /{{\s*([^}]+)\s*}}/g, g = "__DG_EMPTY__", C = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, _ = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, y = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,14 +23,14 @@ const R = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", E = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), f = /^on\w+$/i, C = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), _ = /^\s*(javascript|vbscript|data|blob):/i;
-function A(n) {
+]), w = /^on\w+$/i, D = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), S = /^\s*(javascript|vbscript|data|blob):/i;
+function H(n) {
   if (!n || typeof n != "string") return "";
   if (n.indexOf("<") === -1) return n;
   const e = document.createElement("template");
-  return e.innerHTML = n, D(e.content), e.innerHTML;
+  return e.innerHTML = n, T(e.content), e.innerHTML;
 }
-function D(n) {
+function T(n) {
   const e = [], t = n.querySelectorAll("*");
   for (const i of t) {
     const s = i.tagName.toLowerCase();
@@ -39,60 +39,60 @@ function D(n) {
       continue;
     }
     if ((s === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
-      (r) => f.test(r.name) || r.name === "href" || r.name === "xlink:href"
+      (o) => w.test(o.name) || o.name === "href" || o.name === "xlink:href"
     )) {
       e.push(i);
       continue;
     }
-    const l = [];
-    for (const o of i.attributes) {
-      const r = o.name.toLowerCase();
-      if (f.test(r)) {
-        l.push(o.name);
+    const r = [];
+    for (const a of i.attributes) {
+      const o = a.name.toLowerCase();
+      if (w.test(o)) {
+        r.push(a.name);
         continue;
       }
-      if (C.has(r) && _.test(o.value)) {
-        l.push(o.name);
+      if (D.has(o) && S.test(a.value)) {
+        r.push(a.name);
         continue;
       }
-      if (r === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(o.value)) {
-        l.push(o.name);
+      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(a.value)) {
+        r.push(a.name);
         continue;
       }
     }
-    l.forEach((o) => i.removeAttribute(o));
+    r.forEach((a) => i.removeAttribute(a));
   }
   e.forEach((i) => i.remove());
 }
-function S(n, e) {
+function L(n, e) {
   if (!n || n.indexOf("{{") === -1) return n;
-  const t = [], i = n.replace(R, (r, a) => {
-    const d = L(a, e);
-    return t.push({ expr: a.trim(), result: d }), d;
-  }), s = I(i), l = t.length && t.every((r) => r.result === "" || r.result === u);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || l ? "" : s;
+  const t = [], i = n.replace(A, (o, c) => {
+    const d = I(c, e);
+    return t.push({ expr: c.trim(), result: d }), d;
+  }), s = O(i), r = t.length && t.every((o) => o.result === "" || o.result === g);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || r ? "" : s;
 }
-function L(n, e) {
-  if (n = (n || "").trim(), !n || /\b(Reflect|Proxy|ownKeys)\b/.test(n)) return u;
-  if (n === "value") return e.value == null ? u : String(e.value);
+function I(n, e) {
+  if (n = (n || "").trim(), !n || /\b(Reflect|Proxy|ownKeys)\b/.test(n)) return g;
+  if (n === "value") return e.value == null ? g : String(e.value);
   if (n.startsWith("row.") && !/[()?]/.test(n) && !n.includes(":")) {
     const i = n.slice(4), s = e.row ? e.row[i] : void 0;
-    return s == null ? u : String(s);
+    return s == null ? g : String(s);
   }
-  if (n.length > 80 || !E.test(n) || v.test(n)) return u;
+  if (n.length > 80 || !C.test(n) || _.test(n)) return g;
   const t = n.match(/\./g);
-  if (t && t.length > 1) return u;
+  if (t && t.length > 1) return g;
   try {
-    const s = new Function("value", "row", `return (${n});`)(e.value, e.row), l = s == null ? "" : String(s);
-    return /Reflect|Proxy|ownKeys/.test(l) ? u : l || u;
+    const s = new Function("value", "row", `return (${n});`)(e.value, e.row), r = s == null ? "" : String(s);
+    return /Reflect|Proxy|ownKeys/.test(r) ? g : r || g;
   } catch {
-    return u;
+    return g;
   }
 }
-function I(n) {
-  return n && n.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+function O(n) {
+  return n && n.replace(new RegExp(g, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
 }
-const h = '<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>', T = {
+const b = '<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>', k = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -101,11 +101,11 @@ const h = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: h,
-  filterActive: h,
+  filter: b,
+  filterActive: b,
   print: "🖨️"
 };
-class H {
+class N {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -395,7 +395,7 @@ class H {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...T, ...e };
+    return { ...k, ...e };
   }
   // #region Animation Helpers
   /**
@@ -471,19 +471,19 @@ class H {
   }
   // #endregion
 }
-const m = "__tbw_expander", k = 32;
-function w(n) {
-  return n.field === m;
+const R = "__tbw_expander", P = 32;
+function E(n) {
+  return n.field === R;
 }
-function O(n) {
-  return n.find(w);
+function M(n) {
+  return n.find(E);
 }
-function N(n) {
+function q(n) {
   return {
-    field: m,
+    field: R,
     header: "",
     // No header text - visually merges with next column
-    width: k,
+    width: P,
     resizable: !1,
     sortable: !1,
     filterable: !1,
@@ -498,35 +498,35 @@ function N(n) {
     }
   };
 }
-function p(n, e) {
+function x(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function q(n, e) {
+function F(n, e) {
   const t = new Set(n);
   return t.add(e), t;
 }
-function P(n, e) {
+function U(n, e) {
   const t = new Set(n);
   return t.delete(e), t;
 }
-function M(n, e) {
+function z(n, e) {
   return n.has(e);
 }
-function F(n, e, t, i) {
+function G(n, e, t, i) {
   const s = document.createElement("div");
   s.className = "master-detail-row", s.setAttribute("data-detail-for", String(e)), s.setAttribute("role", "row");
-  const l = document.createElement("div");
-  l.className = "master-detail-cell", l.setAttribute("role", "cell"), l.style.gridColumn = `1 / ${i + 1}`;
-  const o = t(n, e);
-  return typeof o == "string" ? l.innerHTML = o : o instanceof HTMLElement && l.appendChild(o), s.appendChild(l), s;
+  const r = document.createElement("div");
+  r.className = "master-detail-cell", r.setAttribute("role", "cell"), r.style.gridColumn = `1 / ${i + 1}`;
+  const a = t(n, e);
+  return typeof a == "string" ? r.innerHTML = a : a instanceof HTMLElement && r.appendChild(a), s.appendChild(r), s;
 }
-const U = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}tbw-grid .master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}tbw-grid .master-detail-toggle:hover{opacity:1}tbw-grid .master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}tbw-grid .master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}tbw-grid .master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
-class b extends H {
+const W = "@layer tbw-plugins{tbw-grid .cell[data-field=__tbw_expander]{border-right:none!important;padding:0;display:flex;align-items:center;justify-content:center}tbw-grid .header-row .cell[data-field=__tbw_expander]{display:none}tbw-grid .header-row .cell[data-field=__tbw_expander]+.cell{grid-column:1 / 3}tbw-grid .master-detail-expander{display:flex;align-items:center;justify-content:center;width:100%;height:100%}tbw-grid .master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}tbw-grid .master-detail-toggle:hover{opacity:1}tbw-grid .master-detail-row{grid-column:1 / -1;display:grid;background:var(--tbw-master-detail-bg, var(--tbw-color-row-alt));border-bottom:1px solid var(--tbw-master-detail-border, var(--tbw-color-border));overflow:hidden}tbw-grid .master-detail-cell{padding:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));overflow:auto}tbw-grid .master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}tbw-grid .master-detail-row.tbw-collapsing{animation:tbw-detail-collapse var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}@keyframes tbw-detail-expand{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem);padding-top:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem));padding-bottom:var(--tbw-detail-padding, var(--tbw-spacing-xl, 1rem))}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:var(--tbw-detail-max-height, 31.25rem)}to{opacity:0;max-height:0}}}";
+class v extends N {
   /** @internal */
   name = "masterDetail";
   /** @internal */
-  styles = U;
+  styles = W;
   /** @internal */
   get defaultConfig() {
     return {
@@ -578,18 +578,18 @@ class b extends H {
     if (!t) return;
     const i = e;
     if (i.__frameworkAdapter?.parseDetailElement) {
-      const g = i.__frameworkAdapter.parseDetailElement(t);
-      if (g) {
-        this.config = { ...this.config, detailRenderer: g };
+      const u = i.__frameworkAdapter.parseDetailElement(t);
+      if (u) {
+        this.config = { ...this.config, detailRenderer: u };
         return;
       }
     }
-    const s = t.getAttribute("animation"), l = t.getAttribute("show-expand-column"), o = t.getAttribute("expand-on-row-click"), r = t.getAttribute("collapse-on-click-outside"), a = t.getAttribute("height"), d = {};
-    s !== null && (d.animation = s === "false" ? !1 : s), l !== null && (d.showExpandColumn = l !== "false"), o !== null && (d.expandOnRowClick = o === "true"), r !== null && (d.collapseOnClickOutside = r === "true"), a !== null && (d.detailHeight = a === "auto" ? "auto" : parseInt(a, 10));
-    const c = t.innerHTML.trim();
-    c && !this.config.detailRenderer && (d.detailRenderer = (g, G) => {
-      const x = S(c, { value: g, row: g });
-      return A(x);
+    const s = t.getAttribute("animation"), r = t.getAttribute("show-expand-column"), a = t.getAttribute("expand-on-row-click"), o = t.getAttribute("collapse-on-click-outside"), c = t.getAttribute("height"), d = {};
+    s !== null && (d.animation = s === "false" ? !1 : s), r !== null && (d.showExpandColumn = r !== "false"), a !== null && (d.expandOnRowClick = a === "true"), o !== null && (d.collapseOnClickOutside = o === "true"), c !== null && (d.detailHeight = c === "auto" ? "auto" : parseInt(c, 10));
+    const l = t.innerHTML.trim();
+    l && !this.config.detailRenderer && (d.detailRenderer = (u, h) => {
+      const f = L(l, { value: u, row: u });
+      return H(f);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
@@ -603,15 +603,18 @@ class b extends H {
   }
   /**
    * Apply expand animation to a detail element.
-   */
-  animateExpand(e) {
-    !this.isAnimationEnabled || this.animationStyle === !1 || (e.classList.add("tbw-expanding"), e.addEventListener(
-      "animationend",
-      () => {
-        e.classList.remove("tbw-expanding");
-      },
-      { once: !0 }
-    ));
+   * Returns true if animation was applied, false if skipped.
+   * When animated, height measurement is deferred to animationend to avoid
+   * measuring during the max-height: 0 CSS animation constraint.
+   */
+  animateExpand(e, t, i) {
+    if (!this.isAnimationEnabled || this.animationStyle === !1) return !1;
+    e.classList.add("tbw-expanding");
+    let s = !1;
+    const r = () => {
+      s || (s = !0, e.classList.remove("tbw-expanding"), t !== void 0 && i !== void 0 && this.#e(e, t, i));
+    };
+    return e.addEventListener("animationend", r, { once: !0 }), setTimeout(r, this.animationDuration + 50), !0;
   }
   /**
    * Apply collapse animation to a detail element and remove after animation.
@@ -627,34 +630,61 @@ class b extends H {
     };
     e.addEventListener("animationend", i, { once: !0 }), setTimeout(i, this.animationDuration + 50);
   }
+  /**
+   * Measure a detail element's height and update the position cache if it changed.
+   * Used after layout settles (RAF) or after animation completes (animationend).
+   */
+  #e(e, t, i) {
+    if (!e.isConnected) return;
+    const s = e.offsetHeight;
+    if (s > 0) {
+      const r = this.measuredDetailHeights.get(t);
+      this.measuredDetailHeights.set(t, s), r !== s && this.grid.invalidateRowHeight(i);
+    }
+  }
   // #endregion
   // #region Internal State
   expandedRows = /* @__PURE__ */ new Set();
   detailElements = /* @__PURE__ */ new Map();
+  /** Cached measured heights - persists even when elements are virtualized out */
+  measuredDetailHeights = /* @__PURE__ */ new Map();
+  /** Rows that were just expanded by user action and should animate.
+   * Prevents re-animation when rows scroll back into the virtual window. */
+  rowsToAnimate = /* @__PURE__ */ new Set();
   /** Default height for detail rows when not configured */
   static DEFAULT_DETAIL_HEIGHT = 150;
   /**
    * Get the estimated height for a detail row.
+   * Uses cached measured height when available (survives virtualization).
+   * Avoids reading offsetHeight during CSS animations to prevent poisoning the cache.
    */
   getDetailHeight(e) {
     const t = this.detailElements.get(e);
-    return t ? t.offsetHeight : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : b.DEFAULT_DETAIL_HEIGHT;
+    if (t && !(t.classList.contains("tbw-expanding") || t.classList.contains("tbw-collapsing"))) {
+      const r = t.offsetHeight;
+      if (r > 0)
+        return this.measuredDetailHeights.set(e, r), r;
+    }
+    const i = this.measuredDetailHeights.get(e);
+    return i && i > 0 ? i : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : v.DEFAULT_DETAIL_HEIGHT;
   }
   /**
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = p(this.expandedRows, e), this.emit("detail-expand", {
+    this.expandedRows = x(this.expandedRows, e);
+    const i = this.expandedRows.has(e);
+    i && this.rowsToAnimate.add(e), this.emit("detail-expand", {
       rowIndex: t,
       row: e,
-      expanded: this.expandedRows.has(e)
+      expanded: i
     }), this.requestRender();
   }
   // #endregion
   // #region Lifecycle
   /** @internal */
   detach() {
-    this.expandedRows.clear(), this.detailElements.clear();
+    this.expandedRows.clear(), this.detailElements.clear(), this.measuredDetailHeights.clear(), this.rowsToAnimate.clear();
   }
   // #endregion
   // #region Hooks
@@ -663,15 +693,15 @@ class b extends H {
     if (!(this.config.showExpandColumn === !0 || this.config.showExpandColumn !== !1 && !!this.config.detailRenderer))
       return [...e];
     const i = [...e];
-    if (O(i))
+    if (M(i))
       return i;
-    const l = N(this.name);
-    return l.viewRenderer = (o) => {
-      const { row: r } = o, a = this.expandedRows.has(r), d = document.createElement("span");
+    const r = q(this.name);
+    return r.viewRenderer = (a) => {
+      const { row: o } = a, c = this.expandedRows.has(o), d = document.createElement("span");
       d.className = "master-detail-expander expander-cell";
-      const c = document.createElement("span");
-      return c.className = `master-detail-toggle${a ? " expanded" : ""}`, this.setIcon(c, this.resolveIcon(a ? "collapse" : "expand")), c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-expanded", String(a)), c.setAttribute("aria-label", a ? "Collapse details" : "Expand details"), d.appendChild(c), d;
-    }, [l, ...i];
+      const l = document.createElement("span");
+      return l.className = `master-detail-toggle${c ? " expanded" : ""}`, this.setIcon(l, this.resolveIcon(c ? "collapse" : "expand")), l.setAttribute("role", "button"), l.setAttribute("tabindex", "0"), l.setAttribute("aria-expanded", String(c)), l.setAttribute("aria-label", c ? "Collapse details" : "Expand details"), d.appendChild(l), d;
+    }, [r, ...i];
   }
   /** @internal */
   onRowClick(e) {
@@ -682,20 +712,20 @@ class b extends H {
   onCellClick(e) {
     if (e.originalEvent?.target?.classList.contains("master-detail-toggle"))
       return this.toggleAndEmit(e.row, e.rowIndex), !0;
-    this.expandedRows.size > 0 && queueMicrotask(() => this.#e());
+    this.expandedRows.size > 0 && queueMicrotask(() => this.#t());
   }
   /** @internal */
   onKeyDown(e) {
     if (e.key !== " ") return;
     const t = this.grid._focusCol, i = this.grid._focusRow, s = this.columns[t];
-    if (!s || !w(s)) return;
-    const l = this.rows[i];
-    if (l)
-      return e.preventDefault(), this.toggleAndEmit(l, i), this.requestRenderWithFocus(), !0;
+    if (!s || !E(s)) return;
+    const r = this.rows[i];
+    if (r)
+      return e.preventDefault(), this.toggleAndEmit(r, i), this.requestRenderWithFocus(), !0;
   }
   /** @internal */
   afterRender() {
-    this.#e();
+    this.#t();
   }
   /**
    * Called on scroll to sync detail elements with visible rows.
@@ -703,41 +733,59 @@ class b extends H {
    * @internal
    */
   onScrollRender() {
-    !this.config.detailRenderer || this.expandedRows.size === 0 || this.#e();
+    !this.config.detailRenderer || this.expandedRows.size === 0 || this.#t();
   }
   /**
    * Full sync of detail rows - cleans up stale elements and creates new ones.
    * Detail rows are inserted as siblings AFTER their master row to survive row rebuilds.
+   *
+   * PERF: Uses the grid's row pool (_rowPool) and virtual window (_virtualization.start/end)
+   * to avoid querySelectorAll on every scroll frame. The pool is index-aligned with the
+   * virtual window, so pool[i] corresponds to row index (start + i).
    */
-  #e() {
+  #t() {
     if (!this.config.detailRenderer) return;
     const e = this.gridElement?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), i = e.querySelectorAll(".data-grid-row"), s = this.columns.length;
-    for (const o of i) {
-      const r = o.querySelector(".cell[data-row]"), a = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
-      a >= 0 && t.set(a, o);
+    const t = this.grid, i = t._rowPool, s = t._virtualization?.start ?? 0, r = t._virtualization?.end ?? 0, a = this.columns.length, o = s, c = r, d = /* @__PURE__ */ new Map();
+    if (i) {
+      const l = Math.min(i.length, c - o);
+      for (let u = 0; u < l; u++) {
+        const h = i[u];
+        h.parentNode === e && d.set(o + u, h);
+      }
+    } else {
+      const l = e.querySelectorAll(".data-grid-row");
+      for (const u of l) {
+        const h = u.querySelector(".cell[data-row]"), f = h ? parseInt(h.getAttribute("data-row") ?? "-1", 10) : -1;
+        f >= 0 && d.set(f, u);
+      }
     }
-    const l = e.querySelectorAll(".master-detail-row");
-    for (const o of l) {
-      const r = parseInt(o.getAttribute("data-detail-for") ?? "-1", 10), a = r >= 0 ? this.rows[r] : void 0, d = a && this.expandedRows.has(a), c = t.has(r);
-      (!d || !c) && (o.remove(), a && this.detailElements.delete(a));
+    for (const [l, u] of this.detailElements) {
+      const h = this.rows.indexOf(l), f = this.expandedRows.has(l), m = h >= 0 && d.has(h);
+      (!f || !m) && (u.parentNode && u.remove(), this.detailElements.delete(l));
     }
-    for (const [o, r] of t) {
-      const a = this.rows[o];
-      if (!a || !this.expandedRows.has(a)) continue;
-      const d = this.detailElements.get(a);
-      if (d) {
-        d.previousElementSibling !== r && r.after(d);
+    for (const [l, u] of d) {
+      const h = this.rows[l];
+      if (!h || !this.expandedRows.has(h)) continue;
+      const f = this.detailElements.get(h);
+      if (f) {
+        f.previousElementSibling !== u && u.after(f);
         continue;
       }
-      const c = F(a, o, this.config.detailRenderer, s);
-      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), r.after(c), this.detailElements.set(a, c), this.animateExpand(c);
+      const m = G(h, l, this.config.detailRenderer, a);
+      typeof this.config.detailHeight == "number" && (m.style.height = `${this.config.detailHeight}px`), u.after(m), this.detailElements.set(h, m);
+      const p = this.rowsToAnimate.has(h);
+      p && this.rowsToAnimate.delete(h), p && this.animateExpand(m, h, l) || requestAnimationFrame(() => {
+        this.#e(m, h, l);
+      });
     }
   }
   /**
    * Return total extra height from all expanded detail rows.
    * Used by grid virtualization to adjust scrollbar height.
+   *
+   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeight() {
     let e = 0;
@@ -748,6 +796,8 @@ class b extends H {
   /**
    * Return extra height that appears before a given row index.
    * This is the sum of heights of all expanded details whose parent row is before the given index.
+   *
+   * @deprecated Use getRowHeight() instead. This hook will be removed in v3.0.
    */
   getExtraHeightBefore(e) {
     let t = 0;
@@ -757,24 +807,49 @@ class b extends H {
     }
     return t;
   }
+  /**
+   * Get the height of a specific row, including any expanded detail content.
+   * Always returns a height to ensure the position cache uses plugin-controlled values
+   * rather than stale DOM measurements.
+   *
+   * @param row - The row data
+   * @param _index - The row index (unused, but part of the interface)
+   * @returns The row height in pixels (base height for collapsed, base + detail for expanded)
+   */
+  getRowHeight(e, t) {
+    if (!this.expandedRows.has(e))
+      return;
+    const s = this.grid.defaultRowHeight ?? 28, r = this.getDetailHeight(e);
+    return s + r;
+  }
   /**
    * Adjust the virtualization start index to keep expanded row visible while its detail is visible.
    * This ensures the detail scrolls smoothly out of view instead of disappearing abruptly.
    */
   adjustVirtualStart(e, t, i) {
     if (this.expandedRows.size === 0) return e;
-    const s = [];
-    for (const r of this.expandedRows) {
-      const a = this.rows.indexOf(r);
-      a >= 0 && s.push({ index: a, row: r });
-    }
-    s.sort((r, a) => r.index - a.index);
-    let l = e, o = 0;
-    for (const { index: r, row: a } of s) {
-      const d = r * i + o, c = this.getDetailHeight(a), g = d + i + c;
-      o += c, !(r >= e) && g > t && r < l && (l = r);
+    const s = this.grid?._virtualization?.positionCache;
+    let r = e;
+    if (s && s.length > 0)
+      for (const a of this.expandedRows) {
+        const o = this.rows.indexOf(a);
+        if (o < 0 || o >= e) continue;
+        s[o].offset + s[o].height > t && o < r && (r = o);
+      }
+    else {
+      const a = [];
+      for (const c of this.expandedRows) {
+        const d = this.rows.indexOf(c);
+        d >= 0 && a.push({ index: d, row: c });
+      }
+      a.sort((c, d) => c.index - d.index);
+      let o = 0;
+      for (const { index: c, row: d } of a) {
+        const l = c * i + o, u = this.getDetailHeight(d), h = l + i + u;
+        o += u, !(c >= e) && h > t && c < r && (r = c);
+      }
     }
-    return l;
+    return r;
   }
   // #endregion
   // #region Public API
@@ -784,7 +859,7 @@ class b extends H {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = q(this.expandedRows, t), this.requestRender());
+    t && (this.rowsToAnimate.add(t), this.expandedRows = F(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -792,7 +867,7 @@ class b extends H {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = P(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = U(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -800,7 +875,7 @@ class b extends H {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = p(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = x(this.expandedRows, t), this.expandedRows.has(t) && this.rowsToAnimate.add(t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -809,14 +884,14 @@ class b extends H {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? M(this.expandedRows, t) : !1;
+    return t ? z(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
    */
   expandAll() {
     for (const e of this.rows)
-      this.expandedRows.add(e);
+      this.rowsToAnimate.add(e), this.expandedRows.add(e);
     this.requestRender();
   }
   /**
@@ -863,6 +938,6 @@ class b extends H {
   // #endregion
 }
 export {
-  b as MasterDetailPlugin
+  v as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map