@toolbox-web/grid-react 1.1.0 → 1.2.0

package/chunks/{portal-bridge-B0mjqzak.js → portal-bridge-DZ4yQkmm.js}

@@ -7,11 +7,11 @@ function w(t, e) {
 }
 function g(t, e) {
   if (e) return e;
-  const n = t.closest("tbw-grid");
-  if (n) return n;
+  const o = t.closest("tbw-grid");
+  if (o) return o;
   if (r.size === 1) return r.keys().next().value;
 }
-function f(t) {
+function u(t) {
   const e = c.get(t);
   if (e) {
     try {
@@ -21,19 +21,19 @@ function f(t) {
     c.delete(t);
   }
 }
-function b(t, e, n, u) {
-  const o = n ?? `p-${m++}`, s = g(t, u), l = s ? r.get(s) : void 0;
-  if (l)
-    f(o), s && i.set(o, s), l.renderPortal(o, t, e);
+function b(t, e, o, l) {
+  const n = o ?? `p-${m++}`, s = g(t, l), f = s ? r.get(s) : void 0;
+  if (f)
+    u(n), s && i.set(n, s), f.renderPortal(n, t, e);
   else {
-    let a = c.get(o);
-    a || (a = p(t), c.set(o, a)), d(() => a.render(e));
+    let a = c.get(n);
+    a || (a = p(t), c.set(n, a)), d(() => a.render(e));
   }
-  return o;
+  return n;
 }
-function x(t) {
-  const e = i.get(t);
-  (e ? r.get(e) : void 0)?.removePortal(t), i.delete(t), f(t);
+function x(t, e) {
+  const o = i.get(t);
+  (o ? r.get(o) : void 0)?.removePortal(t, e?.sync), i.delete(t), u(t);
 }
 export {
   b as a,

package/features/filtering.js

@@ -1,6 +1,6 @@
 import { FilteringPlugin as F } from "@toolbox-web/grid/plugins/filtering";
 import { useContext as G, useCallback as n } from "react";
-import { r as h, a as k } from "../chunks/portal-bridge-B0mjqzak.js";
+import { r as h, a as k } from "../chunks/portal-bridge-DZ4yQkmm.js";
 import { registerFeature as E } from "@toolbox-web/grid/features/registry";
 import { G as R } from "../chunks/grid-element-context-BU3WvNtM.js";
 E("filtering", (l) => {

package/features/grouping-columns.js

@@ -1,5 +1,5 @@
 import { GroupingColumnsPlugin as u } from "@toolbox-web/grid/plugins/grouping-columns";
-import { a as s } from "../chunks/portal-bridge-B0mjqzak.js";
+import { a as s } from "../chunks/portal-bridge-DZ4yQkmm.js";
 import { registerFeature as i } from "@toolbox-web/grid/features/registry";
 function p(n) {
   const e = /* @__PURE__ */ new WeakMap();

package/features/grouping-rows.js

@@ -1,5 +1,5 @@
 import { GroupingRowsPlugin as n } from "@toolbox-web/grid/plugins/grouping-rows";
-import { a as c } from "../chunks/portal-bridge-B0mjqzak.js";
+import { a as c } from "../chunks/portal-bridge-DZ4yQkmm.js";
 import { registerFeature as a } from "@toolbox-web/grid/features/registry";
 a("groupingRows", (r) => {
   if (typeof r == "boolean") return new n();

package/features/pinned-rows.js

@@ -1,6 +1,6 @@
 import "@toolbox-web/grid/features/pinned-rows";
 import { PinnedRowsPlugin as o } from "@toolbox-web/grid/plugins/pinned-rows";
-import { a as u } from "../chunks/portal-bridge-B0mjqzak.js";
+import { a as u } from "../chunks/portal-bridge-DZ4yQkmm.js";
 import { registerFeature as p } from "@toolbox-web/grid/features/registry";
 p("pinnedRows", (n) => {
   if (typeof n == "boolean") return new o();

package/index.js

@@ -1,8 +1,8 @@
-import { jsx as b, Fragment as re, jsxs as Pe } from "react/jsx-runtime";
+import { jsx as b, Fragment as ne, jsxs as Pe } from "react/jsx-runtime";
 import { DataGridElement as be } from "@toolbox-web/grid";
-import { createContext as ye, useContext as O, useRef as E, useCallback as S, useEffect as P, forwardRef as he, useReducer as Ee, useImperativeHandle as ve, useMemo as D, useLayoutEffect as ke, Children as Se, isValidElement as De, useState as ue } from "react";
-import { a as w, r as H, s as fe } from "./chunks/portal-bridge-B0mjqzak.js";
-import { createPortal as Ge, flushSync as ge } from "react-dom";
+import { createContext as ye, useContext as O, useRef as k, useCallback as E, useEffect as P, forwardRef as he, useReducer as Ee, useImperativeHandle as ve, useMemo as S, useLayoutEffect as ke, Children as Se, isValidElement as De, useState as fe } from "react";
+import { a as w, r as H, s as ge } from "./chunks/portal-bridge-DZ4yQkmm.js";
+import { flushSync as V, createPortal as Ge } from "react-dom";
 import { createPluginsFromFeatures as Ae } from "@toolbox-web/grid/features/registry";
 import { G as Te } from "./chunks/grid-element-context-BU3WvNtM.js";
 function xe(n) {
@@ -60,47 +60,47 @@ const W = {
   onPrintStart: "print-start",
   onPrintComplete: "print-complete",
   onTbwScroll: "tbw-scroll"
-}, ne = ye(null), Ie = ({ icons: n, children: e }) => /* @__PURE__ */ b(ne.Provider, { value: n, children: e });
+}, oe = ye(null), Ie = ({ icons: n, children: e }) => /* @__PURE__ */ b(oe.Provider, { value: n, children: e });
 function pt() {
-  return O(ne);
+  return O(oe);
 }
-const Le = ne, J = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+const Le = oe, Y = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new Map();
 function Ce(n) {
   const e = n.querySelector("tbw-grid-responsive-card");
   if (e) {
-    const r = J.get(e);
+    const r = Y.get(e);
     if (r) return r;
   }
   const t = n.id || n.getAttribute("data-grid-id");
   if (t)
-    return Y.get(t);
+    return Z.get(t);
 }
 function Me(n) {
-  const { children: e, cardRowHeight: t = "auto" } = n, r = E(null), o = S(
-    (c) => {
-      if (r.current = c, !c) return;
-      J.set(c, e);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const f = a.id || a.getAttribute("data-grid-id");
-        f && Y.set(f, e);
+  const { children: e, cardRowHeight: t = "auto" } = n, r = k(null), o = E(
+    (a) => {
+      if (r.current = a, !a) return;
+      Y.set(a, e);
+      const s = a.closest("tbw-grid");
+      if (s) {
+        const g = s.id || s.getAttribute("data-grid-id");
+        g && Z.set(g, e);
       }
     },
     [e]
   );
   P(() => () => {
-    const c = r.current;
-    if (c) {
-      J.delete(c);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const f = a.id || a.getAttribute("data-grid-id");
-        f && Y.delete(f);
+    const a = r.current;
+    if (a) {
+      Y.delete(a);
+      const s = a.closest("tbw-grid");
+      if (s) {
+        const g = s.id || s.getAttribute("data-grid-id");
+        g && Z.delete(g);
       }
     }
   }, []);
-  const s = t === "auto" ? "auto" : String(t);
-  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+  const c = t === "auto" ? "auto" : String(t);
+  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: c });
 }
 Me.displayName = "GridResponsiveCard";
 const z = ye(null), He = ({ defaults: n, children: e }) => /* @__PURE__ */ b(z.Provider, { value: n, children: e });
@@ -111,30 +111,30 @@ function yt(n) {
   return O(z)?.[n];
 }
 const Oe = z, je = he(function(e, t) {
-  const r = E(/* @__PURE__ */ new Map()), [, o] = Ee((g) => g + 1, 0), s = E(!1), c = E(0), a = () => {
-    s.current || (s.current = !0, queueMicrotask(() => {
-      s.current = !1, ge(o), f();
+  const r = k(/* @__PURE__ */ new Map()), [, o] = Ee((p) => p + 1, 0), c = k(!1), a = k(0), s = () => {
+    c.current || (c.current = !0, queueMicrotask(() => {
+      c.current = !1, V(o), g();
     }));
-  }, f = () => {
-    c.current || (c.current = requestAnimationFrame(() => {
-      c.current = 0;
-      let g = !1;
+  }, g = () => {
+    a.current || (a.current = requestAnimationFrame(() => {
+      a.current = 0;
+      let p = !1;
       for (const [C, R] of r.current)
-        R.container.isConnected || (r.current.delete(C), g = !0);
-      g && ge(o);
+        R.container.isConnected || (r.current.delete(C), p = !0);
+      p && V(o);
     }));
   };
   ve(
     t,
     () => ({
-      renderPortal(g, C, R) {
-        r.current.set(g, { container: C, element: R }), a();
+      renderPortal(p, C, R) {
+        r.current.set(p, { container: C, element: R }), s();
       },
-      removePortal(g) {
-        r.current.delete(g) && a();
+      removePortal(p, C) {
+        r.current.delete(p) && (C ? V(o) : s());
       },
       clear() {
-        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), a());
+        r.current.size > 0 && (r.current.clear(), a.current && (cancelAnimationFrame(a.current), a.current = 0), s());
       }
     }),
     // forceRender is stable (useReducer dispatch), refs are stable
@@ -142,14 +142,14 @@ const Oe = z, je = he(function(e, t) {
     []
   );
   const d = [];
-  for (const [g, { container: C, element: R }] of r.current)
-    d.push(Ge(R, C, g));
-  return /* @__PURE__ */ b(re, { children: d });
-}), B = /* @__PURE__ */ Symbol("reactProcessed"), G = [];
+  for (const [p, { container: C, element: R }] of r.current)
+    d.push(Ge(R, C, p));
+  return /* @__PURE__ */ b(ne, { children: d });
+}), U = /* @__PURE__ */ Symbol("reactProcessed"), D = [];
 function ze(n) {
-  for (let e = G.length - 1; e >= 0; e--) {
-    const t = G[e];
-    n.contains(t.container) && t.container.classList.contains("react-cell-editor") && (H(t.key), G.splice(e, 1));
+  for (let e = D.length - 1; e >= 0; e--) {
+    const t = D[e];
+    n.contains(t.container) && t.container.classList.contains("react-cell-editor") && (H(t.key), D.splice(e, 1));
   }
 }
 function qe(n) {
@@ -157,14 +157,14 @@ function qe(n) {
   return (t) => {
     const r = t.cellEl;
     if (r) {
-      const c = e.get(r);
-      if (c)
-        return w(c.container, n(t), c.portalKey), c.container;
+      const a = e.get(r);
+      if (a)
+        return w(a.container, n(t), a.portalKey), a.container;
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const s = w(o, n(t));
-    return r && e.set(r, { portalKey: s, container: o }), G.push({ key: s, container: o }), o;
+    const c = w(o, n(t));
+    return r && e.set(r, { portalKey: c, container: o }), D.push({ key: c, container: o }), o;
   };
 }
 function _e(n) {
@@ -172,7 +172,7 @@ function _e(n) {
     const t = document.createElement("div");
     t.className = "react-cell-editor", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
 function $e(n) {
@@ -180,18 +180,18 @@ function $e(n) {
     const t = document.createElement("div");
     t.className = "react-header-renderer", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
-function Ve(n) {
+function Be(n) {
   return (e) => {
     const t = document.createElement("div");
     t.className = "react-header-label-renderer", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
-function We(n) {
+function Ve(n) {
   return (e) => {
     const t = n(e);
     if (t instanceof HTMLElement || typeof t == "string")
@@ -199,136 +199,136 @@ function We(n) {
     const r = document.createElement("div");
     r.className = "react-loading-renderer", r.style.display = "contents";
     const o = w(r, t);
-    return G.push({ key: o, container: r }), r;
+    return D.push({ key: o, container: r }), r;
   };
 }
 function Re(n) {
   if (!n) return;
-  if (n[B]) return n;
+  if (n[U]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
       ...n,
-      loadingRenderer: We(r)
+      loadingRenderer: Ve(r)
     };
   }
   if (!n.columns) {
     const r = n;
-    return r[B] = !0, r;
+    return r[U] = !0, r;
   }
   const e = n.columns.map((r) => {
-    const { renderer: o, editor: s, headerRenderer: c, headerLabelRenderer: a, ...f } = r, d = { ...f };
-    return o && (d.renderer = qe(o)), s && (d.editor = _e(s)), c && (d.headerRenderer = $e(c)), a && (d.headerLabelRenderer = Ve(a)), d;
+    const { renderer: o, editor: c, headerRenderer: a, headerLabelRenderer: s, ...g } = r, d = { ...g };
+    return o && (d.renderer = qe(o)), c && (d.editor = _e(c)), a && (d.headerRenderer = $e(a)), s && (d.headerLabelRenderer = Be(s)), d;
   }), t = {
     ...n,
     columns: e
   };
-  return t[B] = !0, t;
+  return t[U] = !0, t;
 }
-const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
-function Be(n) {
+const Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
+function We(n) {
   const e = n.querySelector("tbw-grid-detail");
   if (e) {
-    const r = Z.get(e);
+    const r = Q.get(e);
     if (r) return r;
   }
   const t = n.id || n.getAttribute("data-grid-id");
   if (t)
-    return Q.get(t);
+    return X.get(t);
 }
 function Ue(n) {
-  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = E(null), s = S(
-    (a) => {
-      if (o.current = a, !a) return;
-      Z.set(a, e);
-      const f = a.closest("tbw-grid");
-      if (f) {
-        const d = f.id || f.getAttribute("data-grid-id");
-        d && Q.set(d, e);
+  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = k(null), c = E(
+    (s) => {
+      if (o.current = s, !s) return;
+      Q.set(s, e);
+      const g = s.closest("tbw-grid");
+      if (g) {
+        const d = g.id || g.getAttribute("data-grid-id");
+        d && X.set(d, e);
       }
     },
     [e]
   );
   return P(() => () => {
-    const a = o.current;
-    if (a) {
-      Z.delete(a);
-      const f = a.closest("tbw-grid");
-      if (f) {
-        const g = f.id || f.getAttribute("data-grid-id");
-        g && Q.delete(g);
+    const s = o.current;
+    if (s) {
+      Q.delete(s);
+      const g = s.closest("tbw-grid");
+      if (g) {
+        const p = g.id || g.getAttribute("data-grid-id");
+        p && X.delete(p);
       }
-      const d = a.parentNode;
-      d && d.contains(a);
+      const d = s.parentNode;
+      d && d.contains(s);
     }
   }, []), /* @__PURE__ */ b(
     "tbw-grid-detail",
     {
-      ref: s,
+      ref: c,
       showExpandColumn: t ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
   );
 }
 Ue.displayName = "GridDetailPanel";
-const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+const ee = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new Map();
 function Je(n) {
-  const e = X.get(n);
+  const e = ee.get(n);
   if (e) return e;
   const t = n.id;
   if (t)
-    return ee.get(t);
+    return te.get(t);
 }
 function ht(n) {
-  const { id: e, title: t, icon: r, tooltip: o, order: s = 100, children: c } = n, a = E(null), f = S(
+  const { id: e, title: t, icon: r, tooltip: o, order: c = 100, children: a } = n, s = k(null), g = E(
     (d) => {
-      a.current = d, d && (X.set(d, c), e && ee.set(e, c));
+      s.current = d, d && (ee.set(d, a), e && te.set(e, a));
     },
-    [c, e]
+    [a, e]
   );
   return P(() => () => {
-    const d = a.current;
-    d && (X.delete(d), e && ee.delete(e));
+    const d = s.current;
+    d && (ee.delete(d), e && te.delete(e));
   }, [e]), /* @__PURE__ */ b(
     "tbw-grid-tool-panel",
     {
-      ref: f,
+      ref: g,
       id: e,
       title: t,
       icon: r,
       tooltip: o,
-      order: s?.toString()
+      order: c?.toString()
     }
   );
 }
-const A = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+const G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
 function Ye(n, e) {
-  const t = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.renderer = e, A.set(n, r), t) {
-    const o = T.get(t) ?? {};
-    o.renderer = e, T.set(t, o);
+  const t = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.renderer = e, G.set(n, r), t) {
+    const o = A.get(t) ?? {};
+    o.renderer = e, A.set(t, o);
   }
 }
 function Ze(n, e) {
-  const t = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.editor = e, A.set(n, r), t) {
-    const o = T.get(t) ?? {};
-    o.editor = e, T.set(t, o);
+  const t = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.editor = e, G.set(n, r), t) {
+    const o = A.get(t) ?? {};
+    o.editor = e, A.set(t, o);
   }
 }
 function Qe(n) {
-  let e = A.get(n)?.renderer;
+  let e = G.get(n)?.renderer;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = T.get(t)?.renderer);
+    t && (e = A.get(t)?.renderer);
   }
   return e;
 }
 function Xe(n) {
-  let e = A.get(n)?.editor;
+  let e = G.get(n)?.editor;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = T.get(t)?.editor);
+    t && (e = A.get(t)?.editor);
   }
   return e;
 }
@@ -363,13 +363,13 @@ class et {
    */
   canHandle(e) {
     const t = e.getAttribute("field");
-    let r = A.get(e);
+    let r = G.get(e);
     if (!r && t) {
-      const c = T.get(t);
-      c && (c.renderer || c.editor) && (r = c, A.set(e, r));
+      const a = A.get(t);
+      a && (a.renderer || a.editor) && (r = a, G.set(e, r));
     }
-    const o = r?.renderer !== void 0, s = r?.editor !== void 0;
-    return r !== void 0 && (o || s);
+    const o = r?.renderer !== void 0, c = r?.editor !== void 0;
+    return r !== void 0 && (o || c);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -387,31 +387,31 @@ class et {
     if (!t)
       return;
     const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
-    return (s) => {
-      const c = s.cellEl;
-      if (c) {
-        const d = o.get(c);
+    return (c) => {
+      const a = c.cellEl;
+      if (a) {
+        const d = o.get(a);
         if (d)
-          return w(d.container, t(s), d.portalKey), d.container;
-        const g = document.createElement("div");
-        g.className = "react-cell-renderer", g.style.display = "contents";
+          return w(d.container, t(c), d.portalKey), d.container;
+        const p = document.createElement("div");
+        p.className = "react-cell-renderer", p.style.display = "contents";
         const C = w(
-          g,
-          t(s),
+          p,
+          t(c),
           void 0,
           r ?? void 0
         );
-        return o.set(c, { portalKey: C, container: g }), this.trackPortal(C, g, !1), g;
+        return o.set(a, { portalKey: C, container: p }), this.trackPortal(C, p, !1), p;
       }
-      const a = document.createElement("div");
-      a.className = "react-cell-renderer", a.style.display = "contents";
-      const f = w(
-        a,
-        t(s),
+      const s = document.createElement("div");
+      s.className = "react-cell-renderer", s.style.display = "contents";
+      const g = w(
+        s,
+        t(c),
         void 0,
         r ?? void 0
       );
-      return this.trackPortal(f, a, !1), a;
+      return this.trackPortal(g, s, !1), s;
     };
   }
   /**
@@ -424,15 +424,15 @@ class et {
       return () => document.createElement("div");
     const r = e.closest("tbw-grid") ?? void 0;
     return (o) => {
-      const s = document.createElement("div");
-      s.className = "react-cell-editor", s.style.display = "contents";
-      const c = w(
-        s,
+      const c = document.createElement("div");
+      c.className = "react-cell-editor", c.style.display = "contents";
+      const a = w(
+        c,
         t(o),
         void 0,
         r
       );
-      return this.trackPortal(c, s, !0), s;
+      return this.trackPortal(a, c, !0), c;
     };
   }
   /**
@@ -440,18 +440,18 @@ class et {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = Be(e);
+    const t = We(e);
     if (t)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-detail-panel";
-        const a = w(
-          s,
+        const c = document.createElement("div");
+        c.className = "react-detail-panel";
+        const s = w(
+          c,
           t({ row: r, rowIndex: o }),
           void 0,
           e
         );
-        return this.trackPortal(a, s, !1), s;
+        return this.trackPortal(s, c, !1), c;
       };
   }
   /**
@@ -471,17 +471,30 @@ class et {
     const t = Ce(e);
     if (t)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-responsive-card";
-        const a = w(
-          s,
+        const c = document.createElement("div");
+        c.className = "react-responsive-card";
+        const s = w(
+          c,
           t({ row: r, index: o }),
           void 0,
           e
         );
-        return this.trackPortal(a, s, !1), s;
+        return this.trackPortal(s, c, !1), c;
       };
   }
+  /**
+   * FrameworkAdapter hook called by ResponsivePlugin during attach().
+   * Parses the `<tbw-grid-responsive-card>` element and delegates to
+   * {@link createResponsiveCardRenderer}. Needed for parity with the Vue
+   * and Angular adapters so ResponsivePlugin's standard lookup path works
+   * for React users as well, not just via the imperative
+   * `refreshResponsiveCardRenderer` hook in DataGrid.
+   */
+  parseResponsiveCardElement(e) {
+    const t = e.closest("tbw-grid");
+    if (t)
+      return this.createResponsiveCardRenderer(t);
+  }
   /**
    * Creates a tool panel renderer from a light DOM element.
    * Renders React components into tool panel containers.
@@ -492,11 +505,11 @@ class et {
       return;
     const r = e.closest("tbw-grid");
     return (o) => {
-      const c = w(o, t({
+      const a = w(o, t({
         grid: r ?? o
       }), void 0, r ?? void 0);
-      return this.trackPortal(c, o, !1), () => {
-        H(c), this.untrackPortal(c);
+      return this.trackPortal(a, o, !1), () => {
+        H(a, { sync: !0 }), this.untrackPortal(a);
       };
     };
   }
@@ -543,8 +556,8 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const s = r.cellEl?.closest("tbw-grid") ?? t, c = w(o, e(r), void 0, s);
-      return this.trackPortal(c, o, !1), o;
+      const c = r.cellEl?.closest("tbw-grid") ?? t, a = w(o, e(r), void 0, c);
+      return this.trackPortal(a, o, !1), o;
     };
   }
   /**
@@ -555,8 +568,8 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const s = w(o, e(r), void 0, t);
-      return this.trackPortal(s, o, !0), o;
+      const c = w(o, e(r), void 0, t);
+      return this.trackPortal(c, o, !0), o;
     };
   }
   /**
@@ -565,10 +578,10 @@ class et {
    */
   createFilterPanelRenderer(e, t) {
     return (r, o) => {
-      const s = document.createElement("div");
-      s.style.display = "contents";
-      const c = r.closest("tbw-grid") ?? t, a = w(s, e(o), void 0, c);
-      this.trackPortal(a, s, !1), r.appendChild(s);
+      const c = document.createElement("div");
+      c.style.display = "contents";
+      const a = r.closest("tbw-grid") ?? t, s = w(c, e(o), void 0, a);
+      this.trackPortal(s, c, !1), r.appendChild(c);
     };
   }
   // #region Portal tracking helpers
@@ -588,7 +601,7 @@ class et {
   destroy() {
     for (const e of this.allPortalKeys)
       H(e);
-    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), T.clear();
+    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), A.clear();
   }
   /**
    * Called when a cell's content is about to be wiped.
@@ -635,11 +648,11 @@ function nt(n) {
     r === void 0 || r === !1 || e.push(t);
   return rt(e), Ae(n);
 }
-let me = !1, U = null;
-function te() {
-  return me || (U = new et(), be.registerAdapter(U), me = !0), U;
+let me = !1, J = null;
+function re() {
+  return me || (J = new et(), be.registerAdapter(J), me = !0), J;
 }
-te();
+re();
 function ot(n) {
   const t = n.getPluginByName?.("masterDetail");
   t && typeof t.refreshDetailRenderer == "function" && t.refreshDetailRenderer();
@@ -647,10 +660,10 @@ function ot(n) {
 function it(n, e) {
   const t = n;
   if (!n.querySelector("tbw-grid-responsive-card") || !Ce(n)) return;
-  const s = t.getPluginByName?.("responsive");
-  if (s && typeof s.setCardRenderer == "function") {
-    const c = e.createResponsiveCardRenderer(n);
-    c && s.setCardRenderer(c);
+  const c = t.getPluginByName?.("responsive");
+  if (c && typeof c.setCardRenderer == "function") {
+    const a = e.createResponsiveCardRenderer(n);
+    a && c.setCardRenderer(a);
   }
 }
 function st(n) {
@@ -675,26 +688,26 @@ const vt = he(function(e, t) {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: s,
-    columnDefaults: c,
-    fitMode: a,
-    sortable: f,
+    columns: c,
+    columnDefaults: a,
+    fitMode: s,
+    sortable: g,
     filterable: d,
-    selectable: g,
+    selectable: p,
     loading: C,
     customStyles: R,
     className: K,
-    style: p,
-    children: v,
+    style: x,
+    children: T,
     // Plugin props
-    plugins: y,
+    plugins: u,
     // SSR mode
-    ssr: k,
+    ssr: h,
     // Legacy event handlers
-    onRowsChange: x,
+    onRowsChange: v,
     // Feature props and event props are in ...rest
-    ...h
-  } = e, u = E(null), j = E(null), oe = O(Oe), q = O(Le), ie = [
+    ...m
+  } = e, f = k(null), j = k(null), ie = O(Oe), q = O(Le), se = [
     "selection",
     "editing",
     "filtering",
@@ -718,163 +731,163 @@ const vt = he(function(e, t) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], we = D(() => ie.map((i) => {
-    const l = h[i];
+  ], we = S(() => se.map((i) => {
+    const l = m[i];
     return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
-  }).filter(Boolean).join("|"), [h]), se = D(() => {
+  }).filter(Boolean).join("|"), [m]), ce = S(() => {
     const i = {};
-    for (const l of ie)
-      l in h && h[l] !== void 0 && (i[l] = h[l]);
+    for (const l of se)
+      l in m && m[l] !== void 0 && (i[l] = m[l]);
     return i;
-  }, [we]), ce = D(() => st(v), [v]), ae = D(() => ({ ...ce, ...se }), [se, ce]), _ = D(() => y || k ? [] : nt(ae), [ae, y, k]), N = D(() => {
-    if (y) {
-      const i = new Set(y.map((m) => m.name)), l = _.filter((m) => !i.has(m.name));
-      return [...y, ...l];
+  }, [we]), ae = S(() => st(T), [T]), le = S(() => ({ ...ae, ...ce }), [ce, ae]), _ = S(() => u || h ? [] : nt(le), [le, u, h]), N = S(() => {
+    if (u) {
+      const i = new Set(u.map((y) => y.name)), l = _.filter((y) => !i.has(y.name));
+      return [...u, ...l];
     }
     return _;
-  }, [y, _]), F = D(() => {
-    if (!s) return s;
-    const i = Fe(s);
-    return c ? i.map((l) => ({
-      ...c,
+  }, [u, _]), F = S(() => {
+    if (!c) return c;
+    const i = Fe(c);
+    return a ? i.map((l) => ({
+      ...a,
       ...l
       // Individual column props override defaults
     })) : i;
-  }, [s, c]), I = D(() => {
+  }, [c, a]), I = S(() => {
     const i = Re(o), l = {};
-    if (f !== void 0 && (l.sortable = f), d !== void 0 && (l.filterable = d), g !== void 0 && (l.selectable = g), q) {
-      const m = i?.icons || o?.icons || {};
-      l.icons = { ...q, ...m };
+    if (g !== void 0 && (l.sortable = g), d !== void 0 && (l.filterable = d), p !== void 0 && (l.selectable = p), q) {
+      const y = i?.icons || o?.icons || {};
+      l.icons = { ...q, ...y };
     }
     if (N.length > 0 && i) {
-      const m = i.plugins || [], L = new Set(m.map((M) => M.name)), V = N.filter((M) => !L.has(M.name));
+      const y = i.plugins || [], L = new Set(y.map((M) => M.name)), B = N.filter((M) => !L.has(M.name));
       return {
         ...i,
         ...l,
-        plugins: [...m, ...V]
+        plugins: [...y, ...B]
       };
     }
     return N.length > 0 && !i ? { ...l, plugins: N } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
-  }, [o, N, f, d, g, q]);
+  }, [o, N, g, d, p, q]);
   P(() => {
-    te().setTypeDefaults(oe);
-  }, [oe]), P(() => {
-    u.current && (u.current.rows = r);
+    re().setTypeDefaults(ie);
+  }, [ie]), P(() => {
+    f.current && (f.current.rows = r);
   }, [r]), P(() => {
-    u.current && I && (u.current.gridConfig = I);
+    f.current && I && (f.current.gridConfig = I);
   }, [I]), P(() => {
-    u.current && F && (u.current.columns = F);
+    f.current && F && (f.current.columns = F);
   }, [F]), P(() => {
-    u.current && a !== void 0 && (u.current.fitMode = a);
-  }, [a]), P(() => {
-    u.current && C !== void 0 && (u.current.loading = C);
+    f.current && s !== void 0 && (f.current.fitMode = s);
+  }, [s]), P(() => {
+    f.current && C !== void 0 && (f.current.loading = C);
   }, [C]), P(() => {
-    const i = u.current;
+    const i = f.current;
     if (!i) return;
-    const l = te();
+    const l = re();
     i.__frameworkAdapter = l, ot(i), it(i, l);
-    let m = !1;
+    let y = !1;
     const L = requestAnimationFrame(() => {
-      m || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+      y || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
     });
     return () => {
-      m = !0, cancelAnimationFrame(L);
+      y = !0, cancelAnimationFrame(L);
     };
   }, []), P(() => {
-    if (!u.current || !R) return;
-    const i = u.current, l = "react-custom-styles";
-    let m = !0;
+    if (!f.current || !R) return;
+    const i = f.current, l = "react-custom-styles";
+    let y = !0;
     return i.ready?.().then(() => {
-      m && R && (i.registerStyles?.(l, R), j.current = l);
+      y && R && (i.registerStyles?.(l, R), j.current = l);
     }), () => {
-      m = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
+      y = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
     };
   }, [R]), P(() => {
-    const i = u.current;
+    const i = f.current;
     if (!i) return;
     const l = [];
-    return x && l.push(i.on("rows-change", (m) => x(m.rows))), () => {
-      l.forEach((m) => m());
+    return v && l.push(i.on("rows-change", (y) => v(y.rows))), () => {
+      l.forEach((y) => y());
     };
-  }, [x]);
-  const le = D(() => Object.keys(W).filter((i) => typeof h[i] == "function").sort().join("|"), [h]), de = E({});
+  }, [v]);
+  const de = S(() => Object.keys(W).filter((i) => typeof m[i] == "function").sort().join("|"), [m]), ue = k({});
   for (const i of Object.keys(W))
-    de.current[i] = h[i];
+    ue.current[i] = m[i];
   P(() => {
-    const i = u.current;
+    const i = f.current;
     if (!i) return;
     const l = [];
-    for (const [m, L] of Object.entries(W))
-      le.includes(m) && l.push(
-        i.on(L, (V, M) => {
-          de.current[m]?.(V, M);
+    for (const [y, L] of Object.entries(W))
+      de.includes(y) && l.push(
+        i.on(L, (B, M) => {
+          ue.current[y]?.(B, M);
         })
       );
     return () => {
-      l.forEach((m) => m());
+      l.forEach((y) => y());
     };
-  }, [le]), ve(
+  }, [de]), ve(
     t,
     () => ({
       get element() {
-        return u.current;
+        return f.current;
       },
       async getConfig() {
-        return u.current?.getConfig?.() ?? {};
+        return f.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return u.current?.ready?.();
+        return f.current?.ready?.();
       },
       async forceLayout() {
-        return u.current?.forceLayout?.();
+        return f.current?.forceLayout?.();
       },
       async toggleGroup(i) {
-        return u.current?.toggleGroup?.(i);
+        return f.current?.toggleGroup?.(i);
       },
       registerStyles(i, l) {
-        u.current?.registerStyles?.(i, l);
+        f.current?.registerStyles?.(i, l);
       },
       unregisterStyles(i) {
-        u.current?.unregisterStyles?.(i);
+        f.current?.unregisterStyles?.(i);
       },
       setRowLoading(i, l) {
-        u.current?.setRowLoading?.(i, l);
+        f.current?.setRowLoading?.(i, l);
       },
-      setCellLoading(i, l, m) {
-        u.current?.setCellLoading?.(i, l, m);
+      setCellLoading(i, l, y) {
+        f.current?.setCellLoading?.(i, l, y);
       },
       isRowLoading(i) {
-        return u.current?.isRowLoading?.(i) ?? !1;
+        return f.current?.isRowLoading?.(i) ?? !1;
       },
       isCellLoading(i, l) {
-        return u.current?.isCellLoading?.(i, l) ?? !1;
+        return f.current?.isCellLoading?.(i, l) ?? !1;
       },
       clearAllLoading() {
-        u.current?.clearAllLoading?.();
+        f.current?.clearAllLoading?.();
       }
     }),
     []
   );
-  const $ = E(null);
+  const $ = k(null);
   return ke(() => {
-    const i = u.current;
-    return i && $.current && fe(i, $.current), () => {
-      i && fe(i, null);
+    const i = f.current;
+    return i && $.current && ge(i, $.current), () => {
+      i && ge(i, null);
     };
-  }, []), /* @__PURE__ */ Pe(re, { children: [
+  }, []), /* @__PURE__ */ Pe(ne, { children: [
     /* @__PURE__ */ b(je, { ref: $ }),
     /* @__PURE__ */ b(
       "tbw-grid",
       {
         ref: (i) => {
-          if (u.current = i, i) {
+          if (f.current = i, i) {
             const l = i;
             I && (l.gridConfig = I), r && (l.rows = r), F && (l.columns = F);
           }
         },
         class: K,
-        style: p,
-        children: /* @__PURE__ */ b(Te.Provider, { value: u, children: v })
+        style: x,
+        children: /* @__PURE__ */ b(Te.Provider, { value: f, children: T })
       }
     )
   ] });
@@ -885,121 +898,129 @@ function Ct(n) {
     header: t,
     type: r,
     editable: o,
-    sortable: s,
-    resizable: c,
-    width: a,
-    minWidth: f,
+    sortable: c,
+    resizable: a,
+    width: s,
+    minWidth: g,
     hidden: d,
-    lockVisible: g,
+    lockVisible: p,
     children: C,
     editor: R,
     options: K,
-    multi: p,
-    format: v
-  } = n, y = E(null), k = S(
-    (u) => {
-      y.current = u, u && (C && Ye(u, C), R && Ze(u, R));
+    multi: x,
+    format: T
+  } = n, u = k(null), h = E(
+    (f) => {
+      u.current = f, f && (C && Ye(f, C), R && Ze(f, R));
     },
     [C, R, e]
-  ), x = typeof a == "number" ? `${a}px` : a, h = {
+  ), v = typeof s == "number" ? `${s}px` : s, m = {
     field: e,
-    ref: k
+    ref: h
   };
-  return t !== void 0 && (h.header = t), r !== void 0 && (h.type = r), o !== void 0 && (h.editable = o), s !== void 0 && (h.sortable = s), c !== void 0 && (h.resizable = c), x !== void 0 && (h.width = x), f !== void 0 && (h["min-width"] = f), d !== void 0 && (h.hidden = d), g !== void 0 && (h["lock-visible"] = g), p !== void 0 && (h.multi = p), v && (h["data-has-format"] = "true"), K && (h["data-has-options"] = "true"), /* @__PURE__ */ b("tbw-grid-column", { ...h });
+  return t !== void 0 && (m.header = t), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), c !== void 0 && (m.sortable = c), a !== void 0 && (m.resizable = a), v !== void 0 && (m.width = v), g !== void 0 && (m["min-width"] = g), d !== void 0 && (m.hidden = d), p !== void 0 && (m["lock-visible"] = p), x !== void 0 && (m.multi = x), T && (m["data-has-format"] = "true"), K && (m["data-has-options"] = "true"), /* @__PURE__ */ b("tbw-grid-column", { ...m });
 }
 function Rt({ children: n }) {
   return /* @__PURE__ */ b("tbw-grid-tool-buttons", { children: n });
 }
 const wt = ({ icons: n, defaults: e, children: t }) => {
   let r = t;
-  return e && (r = /* @__PURE__ */ b(He, { defaults: e, children: r })), n && (r = /* @__PURE__ */ b(Ie, { icons: n, children: r })), /* @__PURE__ */ b(re, { children: r });
+  return e && (r = /* @__PURE__ */ b(He, { defaults: e, children: r })), n && (r = /* @__PURE__ */ b(Ie, { icons: n, children: r })), /* @__PURE__ */ b(ne, { children: r });
 };
 function Pt(n) {
-  const e = E(null), [t, r] = ue(!1), [o, s] = ue(null), c = E(null), a = S(() => n ? (c.current ??= document.querySelector(n), c.current) : e.current?.element ?? null, [n]);
+  const e = k(null), [t, r] = fe(!1), [o, c] = fe(null), a = k(null), s = E(() => n ? (a.current ??= document.querySelector(n), a.current) : e.current?.element ?? null, [n]);
   P(() => {
-    let p = !0;
+    let u = !0;
     return (async () => {
       try {
         if (n) {
-          const y = document.querySelector(n);
-          if (!y) return;
-          if (c.current = y, await y.ready?.(), p) {
+          const v = document.querySelector(n);
+          if (!v) return;
+          if (a.current = v, await v.ready?.(), u) {
             r(!0);
-            const k = await y.getConfig?.();
-            p && k && s(k);
+            const m = await v.getConfig?.();
+            u && m && c(m);
           }
         } else {
-          const y = e.current;
-          if (!y) return;
-          if (await y.ready?.(), p) {
+          const v = e.current;
+          if (!v) return;
+          if (await v.ready?.(), u) {
             r(!0);
-            const k = await y.getConfig?.();
-            p && k && s(k);
+            const m = await v.getConfig?.();
+            u && m && c(m);
           }
         }
       } catch {
       }
     })(), () => {
-      p = !1;
+      u = !1;
     };
   }, [n]);
-  const f = S(async () => {
-    const p = a();
-    if (p)
-      return await p.getConfig?.() ?? null;
-    const v = e.current;
-    return v ? await v.getConfig?.() ?? null : null;
-  }, [a]), d = S(async () => {
-    const p = a();
-    if (p) {
-      await p.forceLayout?.();
+  const g = E(async () => {
+    const u = s();
+    if (u)
+      return await u.getConfig?.() ?? null;
+    const h = e.current;
+    return h ? await h.getConfig?.() ?? null : null;
+  }, [s]), d = E(async () => {
+    const u = s();
+    if (u) {
+      await u.forceLayout?.();
       return;
     }
-    const v = e.current;
-    v && await v.forceLayout?.();
-  }, [a]), g = S(
-    async (p) => {
-      const v = a();
-      if (v) {
-        await v.toggleGroup?.(p);
+    const h = e.current;
+    h && await h.forceLayout?.();
+  }, [s]), p = E(
+    async (u) => {
+      const h = s();
+      if (h) {
+        await h.toggleGroup?.(u);
         return;
       }
-      const y = e.current;
-      y && await y.toggleGroup?.(p);
+      const v = e.current;
+      v && await v.toggleGroup?.(u);
     },
-    [a]
-  ), C = S(
-    (p, v) => {
-      const y = a();
-      if (y) {
-        y.registerStyles?.(p, v);
+    [s]
+  ), C = E(
+    (u) => s()?.getPlugin?.(u),
+    [s]
+  ), R = E(
+    ((u) => s()?.getPluginByName?.(u)),
+    [s]
+  ), K = E(
+    (u, h) => {
+      const v = s();
+      if (v) {
+        v.registerStyles?.(u, h);
         return;
       }
-      e.current?.registerStyles?.(p, v);
+      e.current?.registerStyles?.(u, h);
     },
-    [a]
-  ), R = S(
-    (p) => {
-      const v = a();
-      if (v) {
-        v.unregisterStyles?.(p);
+    [s]
+  ), x = E(
+    (u) => {
+      const h = s();
+      if (h) {
+        h.unregisterStyles?.(u);
         return;
       }
-      e.current?.unregisterStyles?.(p);
+      e.current?.unregisterStyles?.(u);
     },
-    [a]
-  ), K = S(() => o?.columns ? o.columns.filter((p) => !p.hidden) : [], [o]);
+    [s]
+  ), T = E(() => o?.columns ? o.columns.filter((u) => !u.hidden) : [], [o]);
   return {
     ref: e,
-    element: a(),
+    element: s(),
     isReady: t,
     config: o,
-    getConfig: f,
+    getConfig: g,
     forceLayout: d,
-    toggleGroup: g,
-    registerStyles: C,
-    unregisterStyles: R,
-    getVisibleColumns: K
+    toggleGroup: p,
+    getPlugin: C,
+    getPluginByName: R,
+    registerStyles: K,
+    unregisterStyles: x,
+    getVisibleColumns: T
   };
 }
 export {

package/lib/portal-bridge.d.ts

@@ -30,8 +30,14 @@ export declare function getPortalManager(gridEl?: HTMLElement): PortalManagerHan
 export declare function renderToContainer(container: HTMLElement, element: ReactNode, existingKey?: string, gridEl?: HTMLElement): string;
 /**
  * Remove a portal (or fallback root) by key.
+ *
+ * @param options.sync - When true, flush the removal synchronously so the
+ *   caller can safely clear the container DOM immediately after (e.g.,
+ *   tool panel accordion collapse sets `innerHTML = ''`).
  */
-export declare function removeFromContainer(key: string): void;
+export declare function removeFromContainer(key: string, options?: {
+    sync?: boolean;
+}): void;
 /**
  * Remove all portals and fallback roots for a specific grid.
  * Preferred over `clearAllContainers()` in multi-grid scenarios.

package/lib/portal-bridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-bridge.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/portal-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAmB5D;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAM1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAIjF;AAuCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,SAAS,EAClB,WAAW,CAAC,EAAE,MAAM,EACpB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAoBR;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAQrD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAWhE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAczC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAKlC"}
+{"version":3,"file":"portal-bridge.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/portal-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAmB5D;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,mBAAmB,GAAG,IAAI,GAAG,IAAI,CAM1F;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAIjF;AAuCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,SAAS,EAClB,WAAW,CAAC,EAAE,MAAM,EACpB,MAAM,CAAC,EAAE,WAAW,GACnB,MAAM,CAoBR;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAQnF;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAWhE;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAczC;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAED;;;;GAIG;AACH,wBAAgB,WAAW,IAAI,IAAI,CAKlC"}

package/lib/portal-manager.d.ts

@@ -9,8 +9,15 @@ export interface PortalManagerHandle {
      * a single React commit via `flushSync`.
      */
     renderPortal(key: string, container: HTMLElement, element: ReactNode): void;
-    /** Remove a portal by key. */
-    removePortal(key: string): void;
+    /**
+     * Remove a portal by key.
+     * @param key unique key of the portal to remove
+     * @param sync - When true, flush the removal synchronously via `flushSync`
+     *   so the caller can safely mutate the container DOM immediately after.
+     *   Use this in cleanup callbacks that precede external DOM clearing
+     *   (e.g., tool panel accordion collapse sets `innerHTML = ''`).
+     */
+    removePortal(key: string, sync?: boolean): void;
     /** Remove all portals. */
     clear(): void;
 }

package/lib/portal-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-manager.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/portal-manager.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAuD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU5F;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE5E,8BAA8B;IAC9B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAEhC,0BAA0B;IAC1B,KAAK,IAAI,IAAI,CAAC;CACf;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,+FA+ExB,CAAC"}
+{"version":3,"file":"portal-manager.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/portal-manager.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAuD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU5F;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAE5E;;;;;;;OAOG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAEhD,0BAA0B;IAC1B,KAAK,IAAI,IAAI,CAAC;CACf;AAMD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,+FAsFxB,CAAC"}

package/lib/react-grid-adapter.d.ts

@@ -120,6 +120,15 @@ export declare class GridAdapter implements FrameworkAdapter {
      * Renders React components for card layout in responsive mode.
      */
     createResponsiveCardRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
+    /**
+     * FrameworkAdapter hook called by ResponsivePlugin during attach().
+     * Parses the `<tbw-grid-responsive-card>` element and delegates to
+     * {@link createResponsiveCardRenderer}. Needed for parity with the Vue
+     * and Angular adapters so ResponsivePlugin's standard lookup path works
+     * for React users as well, not just via the imperative
+     * `refreshResponsiveCardRenderer` hook in DataGrid.
+     */
+    parseResponsiveCardElement<TRow = unknown>(cardElement: Element): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
     /**
      * Creates a tool panel renderer from a light DOM element.
      * Renders React components into tool panel containers.

package/lib/react-grid-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,UAAU,IAAI,cAAc,EAE5B,gBAAgB,EAChB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAmC,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAmB7F;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAaN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAYN;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYvE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYzE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,WAAY,YAAW,gBAAgB;IAClD,oEAAoE;IACpE,OAAO,CAAC,aAAa,CAAqB;IAC1C,sFAAsF;IACtF,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,iGAAiG;IACjG,OAAO,CAAC,cAAc,CAAkC;IACxD,OAAO,CAAC,YAAY,CAAgC;IAEpD;;;;;OAKG;IACH,eAAe,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAIvD;;;;OAIG;IACH,aAAa,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC;IAIjF;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAoBxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,SAAS;IA8DpH;;;OAGG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA8BpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EACjC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAyB7D;;;OAGG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IAOtE;;;OAGG;IACH,4BAA4B,CAAC,IAAI,GAAG,OAAO,EACzC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAyB7D;;;;;;;OAOG;IACH,0BAA0B,CAAC,IAAI,GAAG,OAAO,EACvC,WAAW,EAAE,OAAO,GACnB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAO7D;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IA0B5G;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS;IAmCjG;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAiB1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAiBxB;;;OAGG;IACH,OAAO,CAAC,yBAAyB;IAmBjC,oDAAoD;IACpD,OAAO,CAAC,WAAW;IAQnB,sDAAsD;IACtD,OAAO,CAAC,aAAa;IAQrB;;;OAGG;IACH,OAAO,IAAI,IAAI;IAWf;;;;;OAKG;IACH,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAYtC;;OAEG;IACH,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAStC"}

package/lib/use-grid.d.ts

@@ -18,6 +18,13 @@ export interface UseGridReturn<TRow = unknown> {
     forceLayout: () => Promise<void>;
     /** Toggle a group row */
     toggleGroup: (key: string) => Promise<void>;
+    /** Get a plugin by its class */
+    getPlugin: <T>(pluginClass: new (...args: unknown[]) => T) => T | undefined;
+    /**
+     * Get a plugin by its registered name (preferred).
+     * Uses the type-safe PluginNameMap for auto-completion and return type narrowing.
+     */
+    getPluginByName: DataGridElement['getPluginByName'];
     /** Register custom styles */
     registerStyles: (id: string, css: string) => void;
     /** Unregister custom styles */

package/lib/use-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/use-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,GAAG,OAAO;IAC3C,2EAA2E;IAC3E,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,qFAAqF;IACrF,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAClD,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,yBAAyB;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,6BAA6B;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,+BAA+B;IAC/B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,OAAO,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CA4I9E"}
+{"version":3,"file":"use-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/use-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,GAAG,OAAO;IAC3C,2EAA2E;IAC3E,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC/C,qFAAqF;IACrF,OAAO,EAAE,eAAe,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACtC,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAClD,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,yBAAyB;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,gCAAgC;IAChC,SAAS,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAC5E;;;OAGG;IACH,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,6BAA6B;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,+BAA+B;IAC/B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,OAAO,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CA8J9E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolbox-web/grid-react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React adapter for @toolbox-web/grid data grid component",
   "type": "module",
   "main": "./index.js",