@toolbox-web/grid 1.12.0 → 1.13.0

package/lib/plugins/master-detail/MasterDetailPlugin.d.ts

@@ -131,6 +131,9 @@ export declare class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfi
     private get animationStyle();
     /**
      * Apply expand animation to a detail element.
+     * 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.
      */
     private animateExpand;
     /**
@@ -141,11 +144,15 @@ export declare class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfi
     private detailElements;
     /** Cached measured heights - persists even when elements are virtualized out */
     private measuredDetailHeights;
+    /** Rows that were just expanded by user action and should animate.
+     * Prevents re-animation when rows scroll back into the virtual window. */
+    private rowsToAnimate;
     /** Default height for detail rows when not configured */
     private static readonly DEFAULT_DETAIL_HEIGHT;
     /**
      * 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.
      */
     private getDetailHeight;
     /**

package/lib/plugins/master-detail/MasterDetailPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MasterDetailPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE3G,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD,OAAO,KAAK,EAA+C,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,qBAAa,kBAAmB,SAAQ,cAAc,CAAC,kBAAkB,CAAC;;IACxE,gBAAgB;IAChB,QAAQ,CAAC,IAAI,kBAAkB;IAC/B,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC,CAUlE;IAID;;;;OAIG;IACM,MAAM,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAKxC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,mBAAmB;IAqE3B;;;OAGG;IACH,OAAO,KAAK,cAAc,GAGzB;IAED;;OAEG;IACH,OAAO,CAAC,aAAa;IAarB;;OAEG;IACH,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,cAAc,CAAoC;IAC1D,gFAAgF;IAChF,OAAO,CAAC,qBAAqB,CAA+B;IAE5D,yDAAyD;IACzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,qBAAqB,CAAO;IAEpD;;;OAGG;IACH,OAAO,CAAC,eAAe;IAwBvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAarB,gBAAgB;IACP,MAAM,IAAI,IAAI;IASvB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAqDzE,gBAAgB;IACP,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAMzD,gBAAgB;IACP,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,GAAG,IAAI;IAgB3D,gBAAgB;IACP,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,IAAI;IAsBxD,gBAAgB;IACP,WAAW,IAAI,IAAI;IAI5B;;;;OAIG;IACM,cAAc,IAAI,IAAI;IA6F/B;;;;;OAKG;IACM,cAAc,IAAI,MAAM;IAQjC;;;;;OAKG;IACM,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM;IAY7D;;;;;;;;OAQG;IACM,YAAY,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAiBvE;;;OAGG;IACM,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM;IA8CxF;;;OAGG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ9B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQhC;;;OAGG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAQ9B;;;;OAIG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAKrC;;OAEG;IACH,SAAS,IAAI,IAAI;IAOjB;;OAEG;IACH,WAAW,IAAI,IAAI;IAKnB;;;OAGG;IACH,eAAe,IAAI,MAAM,EAAE;IAS3B;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IAK3D;;;;;;OAMG;IACH,qBAAqB,IAAI,IAAI;CA0B9B"}
+{"version":3,"file":"MasterDetailPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.ts"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-const E = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", v = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, y = /__(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/, C = /* @__PURE__ */ new Set([
+const C = /{{\s*([^}]+)\s*}}/g, g = "__DG_EMPTY__", _ = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, y = /__(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/, D = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,76 +23,77 @@ const E = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", v = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), f = /^on\w+$/i, _ = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), A = /^\s*(javascript|vbscript|data|blob):/i;
-function D(n) {
+]), b = /^on\w+$/i, S = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), H = /^\s*(javascript|vbscript|data|blob):/i;
+function T(n) {
   if (!n || typeof n != "string") return "";
   if (n.indexOf("<") === -1) return n;
   const e = document.createElement("template");
-  return e.innerHTML = n, S(e.content), e.innerHTML;
+  return e.innerHTML = n, L(e.content), e.innerHTML;
 }
-function S(n) {
+function L(n) {
   const e = [], t = n.querySelectorAll("*");
   for (const i of t) {
     const s = i.tagName.toLowerCase();
-    if (C.has(s)) {
+    if (D.has(s)) {
       e.push(i);
       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) => b.test(o.name) || o.name === "href" || o.name === "xlink:href"
     )) {
       e.push(i);
       continue;
     }
-    const a = [];
-    for (const d of i.attributes) {
-      const r = d.name.toLowerCase();
-      if (f.test(r)) {
-        a.push(d.name);
+    const r = [];
+    for (const a of i.attributes) {
+      const o = a.name.toLowerCase();
+      if (b.test(o)) {
+        r.push(a.name);
         continue;
       }
-      if (_.has(r) && A.test(d.value)) {
-        a.push(d.name);
+      if (S.has(o) && H.test(a.value)) {
+        r.push(a.name);
         continue;
       }
-      if (r === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(d.value)) {
-        a.push(d.name);
+      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(a.value)) {
+        r.push(a.name);
         continue;
       }
     }
-    a.forEach((d) => i.removeAttribute(d));
+    r.forEach((a) => i.removeAttribute(a));
   }
   e.forEach((i) => i.remove());
 }
-function H(n, e) {
+function I(n, e) {
   if (!n || n.indexOf("{{") === -1) return n;
-  const t = [], i = n.replace(E, (r, o) => {
-    const l = L(o, e);
-    return t.push({ expr: o.trim(), result: l }), l;
-  }), s = I(i), a = t.length && t.every((r) => r.result === "" || r.result === u);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || a ? "" : s;
+  const t = [], i = n.replace(C, (o, c) => {
+    const d = O(c, e);
+    return t.push({ expr: c.trim(), result: d }), d;
+  }), s = k(i), r = t.length && t.every((o) => o.result === "" || o.result === g);
+  return p.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 O(n, e) {
+  if (n = (n || "").trim(), !n || p.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 || !v.test(n) || y.test(n)) return u;
+  if (n.length > 80 || !_.test(n) || y.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), a = s == null ? "" : String(s);
-    return /Reflect|Proxy|ownKeys/.test(a) ? u : a || u;
+    const s = new Function("value", "row", `return (${n});`)(e.value, e.row), r = s == null ? "" : String(s);
+    return p.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, "");
+const p = /Reflect|Proxy|ownKeys/;
+function k(n) {
+  return n && n.replace(new RegExp(g, "g"), "").replace(/Reflect\.[^<>{}\s]+|\bProxy\b|ownKeys\([^)]*\)/g, "");
 }
-const p = '<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 x = '<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>', N = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -101,11 +102,11 @@ const p = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: p,
-  filterActive: p,
+  filter: x,
+  filterActive: x,
   print: "🖨️"
 };
-class k {
+class M {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -395,7 +396,7 @@ class k {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...T, ...e };
+    return { ...N, ...e };
   }
   // #region Animation Helpers
   /**
@@ -471,19 +472,19 @@ class k {
   }
   // #endregion
 }
-const w = "__tbw_expander", O = 32;
-function b(n) {
-  return n.field === w;
+const E = "__tbw_expander", q = 32;
+function v(n) {
+  return n.field === E;
 }
-function N(n) {
-  return n.find(b);
+function P(n) {
+  return n.find(v);
 }
-function q(n) {
+function F(n) {
   return {
-    field: w,
+    field: E,
     header: "",
     // No header text - visually merges with next column
-    width: O,
+    width: q,
     resizable: !1,
     sortable: !1,
     filterable: !1,
@@ -498,35 +499,35 @@ function q(n) {
     }
   };
 }
-function m(n, e) {
+function R(n, e) {
   const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function M(n, e) {
+function U(n, e) {
   const t = new Set(n);
   return t.add(e), t;
 }
-function P(n, e) {
+function z(n, e) {
   const t = new Set(n);
   return t.delete(e), t;
 }
-function F(n, e) {
+function G(n, e) {
   return n.has(e);
 }
-function U(n, e, t, i) {
+function W(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 a = document.createElement("div");
-  a.className = "master-detail-cell", a.setAttribute("role", "cell"), a.style.gridColumn = `1 / ${i + 1}`;
-  const d = t(n, e);
-  return typeof d == "string" ? a.innerHTML = d : d instanceof HTMLElement && a.appendChild(d), s.appendChild(a), 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 G = "@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 x extends k {
+const $ = "@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 A extends M {
   /** @internal */
   name = "masterDetail";
   /** @internal */
-  styles = G;
+  styles = $;
   /** @internal */
   get defaultConfig() {
     return {
@@ -578,19 +579,19 @@ class x extends k {
     if (!t) return;
     const i = e;
     if (i.__frameworkAdapter?.parseDetailElement) {
-      const h = i.__frameworkAdapter.parseDetailElement(t);
-      if (h) {
-        this.config = { ...this.config, detailRenderer: h };
+      const u = i.__frameworkAdapter.parseDetailElement(t);
+      if (u) {
+        this.config = { ...this.config, detailRenderer: u };
         return;
       }
     }
-    const s = t.getAttribute("animation"), a = t.getAttribute("show-expand-column"), d = t.getAttribute("expand-on-row-click"), r = t.getAttribute("collapse-on-click-outside"), o = t.getAttribute("height"), l = {};
-    s !== null && (l.animation = s === "false" ? !1 : s), a !== null && (l.showExpandColumn = a !== "false"), d !== null && (l.expandOnRowClick = d === "true"), r !== null && (l.collapseOnClickOutside = r === "true"), o !== null && (l.detailHeight = o === "auto" ? "auto" : parseInt(o, 10));
-    const c = t.innerHTML.trim();
-    c && !this.config.detailRenderer && (l.detailRenderer = (h, g) => {
-      const R = H(c, { value: h, row: h });
-      return D(R);
-    }), Object.keys(l).length > 0 && (this.config = { ...this.config, ...l });
+    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 = I(l, { value: u, row: u });
+      return T(f);
+    }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
   // #region Animation Helpers
@@ -603,15 +604,18 @@ class x extends k {
   }
   /**
    * 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,43 +631,61 @@ class x extends k {
     };
     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);
-    if (t) {
-      const s = t.offsetHeight;
-      if (s > 0)
-        return this.measuredDetailHeights.set(e, s), s;
+    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 : x.DEFAULT_DETAIL_HEIGHT;
+    return i && i > 0 ? i : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : A.DEFAULT_DETAIL_HEIGHT;
   }
   /**
    * Toggle a row's detail and emit event.
    */
   toggleAndEmit(e, t) {
-    this.expandedRows = m(this.expandedRows, e), this.emit("detail-expand", {
+    this.expandedRows = R(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.measuredDetailHeights.clear();
+    this.expandedRows.clear(), this.detailElements.clear(), this.measuredDetailHeights.clear(), this.rowsToAnimate.clear();
   }
   // #endregion
   // #region Hooks
@@ -672,15 +694,15 @@ class x extends k {
     if (!(this.config.showExpandColumn === !0 || this.config.showExpandColumn !== !1 && !!this.config.detailRenderer))
       return [...e];
     const i = [...e];
-    if (N(i))
+    if (P(i))
       return i;
-    const a = q(this.name);
-    return a.viewRenderer = (d) => {
-      const { row: r } = d, o = this.expandedRows.has(r), l = document.createElement("span");
-      l.className = "master-detail-expander expander-cell";
-      const c = document.createElement("span");
-      return c.className = `master-detail-toggle${o ? " expanded" : ""}`, this.setIcon(c, this.resolveIcon(o ? "collapse" : "expand")), c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-expanded", String(o)), c.setAttribute("aria-label", o ? "Collapse details" : "Expand details"), l.appendChild(c), l;
-    }, [a, ...i];
+    const r = F(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 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) {
@@ -691,20 +713,20 @@ class x extends k {
   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 || !b(s)) return;
-    const a = this.rows[i];
-    if (a)
-      return e.preventDefault(), this.toggleAndEmit(a, i), this.requestRenderWithFocus(), !0;
+    if (!s || !v(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.
@@ -712,44 +734,52 @@ class x extends k {
    * @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 d of i) {
-      const r = d.querySelector(".cell[data-row]"), o = r ? parseInt(r.getAttribute("data-row") ?? "-1", 10) : -1;
-      o >= 0 && t.set(o, d);
+    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 a = e.querySelectorAll(".master-detail-row");
-    for (const d of a) {
-      const r = parseInt(d.getAttribute("data-detail-for") ?? "-1", 10), o = r >= 0 ? this.rows[r] : void 0, l = o && this.expandedRows.has(o), c = t.has(r);
-      (!l || !c) && (d.remove(), o && this.detailElements.delete(o));
+    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 [d, r] of t) {
-      const o = this.rows[d];
-      if (!o || !this.expandedRows.has(o)) continue;
-      const l = this.detailElements.get(o);
-      if (l) {
-        l.previousElementSibling !== r && r.after(l);
+    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 = U(o, d, this.config.detailRenderer, s);
-      typeof this.config.detailHeight == "number" && (c.style.height = `${this.config.detailHeight}px`), r.after(c), this.detailElements.set(o, c), requestAnimationFrame(() => {
-        if (c.isConnected) {
-          const h = c.offsetHeight;
-          if (h > 0) {
-            const g = this.measuredDetailHeights.get(o);
-            this.measuredDetailHeights.set(o, h), g !== h && this.grid.invalidateRowHeight(d);
-          }
-        }
-      }), this.animateExpand(c);
+      const m = W(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 w = this.rowsToAnimate.has(h);
+      w && this.rowsToAnimate.delete(h), w && this.animateExpand(m, h, l) || requestAnimationFrame(() => {
+        this.#e(m, h, l);
+      });
     }
   }
   /**
@@ -790,8 +820,8 @@ class x extends k {
   getRowHeight(e, t) {
     if (!this.expandedRows.has(e))
       return;
-    const s = this.grid.defaultRowHeight ?? 28, a = this.getDetailHeight(e);
-    return s + a;
+    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.
@@ -799,18 +829,28 @@ class x extends k {
    */
   adjustVirtualStart(e, t, i) {
     if (this.expandedRows.size === 0) return e;
-    const s = [];
-    for (const r of this.expandedRows) {
-      const o = this.rows.indexOf(r);
-      o >= 0 && s.push({ index: o, row: r });
-    }
-    s.sort((r, o) => r.index - o.index);
-    let a = e, d = 0;
-    for (const { index: r, row: o } of s) {
-      const l = r * i + d, c = this.getDetailHeight(o), h = l + i + c;
-      d += c, !(r >= e) && h > t && r < a && (a = 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 a;
+    return r;
   }
   // #endregion
   // #region Public API
@@ -820,7 +860,7 @@ class x extends k {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = M(this.expandedRows, t), this.requestRender());
+    t && (this.rowsToAnimate.add(t), this.expandedRows = U(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -828,7 +868,7 @@ class x extends k {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = P(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = z(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -836,7 +876,7 @@ class x extends k {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = m(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = R(this.expandedRows, t), this.expandedRows.has(t) && this.rowsToAnimate.add(t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -845,14 +885,14 @@ class x extends k {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? F(this.expandedRows, t) : !1;
+    return t ? G(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();
   }
   /**
@@ -899,6 +939,6 @@ class x extends k {
   // #endregion
 }
 export {
-  x as MasterDetailPlugin
+  A as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map