@toolbox-web/grid 0.4.1 → 0.5.0

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

@@ -1,4 +1,4 @@
-const m = /{{\s*([^}]+)\s*}}/g, f = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, x = /__(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/, b = /* @__PURE__ */ new Set([
+const x = /{{\s*([^}]+)\s*}}/g, u = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, E = /__(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/, v = /* @__PURE__ */ new Set([
   "script",
   "iframe",
   "object",
@@ -23,76 +23,76 @@ const m = /{{\s*([^}]+)\s*}}/g, f = "__DG_EMPTY__", R = /^[\w$. '?+\-*/%:()!<>=,
   "plaintext",
   "xmp",
   "listing"
-]), w = /^on\w+$/i, E = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), v = /^\s*(javascript|vbscript|data|blob):/i;
-function y(i) {
-  if (!i || typeof i != "string") return "";
-  if (i.indexOf("<") === -1) return i;
+]), g = /^on\w+$/i, y = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), C = /^\s*(javascript|vbscript|data|blob):/i;
+function _(n) {
+  if (!n || typeof n != "string") return "";
+  if (n.indexOf("<") === -1) return n;
   const e = document.createElement("template");
-  return e.innerHTML = i, C(e.content), e.innerHTML;
+  return e.innerHTML = n, A(e.content), e.innerHTML;
 }
-function C(i) {
-  const e = [], t = i.querySelectorAll("*");
-  for (const n of t) {
-    const s = n.tagName.toLowerCase();
-    if (b.has(s)) {
-      e.push(n);
+function A(n) {
+  const e = [], t = n.querySelectorAll("*");
+  for (const i of t) {
+    const s = i.tagName.toLowerCase();
+    if (v.has(s)) {
+      e.push(i);
       continue;
     }
-    if ((s === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
-      (o) => w.test(o.name) || o.name === "href" || o.name === "xlink:href"
+    if ((s === "svg" || i.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(i.attributes).some(
+      (r) => g.test(r.name) || r.name === "href" || r.name === "xlink:href"
     )) {
-      e.push(n);
+      e.push(i);
       continue;
     }
-    const a = [];
-    for (const r of n.attributes) {
-      const o = r.name.toLowerCase();
-      if (w.test(o)) {
-        a.push(r.name);
+    const l = [];
+    for (const o of i.attributes) {
+      const r = o.name.toLowerCase();
+      if (g.test(r)) {
+        l.push(o.name);
         continue;
       }
-      if (E.has(o) && v.test(r.value)) {
-        a.push(r.name);
+      if (y.has(r) && C.test(o.value)) {
+        l.push(o.name);
         continue;
       }
-      if (o === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
-        a.push(r.name);
+      if (r === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(o.value)) {
+        l.push(o.name);
         continue;
       }
     }
-    a.forEach((r) => n.removeAttribute(r));
+    l.forEach((o) => i.removeAttribute(o));
   }
-  e.forEach((n) => n.remove());
+  e.forEach((i) => i.remove());
 }
-function S(i, e) {
-  if (!i || i.indexOf("{{") === -1) return i;
-  const t = [], n = i.replace(m, (o, l) => {
-    const d = A(l, e);
-    return t.push({ expr: l.trim(), result: d }), d;
-  }), s = D(n), a = t.length && t.every((o) => o.result === "" || o.result === f);
-  return /Reflect\.|\bProxy\b|ownKeys\(/.test(i) || a ? "" : s;
+function D(n, e) {
+  if (!n || n.indexOf("{{") === -1) return n;
+  const t = [], i = n.replace(x, (r, a) => {
+    const d = S(a, e);
+    return t.push({ expr: a.trim(), result: d }), d;
+  }), s = L(i), l = t.length && t.every((r) => r.result === "" || r.result === u);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(n) || l ? "" : s;
 }
-function A(i, e) {
-  if (i = (i || "").trim(), !i || /\b(Reflect|Proxy|ownKeys)\b/.test(i)) return f;
-  if (i === "value") return e.value == null ? f : String(e.value);
-  if (i.startsWith("row.") && !/[()?]/.test(i) && !i.includes(":")) {
-    const n = i.slice(4), s = e.row ? e.row[n] : void 0;
-    return s == null ? f : String(s);
-  }
-  if (i.length > 80 || !R.test(i) || x.test(i)) return f;
-  const t = i.match(/\./g);
-  if (t && t.length > 1) return f;
+function S(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);
+  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);
+  }
+  if (n.length > 80 || !R.test(n) || E.test(n)) return u;
+  const t = n.match(/\./g);
+  if (t && t.length > 1) return u;
   try {
-    const s = new Function("value", "row", `return (${i});`)(e.value, e.row), a = s == null ? "" : String(s);
-    return /Reflect|Proxy|ownKeys/.test(a) ? f : a || f;
+    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;
   } catch {
-    return f;
+    return u;
   }
 }
-function D(i) {
-  return i && i.replace(new RegExp(f, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+function L(n) {
+  return n && n.replace(new RegExp(u, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
 }
-const H = {
+const I = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -102,7 +102,7 @@ const H = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class _ {
+class T {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -119,8 +119,11 @@ class _ {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -207,12 +210,28 @@ class _ {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
+   */
+  emitCancelable(e, t) {
+    const i = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -247,10 +266,34 @@ class _ {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -278,8 +321,53 @@ class _ {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...H, ...e };
+    return { ...I, ...e };
   }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
+  }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  get animationDuration() {
+    const e = this.gridElement;
+    if (e) {
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
+      if (!isNaN(i)) return i;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -309,33 +397,60 @@ class _ {
   }
   // #endregion
 }
-function p(i, e) {
-  const t = new Set(i);
+const p = "__tbw_expander", H = 32;
+function m(n) {
+  return n.field === p;
+}
+function k(n) {
+  return n.find(m);
+}
+function O(n) {
+  return {
+    field: p,
+    header: "",
+    // No header text - visually merges with next column
+    width: H,
+    resizable: !1,
+    sortable: !1,
+    filterable: !1,
+    // No filter button for expander column
+    meta: {
+      lockPosition: !0,
+      suppressMovable: !0,
+      expanderColumn: !0,
+      expanderPlugin: n,
+      utility: !0
+      // Marks this as a utility column (excluded from selection, clipboard, etc.)
+    }
+  };
+}
+function h(n, e) {
+  const t = new Set(n);
   return t.has(e) ? t.delete(e) : t.add(e), t;
 }
-function k(i, e) {
-  const t = new Set(i);
+function N(n, e) {
+  const t = new Set(n);
   return t.add(e), t;
 }
-function L(i, e) {
-  const t = new Set(i);
+function q(n, e) {
+  const t = new Set(n);
   return t.delete(e), t;
 }
-function T(i, e) {
-  return i.has(e);
+function P(n, e) {
+  return n.has(e);
 }
-function I(i, e, t, n) {
+function M(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 / ${n + 1}`;
-  const r = t(i, e);
-  return typeof r == "string" ? a.innerHTML = r : r instanceof HTMLElement && a.appendChild(r), s.appendChild(a), s;
+  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 O = ".master-detail-cell-wrapper{display:flex;align-items:center;gap:4px}.master-detail-toggle{cursor:pointer;opacity:.7;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}.master-detail-toggle:hover{opacity:1}.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}.master-detail-cell{padding:16px;overflow:auto}.master-detail-row.tbw-expanding{animation:tbw-detail-expand var(--tbw-animation-duration, .2s) var(--tbw-animation-easing, ease-out) forwards}.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:500px;padding-top:16px;padding-bottom:16px}}@keyframes tbw-detail-collapse{0%{opacity:1;max-height:500px}to{opacity:0;max-height:0}}";
-class q extends _ {
+const F = "@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 w extends T {
   name = "masterDetail";
-  version = "1.0.0";
+  styles = F;
   get defaultConfig() {
     return {
       detailHeight: "auto",
@@ -381,52 +496,31 @@ class q extends _ {
     if (!e || typeof e.querySelector != "function") return;
     const t = e.querySelector("tbw-grid-detail");
     if (!t) return;
-    const n = e;
-    if (n.__frameworkAdapter?.parseDetailElement) {
-      const c = n.__frameworkAdapter.parseDetailElement(t);
-      if (c) {
-        this.config = { ...this.config, detailRenderer: c };
+    const i = e;
+    if (i.__frameworkAdapter?.parseDetailElement) {
+      const f = i.__frameworkAdapter.parseDetailElement(t);
+      if (f) {
+        this.config = { ...this.config, detailRenderer: f };
         return;
       }
     }
-    const s = t.getAttribute("animation"), a = t.getAttribute("show-expand-column"), r = t.getAttribute("expand-on-row-click"), o = t.getAttribute("collapse-on-click-outside"), l = t.getAttribute("height"), d = {};
-    s !== null && (d.animation = s === "false" ? !1 : s), a !== null && (d.showExpandColumn = a !== "false"), r !== null && (d.expandOnRowClick = r === "true"), o !== null && (d.collapseOnClickOutside = o === "true"), l !== null && (d.detailHeight = l === "auto" ? "auto" : parseInt(l, 10));
-    const u = t.innerHTML.trim();
-    u && !this.config.detailRenderer && (d.detailRenderer = (c, h) => {
-      const g = S(u, { value: c, row: c });
-      return y(g);
+    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 = (f, G) => {
+      const b = D(c, { value: f, row: f });
+      return _(b);
     }), Object.keys(d).length > 0 && (this.config = { ...this.config, ...d });
   }
   // #endregion
   // #region Animation Helpers
-  /**
-   * Check if animations are enabled at the grid level.
-   * Respects gridConfig.animation.mode and CSS variable.
-   */
-  get isAnimationEnabled() {
-    const t = this.grid.effectiveConfig?.animation?.mode ?? "reduced-motion";
-    if (t === !1 || t === "off") return !1;
-    if (t === !0 || t === "on") return !0;
-    const n = this.shadowRoot?.host;
-    return n ? getComputedStyle(n).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
-  }
   /**
    * Get expand/collapse animation style from plugin config.
+   * Uses base class isAnimationEnabled to respect grid-level settings.
    */
   get animationStyle() {
     return this.isAnimationEnabled ? this.config.animation ?? "slide" : !1;
   }
-  /**
-   * Get animation duration from CSS variable (set by grid).
-   */
-  get animationDuration() {
-    const e = this.shadowRoot?.host;
-    if (e) {
-      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), n = parseInt(t, 10);
-      if (!isNaN(n)) return n;
-    }
-    return 200;
-  }
   /**
    * Apply expand animation to a detail element.
    */
@@ -448,15 +542,34 @@ class q extends _ {
       return;
     }
     e.classList.add("tbw-collapsing");
-    const n = () => {
+    const i = () => {
       e.classList.remove("tbw-collapsing"), t();
     };
-    e.addEventListener("animationend", n, { once: !0 }), setTimeout(n, this.animationDuration + 50);
+    e.addEventListener("animationend", i, { once: !0 }), setTimeout(i, this.animationDuration + 50);
   }
   // #endregion
   // #region Internal State
   expandedRows = /* @__PURE__ */ new Set();
   detailElements = /* @__PURE__ */ new Map();
+  /** Default height for detail rows when not configured */
+  static DEFAULT_DETAIL_HEIGHT = 150;
+  /**
+   * Get the estimated height for a detail row.
+   */
+  getDetailHeight(e) {
+    const t = this.detailElements.get(e);
+    return t ? t.offsetHeight : typeof this.config?.detailHeight == "number" ? this.config.detailHeight : w.DEFAULT_DETAIL_HEIGHT;
+  }
+  /**
+   * Toggle a row's detail and emit event.
+   */
+  toggleAndEmit(e, t) {
+    this.expandedRows = h(this.expandedRows, e), this.emit("detail-expand", {
+      rowIndex: t,
+      row: e,
+      expanded: this.expandedRows.has(e)
+    }), this.requestRender();
+  }
   // #endregion
   // #region Lifecycle
   detach() {
@@ -465,49 +578,36 @@ class q extends _ {
   // #endregion
   // #region Hooks
   processColumns(e) {
-    if (!this.config.detailRenderer)
+    if (!this.config.detailRenderer || this.config.showExpandColumn === !1)
       return [...e];
     const t = [...e];
-    if (t.length > 0) {
-      const n = { ...t[0] }, s = n.viewRenderer;
-      if (s?.__masterDetailWrapped)
-        return t;
-      const a = (r) => {
-        const { value: o, row: l } = r, d = this.expandedRows.has(l), u = document.createElement("span");
-        u.className = "master-detail-cell-wrapper";
-        const c = document.createElement("span");
-        c.className = `master-detail-toggle${d ? " expanded" : ""}`, this.setIcon(c, this.resolveIcon(d ? "collapse" : "expand")), c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-expanded", String(d)), c.setAttribute("aria-label", d ? "Collapse details" : "Expand details"), u.appendChild(c);
-        const h = document.createElement("span");
-        if (s) {
-          const g = s(r);
-          g instanceof Node ? h.appendChild(g) : h.textContent = String(g ?? o ?? "");
-        } else
-          h.textContent = String(o ?? "");
-        return u.appendChild(h), u;
-      };
-      a.__masterDetailWrapped = !0, n.viewRenderer = a, t[0] = n;
-    }
-    return t;
+    if (k(t))
+      return t;
+    const s = O(this.name);
+    return s.viewRenderer = (l) => {
+      const { row: o } = l, r = this.expandedRows.has(o), a = document.createElement("span");
+      a.className = "master-detail-expander expander-cell";
+      const d = document.createElement("span");
+      return d.className = `master-detail-toggle${r ? " expanded" : ""}`, this.setIcon(d, this.resolveIcon(r ? "collapse" : "expand")), d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-expanded", String(r)), d.setAttribute("aria-label", r ? "Collapse details" : "Expand details"), a.appendChild(d), a;
+    }, [s, ...t];
   }
   onRowClick(e) {
     if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
-      return this.expandedRows = p(this.expandedRows, e.row), this.emit("detail-expand", {
-        rowIndex: e.rowIndex,
-        row: e.row,
-        expanded: this.expandedRows.has(e.row)
-      }), this.requestRender(), !1;
+      return this.toggleAndEmit(e.row, e.rowIndex), !1;
   }
   onCellClick(e) {
-    if (e.originalEvent?.target?.classList.contains("master-detail-toggle")) {
-      const n = e.row, s = e.rowIndex;
-      return this.expandedRows = p(this.expandedRows, n), this.emit("detail-expand", {
-        rowIndex: s,
-        row: n,
-        expanded: this.expandedRows.has(n)
-      }), this.requestRender(), !0;
-    }
+    if (e.originalEvent?.target?.classList.contains("master-detail-toggle"))
+      return this.toggleAndEmit(e.row, e.rowIndex), !0;
     this.expandedRows.size > 0 && queueMicrotask(() => this.#e());
   }
+  onKeyDown(e) {
+    if (e.key !== " ") return;
+    const t = this.grid._focusCol, i = this.grid._focusRow, s = this.columns[t];
+    if (!s || !m(s)) return;
+    const l = this.rows[i];
+    if (l)
+      return e.preventDefault(), this.toggleAndEmit(l, i), this.requestRenderWithFocus(), !0;
+  }
   afterRender() {
     this.#e();
   }
@@ -524,28 +624,28 @@ class q extends _ {
    */
   #e() {
     if (!this.config.detailRenderer) return;
-    const e = this.shadowRoot?.querySelector(".rows");
+    const e = this.gridElement?.querySelector(".rows");
     if (!e) return;
-    const t = /* @__PURE__ */ new Map(), n = e.querySelectorAll(".data-grid-row"), s = this.columns.length;
-    for (const r of n) {
-      const o = r.querySelector(".cell[data-row]"), l = o ? parseInt(o.getAttribute("data-row") ?? "-1", 10) : -1;
-      l >= 0 && t.set(l, r);
+    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 a = e.querySelectorAll(".master-detail-row");
-    for (const r of a) {
-      const o = parseInt(r.getAttribute("data-detail-for") ?? "-1", 10), l = o >= 0 ? this.rows[o] : void 0, d = l && this.expandedRows.has(l), u = t.has(o);
-      (!d || !u) && (r.remove(), l && this.detailElements.delete(l));
+    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 [r, o] of t) {
-      const l = this.rows[r];
-      if (!l || !this.expandedRows.has(l)) continue;
-      const d = this.detailElements.get(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 !== o && o.after(d);
+        d.previousElementSibling !== r && r.after(d);
         continue;
       }
-      const u = I(l, r, this.config.detailRenderer, s);
-      typeof this.config.detailHeight == "number" && (u.style.height = `${this.config.detailHeight}px`), o.after(u), this.detailElements.set(l, u), this.animateExpand(u);
+      const c = M(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);
     }
   }
   /**
@@ -554,15 +654,8 @@ class q extends _ {
    */
   getExtraHeight() {
     let e = 0;
-    for (const t of this.expandedRows) {
-      const n = this.detailElements.get(t);
-      if (n)
-        e += n.offsetHeight;
-      else {
-        const s = this.config?.detailHeight;
-        e += typeof s == "number" ? s : 150;
-      }
-    }
+    for (const t of this.expandedRows)
+      e += this.getDetailHeight(t);
     return e;
   }
   /**
@@ -571,17 +664,9 @@ class q extends _ {
    */
   getExtraHeightBefore(e) {
     let t = 0;
-    for (const n of this.expandedRows) {
-      const s = this.rows.indexOf(n);
-      if (s >= 0 && s < e) {
-        const a = this.detailElements.get(n);
-        if (a)
-          t += a.offsetHeight;
-        else {
-          const r = this.config?.detailHeight;
-          t += typeof r == "number" ? r : 150;
-        }
-      }
+    for (const i of this.expandedRows) {
+      const s = this.rows.indexOf(i);
+      s >= 0 && s < e && (t += this.getDetailHeight(i));
     }
     return t;
   }
@@ -589,20 +674,20 @@ class q extends _ {
    * 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, n) {
+  adjustVirtualStart(e, t, i) {
     if (this.expandedRows.size === 0) return e;
     const s = [];
-    for (const o of this.expandedRows) {
-      const l = this.rows.indexOf(o);
-      l >= 0 && s.push({ index: l, row: o });
+    for (const r of this.expandedRows) {
+      const a = this.rows.indexOf(r);
+      a >= 0 && s.push({ index: a, row: r });
     }
-    s.sort((o, l) => o.index - l.index);
-    let a = e, r = 0;
-    for (const { index: o, row: l } of s) {
-      const d = o * n + r, c = this.detailElements.get(l)?.offsetHeight ?? (typeof this.config?.detailHeight == "number" ? this.config.detailHeight : 150), h = d + n + c;
-      r += c, !(o >= e) && h > t && o < a && (a = o);
+    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), f = d + i + c;
+      o += c, !(r >= e) && f > t && r < l && (l = r);
     }
-    return a;
+    return l;
   }
   // #endregion
   // #region Public API
@@ -612,7 +697,7 @@ class q extends _ {
    */
   expand(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = k(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = N(this.expandedRows, t), this.requestRender());
   }
   /**
    * Collapse the detail row at the given index.
@@ -620,7 +705,7 @@ class q extends _ {
    */
   collapse(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = L(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = q(this.expandedRows, t), this.requestRender());
   }
   /**
    * Toggle the detail row at the given index.
@@ -628,7 +713,7 @@ class q extends _ {
    */
   toggle(e) {
     const t = this.rows[e];
-    t && (this.expandedRows = p(this.expandedRows, t), this.requestRender());
+    t && (this.expandedRows = h(this.expandedRows, t), this.requestRender());
   }
   /**
    * Check if the detail row at the given index is expanded.
@@ -637,7 +722,7 @@ class q extends _ {
    */
   isExpanded(e) {
     const t = this.rows[e];
-    return t ? T(this.expandedRows, t) : !1;
+    return t ? P(this.expandedRows, t) : !1;
   }
   /**
    * Expand all detail rows.
@@ -660,8 +745,8 @@ class q extends _ {
   getExpandedRows() {
     const e = [];
     for (const t of this.expandedRows) {
-      const n = this.rows.indexOf(t);
-      n >= 0 && e.push(n);
+      const i = this.rows.indexOf(t);
+      i >= 0 && e.push(i);
     }
     return e;
   }
@@ -689,11 +774,8 @@ class q extends _ {
     }
   }
   // #endregion
-  // #region Styles
-  styles = O;
-  // #endregion
 }
 export {
-  q as MasterDetailPlugin
+  w as MasterDetailPlugin
 };
 //# sourceMappingURL=index.js.map