@toolbox-web/grid-react 1.0.0-rc.1 → 1.0.0-rc.2

package/index.js

@@ -1,37 +1,37 @@
-import { jsx as b, Fragment as ye } from "react/jsx-runtime";
-import { DataGridElement as he } from "@toolbox-web/grid";
-import { createContext as fe, useContext as O, useRef as x, useCallback as P, useEffect as C, forwardRef as Re, useMemo as G, useImperativeHandle as we, Children as Ce, isValidElement as ve, useState as de } from "react";
-import { flushSync as R } from "react-dom";
-import { createRoot as v } from "react-dom/client";
-import { createPluginsFromFeatures as be } from "@toolbox-web/grid/features/registry";
-import { G as Ee } from "./chunks/grid-element-context-BU3WvNtM.js";
-function Pe(n) {
+import { jsx as b, Fragment as re, 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 { createPluginsFromFeatures as Ae } from "@toolbox-web/grid/features/registry";
+import { G as xe } from "./chunks/grid-element-context-BU3WvNtM.js";
+function Te(n) {
   return n.charAt(0).toUpperCase() + n.slice(1);
 }
-function ue(n) {
-  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Pe).join(" ");
-}
-const Se = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function De(n) {
-  const t = n.lastIndexOf(":");
-  if (t > 0) {
-    const e = n.slice(t + 1).toLowerCase();
-    if (Se.has(e)) {
-      const r = n.slice(0, t);
+function pe(n) {
+  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Te).join(" ");
+}
+const Ke = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Ne(n) {
+  const e = n.lastIndexOf(":");
+  if (e > 0) {
+    const t = n.slice(e + 1).toLowerCase();
+    if (Ke.has(t)) {
+      const r = n.slice(0, e);
       return {
         field: r,
-        header: ue(r),
-        type: e
+        header: pe(r),
+        type: t
       };
     }
   }
   return {
     field: n,
-    header: ue(n)
+    header: pe(n)
   };
 }
-function Ge(n) {
-  return n.map((t) => typeof t == "string" ? De(t) : t);
+function Fe(n) {
+  return n.map((e) => typeof e == "string" ? Ne(e) : e);
 }
 const W = {
   onCellClick: "cell-click",
@@ -59,265 +59,285 @@ const W = {
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete"
-}, te = fe(null), xe = ({ icons: n, children: t }) => /* @__PURE__ */ b(te.Provider, { value: n, children: t });
-function st() {
-  return O(te);
-}
-const Ae = te, U = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new Map();
-function ge(n) {
-  const t = n.querySelector("tbw-grid-responsive-card");
-  if (t) {
-    const r = U.get(t);
+}, ne = ye(null), Ie = ({ icons: n, children: e }) => /* @__PURE__ */ b(ne.Provider, { value: n, children: e });
+function pt() {
+  return O(ne);
+}
+const Le = ne, J = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+function Ce(n) {
+  const e = n.querySelector("tbw-grid-responsive-card");
+  if (e) {
+    const r = J.get(e);
     if (r) return r;
   }
-  const e = n.id || n.getAttribute("data-grid-id");
-  if (e)
-    return J.get(e);
+  const t = n.id || n.getAttribute("data-grid-id");
+  if (t)
+    return Y.get(t);
 }
-function Ve(n) {
-  const { children: t, cardRowHeight: e = "auto" } = n, r = x(null), o = P(
+function Me(n) {
+  const { children: e, cardRowHeight: t = "auto" } = n, r = E(null), o = S(
     (c) => {
       if (r.current = c, !c) return;
-      U.set(c, t);
-      const s = c.closest("tbw-grid");
-      if (s) {
-        const u = s.id || s.getAttribute("data-grid-id");
-        u && J.set(u, t);
+      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);
       }
     },
-    [t]
+    [e]
   );
-  C(() => () => {
+  P(() => () => {
     const c = r.current;
     if (c) {
-      U.delete(c);
-      const s = c.closest("tbw-grid");
-      if (s) {
-        const u = s.id || s.getAttribute("data-grid-id");
-        u && J.delete(u);
+      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 = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
+  const s = t === "auto" ? "auto" : String(t);
+  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
 }
-Ve.displayName = "GridResponsiveCard";
-const z = fe(null), Ie = ({ defaults: n, children: t }) => /* @__PURE__ */ b(z.Provider, { value: n, children: t });
-function ct() {
+Me.displayName = "GridResponsiveCard";
+const z = ye(null), He = ({ defaults: n, children: e }) => /* @__PURE__ */ b(z.Provider, { value: n, children: e });
+function mt() {
   return O(z);
 }
-function at(n) {
+function yt(n) {
   return O(z)?.[n];
 }
-const Ne = z, B = /* @__PURE__ */ Symbol("reactProcessed"), A = [];
-function Le(n) {
-  for (let t = A.length - 1; t >= 0; t--) {
-    const e = A[t];
-    if (n.contains(e.container) && e.container.classList.contains("react-cell-editor")) {
-      try {
-        e.root.unmount();
-      } catch {
+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();
+    }));
+  }, f = () => {
+    c.current || (c.current = requestAnimationFrame(() => {
+      c.current = 0;
+      let g = !1;
+      for (const [C, R] of r.current)
+        R.container.isConnected || (r.current.delete(C), g = !0);
+      g && ge(o);
+    }));
+  };
+  ve(
+    t,
+    () => ({
+      renderPortal(g, C, R) {
+        r.current.set(g, { container: C, element: R }), a();
+      },
+      removePortal(g) {
+        r.current.delete(g) && a();
+      },
+      clear() {
+        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), a());
       }
-      A.splice(t, 1);
-    }
+    }),
+    // forceRender is stable (useReducer dispatch), refs are stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  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 = [];
+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));
   }
 }
-function ke(n) {
-  const t = /* @__PURE__ */ new WeakMap();
-  return (e) => {
-    const r = e.cellEl;
+function qe(n) {
+  const e = /* @__PURE__ */ new WeakMap();
+  return (t) => {
+    const r = t.cellEl;
     if (r) {
-      const c = t.get(r);
+      const c = e.get(r);
       if (c)
-        return R(() => {
-          c.root.render(n(e));
-        }), c.container;
+        return w(c.container, n(t), c.portalKey), c.container;
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const a = v(o);
-    return R(() => {
-      a.render(n(e));
-    }), r && t.set(r, { root: a, container: o }), A.push({ root: a, container: o }), o;
+    const s = w(o, n(t));
+    return r && e.set(r, { portalKey: s, container: o }), G.push({ key: s, container: o }), o;
   };
 }
-function Te(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-cell-editor", e.style.display = "contents";
-    const r = v(e);
-    return R(() => {
-      r.render(n(t));
-    }), A.push({ root: r, container: e }), e;
+function _e(n) {
+  return (e) => {
+    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;
   };
 }
-function Fe(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-header-renderer", e.style.display = "contents";
-    const r = v(e);
-    return R(() => {
-      r.render(n(t));
-    }), A.push({ root: r, container: e }), e;
+function $e(n) {
+  return (e) => {
+    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;
   };
 }
-function Me(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-header-label-renderer", e.style.display = "contents";
-    const r = v(e);
-    return R(() => {
-      r.render(n(t));
-    }), A.push({ root: r, container: e }), e;
+function Ve(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;
   };
 }
-function He(n) {
-  return (t) => {
-    const e = n(t);
-    if (e instanceof HTMLElement || typeof e == "string")
-      return e;
+function We(n) {
+  return (e) => {
+    const t = n(e);
+    if (t instanceof HTMLElement || typeof t == "string")
+      return t;
     const r = document.createElement("div");
     r.className = "react-loading-renderer", r.style.display = "contents";
-    const o = v(r);
-    return R(() => {
-      o.render(e);
-    }), A.push({ root: o, container: r }), r;
+    const o = w(r, t);
+    return G.push({ key: o, container: r }), r;
   };
 }
-function pe(n) {
+function Re(n) {
   if (!n) return;
   if (n[B]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
       ...n,
-      loadingRenderer: He(r)
+      loadingRenderer: We(r)
     };
   }
   if (!n.columns) {
     const r = n;
     return r[B] = !0, r;
   }
-  const t = n.columns.map((r) => {
-    const { renderer: o, editor: a, headerRenderer: c, headerLabelRenderer: s, ...u } = r, l = { ...u };
-    return o && (l.renderer = ke(o)), a && (l.editor = Te(a)), c && (l.headerRenderer = Fe(c)), s && (l.headerLabelRenderer = Me(s)), l;
-  }), e = {
+  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;
+  }), t = {
     ...n,
-    columns: t
+    columns: e
   };
-  return e[B] = !0, e;
+  return t[B] = !0, t;
 }
-const Y = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new Map();
-function Oe(n) {
-  const t = n.querySelector("tbw-grid-detail");
-  if (t) {
-    const r = Y.get(t);
+const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
+function Be(n) {
+  const e = n.querySelector("tbw-grid-detail");
+  if (e) {
+    const r = Z.get(e);
     if (r) return r;
   }
-  const e = n.id || n.getAttribute("data-grid-id");
-  if (e)
-    return Z.get(e);
-}
-function je(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = x(null), a = P(
-    (s) => {
-      if (o.current = s, !s) return;
-      Y.set(s, t);
-      const u = s.closest("tbw-grid");
-      if (u) {
-        const l = u.id || u.getAttribute("data-grid-id");
-        l && Z.set(l, t);
+  const t = n.id || n.getAttribute("data-grid-id");
+  if (t)
+    return Q.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);
       }
     },
-    [t]
+    [e]
   );
-  return C(() => () => {
-    const s = o.current;
-    if (s) {
-      Y.delete(s);
-      const u = s.closest("tbw-grid");
-      if (u) {
-        const w = u.id || u.getAttribute("data-grid-id");
-        w && Z.delete(w);
+  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 l = s.parentNode;
-      l && l.contains(s);
+      const d = a.parentNode;
+      d && d.contains(a);
     }
   }, []), /* @__PURE__ */ b(
     "tbw-grid-detail",
     {
-      ref: a,
-      showExpandColumn: e ? void 0 : "false",
+      ref: s,
+      showExpandColumn: t ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
   );
 }
-je.displayName = "GridDetailPanel";
-const Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
-function ze(n) {
-  const t = Q.get(n);
-  if (t) return t;
-  const e = n.id;
-  if (e)
-    return X.get(e);
-}
-function dt(n) {
-  const { id: t, title: e, icon: r, tooltip: o, order: a = 100, children: c } = n, s = x(null), u = P(
-    (l) => {
-      s.current = l, l && (Q.set(l, c), t && X.set(t, c));
+Ue.displayName = "GridDetailPanel";
+const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+function Je(n) {
+  const e = X.get(n);
+  if (e) return e;
+  const t = n.id;
+  if (t)
+    return ee.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(
+    (d) => {
+      a.current = d, d && (X.set(d, c), e && ee.set(e, c));
     },
-    [c, t]
+    [c, e]
   );
-  return C(() => () => {
-    const l = s.current;
-    l && (Q.delete(l), t && X.delete(t));
-  }, [t]), /* @__PURE__ */ b(
+  return P(() => () => {
+    const d = a.current;
+    d && (X.delete(d), e && ee.delete(e));
+  }, [e]), /* @__PURE__ */ b(
     "tbw-grid-tool-panel",
     {
-      ref: u,
-      id: t,
-      title: e,
+      ref: f,
+      id: e,
+      title: t,
       icon: r,
       tooltip: o,
-      order: a?.toString()
+      order: s?.toString()
     }
   );
 }
-const V = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new Map();
-function $e(n, t) {
-  const e = n.getAttribute("field"), r = V.get(n) ?? {};
-  if (r.renderer = t, V.set(n, r), e) {
-    const o = I.get(e) ?? {};
-    o.renderer = t, I.set(e, o);
+const A = /* @__PURE__ */ new WeakMap(), x = /* @__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 = x.get(t) ?? {};
+    o.renderer = e, x.set(t, o);
   }
 }
-function _e(n, t) {
-  const e = n.getAttribute("field"), r = V.get(n) ?? {};
-  if (r.editor = t, V.set(n, r), e) {
-    const o = I.get(e) ?? {};
-    o.editor = t, I.set(e, 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 = x.get(t) ?? {};
+    o.editor = e, x.set(t, o);
   }
 }
-function qe(n) {
-  let t = V.get(n)?.renderer;
-  if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = I.get(e)?.renderer);
+function Qe(n) {
+  let e = A.get(n)?.renderer;
+  if (!e) {
+    const t = n.getAttribute("field");
+    t && (e = x.get(t)?.renderer);
   }
-  return t;
+  return e;
 }
-function We(n) {
-  let t = V.get(n)?.editor;
-  if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = I.get(e)?.editor);
+function Xe(n) {
+  let e = A.get(n)?.editor;
+  if (!e) {
+    const t = n.getAttribute("field");
+    t && (e = x.get(t)?.editor);
   }
-  return t;
-}
-class Be {
-  mountedViews = [];
-  /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
-  editorViews = [];
+  return e;
+}
+class et {
+  /** Portal keys for all managed portals (for cleanup on destroy). */
+  allPortalKeys = /* @__PURE__ */ new Set();
+  /** Portal keys for editor-specific portals (for per-cell cleanup via releaseCell). */
+  editorPortalKeys = /* @__PURE__ */ new Set();
+  /** Maps portal keys to their containers (for container-based lookups in releaseCell/unmount). */
+  keyToContainer = /* @__PURE__ */ new Map();
   typeDefaults = null;
   /**
    * Sets the type defaults map for this adapter.
@@ -325,151 +345,157 @@ class Be {
    *
    * @internal
    */
-  setTypeDefaults(t) {
-    this.typeDefaults = t;
+  setTypeDefaults(e) {
+    this.typeDefaults = e;
   }
   /**
    * FrameworkAdapter.processConfig implementation.
    * Called automatically by the grid's `set gridConfig` setter.
    * Converts React renderer/editor functions to DOM-returning functions.
    */
-  processConfig(t) {
-    return pe(t) ?? t;
+  processConfig(e) {
+    return Re(e) ?? e;
   }
   /**
    * Determines if this adapter can handle the given element.
    * Checks if a renderer or editor is registered for this element.
    */
-  canHandle(t) {
-    const e = t.getAttribute("field");
-    let r = V.get(t);
-    if (!r && e) {
-      const c = I.get(e);
-      c && (c.renderer || c.editor) && (r = c, V.set(t, r));
+  canHandle(e) {
+    const t = e.getAttribute("field");
+    let r = A.get(e);
+    if (!r && t) {
+      const c = x.get(t);
+      c && (c.renderer || c.editor) && (r = c, A.set(e, r));
     }
-    const o = r?.renderer !== void 0, a = r?.editor !== void 0;
-    return r !== void 0 && (o || a);
+    const o = r?.renderer !== void 0, s = r?.editor !== void 0;
+    return r !== void 0 && (o || s);
   }
   /**
    * Creates a view renderer function that renders a React component
    * and returns its container DOM element.
    *
-   * Uses a cell cache to reuse React roots for performance - instead of
-   * creating new roots on each render, we reuse existing ones and just
-   * call root.render() with new data.
+   * Uses a cell cache to reuse portals for performance - instead of
+   * creating new portals on each render, we reuse existing ones and
+   * update their content.
    *
    * Returns undefined if no renderer is registered for this element,
    * allowing the grid to use its default rendering.
    */
-  createRenderer(t) {
-    const e = qe(t);
-    if (!e)
+  createRenderer(e) {
+    const t = Qe(e);
+    if (!t)
       return;
-    const r = /* @__PURE__ */ new WeakMap();
-    return (o) => {
-      const a = o.cellEl;
-      if (a) {
-        const u = r.get(a);
-        if (u)
-          return R(() => {
-            u.root.render(e(o));
-          }), u.container;
-        const l = document.createElement("div");
-        l.className = "react-cell-renderer", l.style.display = "contents";
-        const w = v(l);
-        return R(() => {
-          w.render(e(o));
-        }), r.set(a, { root: w, container: l, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
+    const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
+    return (s) => {
+      const c = s.cellEl;
+      if (c) {
+        const d = o.get(c);
+        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";
+        const C = w(
+          g,
+          t(s),
+          void 0,
+          r ?? void 0
+        );
+        return o.set(c, { portalKey: C, container: g }), this.trackPortal(C, g, !1), g;
       }
-      const c = document.createElement("div");
-      c.className = "react-cell-renderer", c.style.display = "contents";
-      const s = v(c);
-      return R(() => {
-        s.render(e(o));
-      }), this.mountedViews.push({ root: s, container: c }), c;
+      const a = document.createElement("div");
+      a.className = "react-cell-renderer", a.style.display = "contents";
+      const f = w(
+        a,
+        t(s),
+        void 0,
+        r ?? void 0
+      );
+      return this.trackPortal(f, a, !1), a;
     };
   }
   /**
    * Creates an editor spec that renders a React component
    * with commit/cancel callbacks passed as props.
    */
-  createEditor(t) {
-    const e = We(t);
-    return e ? (r) => {
-      const o = document.createElement("div");
-      o.className = "react-cell-editor", o.style.display = "contents";
-      const a = v(o);
-      return R(() => {
-        a.render(e(r));
-      }), this.editorViews.push({ root: a, container: o }), o;
-    } : () => document.createElement("div");
+  createEditor(e) {
+    const t = Xe(e);
+    if (!t)
+      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,
+        t(o),
+        void 0,
+        r
+      );
+      return this.trackPortal(c, s, !0), s;
+    };
   }
   /**
    * Creates a detail renderer function for MasterDetailPlugin.
    * Renders React components for expandable detail rows.
    */
-  createDetailRenderer(t) {
-    const e = Oe(t);
-    if (e)
+  createDetailRenderer(e) {
+    const t = Be(e);
+    if (t)
       return (r, o) => {
-        const a = document.createElement("div");
-        a.className = "react-detail-panel";
-        const c = { row: r, rowIndex: o }, s = v(a);
-        return R(() => {
-          s.render(e(c));
-        }), this.mountedViews.push({ root: s, container: a }), a;
+        const s = document.createElement("div");
+        s.className = "react-detail-panel";
+        const a = w(
+          s,
+          t({ row: r, rowIndex: o }),
+          void 0,
+          e
+        );
+        return this.trackPortal(a, s, !1), s;
       };
   }
   /**
    * Framework adapter hook called by MasterDetailPlugin during attach().
    * Parses the <tbw-grid-detail> element and returns a React-based renderer.
    */
-  parseDetailElement(t) {
-    const e = t.closest("tbw-grid");
-    if (e)
-      return this.createDetailRenderer(e);
+  parseDetailElement(e) {
+    const t = e.closest("tbw-grid");
+    if (t)
+      return this.createDetailRenderer(t);
   }
   /**
    * Creates a responsive card renderer function for ResponsivePlugin.
    * Renders React components for card layout in responsive mode.
    */
-  createResponsiveCardRenderer(t) {
-    const e = ge(t);
-    if (e)
+  createResponsiveCardRenderer(e) {
+    const t = Ce(e);
+    if (t)
       return (r, o) => {
-        const a = document.createElement("div");
-        a.className = "react-responsive-card";
-        const c = { row: r, index: o }, s = v(a);
-        return R(() => {
-          s.render(e(c));
-        }), this.mountedViews.push({ root: s, container: a }), a;
+        const s = document.createElement("div");
+        s.className = "react-responsive-card";
+        const a = w(
+          s,
+          t({ row: r, index: o }),
+          void 0,
+          e
+        );
+        return this.trackPortal(a, s, !1), s;
       };
   }
   /**
    * Creates a tool panel renderer from a light DOM element.
    * Renders React components into tool panel containers.
    */
-  createToolPanelRenderer(t) {
-    const e = ze(t);
-    if (!e)
+  createToolPanelRenderer(e) {
+    const t = Je(e);
+    if (!t)
       return;
-    const r = t.closest("tbw-grid");
+    const r = e.closest("tbw-grid");
     return (o) => {
-      const a = {
+      const c = w(o, t({
         grid: r ?? o
-      }, c = v(o);
-      return R(() => {
-        c.render(e(a));
-      }), this.mountedViews.push({ root: c, container: o }), () => {
-        const s = this.mountedViews.findIndex((u) => u.container === o);
-        if (s !== -1) {
-          const { root: u } = this.mountedViews[s];
-          try {
-            u.unmount();
-          } catch {
-          }
-          this.mountedViews.splice(s, 1);
-        }
+      }), void 0, r ?? void 0);
+      return this.trackPortal(c, o, !1), () => {
+        H(c), this.untrackPortal(c);
       };
     };
   }
@@ -497,191 +523,177 @@ class Be {
    * // Any grid with type: 'country' columns will use these components
    * ```
    */
-  getTypeDefault(t) {
+  getTypeDefault(e, t) {
     if (!this.typeDefaults)
       return;
-    const e = this.typeDefaults[t];
-    if (!e)
+    const r = this.typeDefaults[e];
+    if (!r)
       return;
-    const r = {
-      editorParams: e.editorParams
+    const o = {
+      editorParams: r.editorParams
     };
-    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), e.filterPanelRenderer && (r.filterPanelRenderer = this.createFilterPanelRenderer(e.filterPanelRenderer)), r;
+    return r.renderer && (o.renderer = this.createTypeRenderer(r.renderer, t)), r.editor && (o.editor = this.createTypeEditor(r.editor, t)), r.filterPanelRenderer && (o.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer, t)), o;
   }
   /**
    * Creates a renderer function from a React render function for type defaults.
    * @internal
    */
-  createTypeRenderer(t) {
-    return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const o = v(r);
-      return this.mountedViews.push({ root: o, container: r }), R(() => {
-        o.render(t(e));
-      }), r;
+  createTypeRenderer(e, t) {
+    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;
     };
   }
   /**
    * Creates an editor function from a React render function for type defaults.
    * @internal
    */
-  createTypeEditor(t) {
-    return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const o = v(r);
-      return this.editorViews.push({ root: o, container: r }), R(() => {
-        o.render(t(e));
-      }), r;
+  createTypeEditor(e, t) {
+    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;
     };
   }
   /**
    * Creates a filter panel renderer that mounts React content into the filter panel container.
    * @internal
    */
-  createFilterPanelRenderer(t) {
-    return (e, r) => {
-      const o = document.createElement("div");
-      o.style.display = "contents";
-      const a = v(o);
-      this.mountedViews.push({ root: a, container: o }), R(() => {
-        a.render(t(r));
-      }), e.appendChild(o);
+  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);
     };
   }
+  // #region Portal tracking helpers
+  /** Register a portal key for lifecycle tracking. */
+  trackPortal(e, t, r) {
+    this.allPortalKeys.add(e), this.keyToContainer.set(e, t), r && this.editorPortalKeys.add(e);
+  }
+  /** Unregister a portal key from all tracking sets. */
+  untrackPortal(e) {
+    this.allPortalKeys.delete(e), this.editorPortalKeys.delete(e), this.keyToContainer.delete(e);
+  }
+  // #endregion
   /**
-   * Clean up all mounted React roots.
+   * Clean up all mounted portals.
    * Call this when the grid is unmounted.
    */
   destroy() {
-    this.mountedViews.forEach(({ root: t }) => {
-      try {
-        t.unmount();
-      } catch {
-      }
-    }), this.mountedViews = [], this.editorViews.forEach(({ root: t }) => {
-      try {
-        t.unmount();
-      } catch {
-      }
-    }), this.editorViews = [], I.clear();
+    for (const e of this.allPortalKeys)
+      H(e);
+    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), x.clear();
   }
   /**
    * Called when a cell's content is about to be wiped.
-   * Destroys editor React roots whose container is inside the cell.
+   * Destroys editor portals whose container is inside the cell.
    * Also cleans up config-based editor roots (from processGridConfig/wrapReactEditor)
-   * that bypass the adapter's tracking arrays.
+   * that bypass the adapter's tracking.
    */
-  releaseCell(t) {
-    for (let e = this.editorViews.length - 1; e >= 0; e--) {
-      const { root: r, container: o } = this.editorViews[e];
-      if (t.contains(o)) {
-        try {
-          r.unmount();
-        } catch {
-        }
-        this.editorViews.splice(e, 1);
-      }
+  releaseCell(e) {
+    for (const t of this.editorPortalKeys) {
+      const r = this.keyToContainer.get(t);
+      r && e.contains(r) && (H(t), this.untrackPortal(t));
     }
-    Le(t);
+    ze(e);
   }
   /**
    * Unmount a specific container (called when cell is recycled).
    */
-  unmount(t) {
-    const e = this.mountedViews.findIndex((r) => r.container === t);
-    if (e !== -1) {
-      const { root: r } = this.mountedViews[e];
-      try {
-        r.unmount();
-      } catch {
+  unmount(e) {
+    for (const [t, r] of this.keyToContainer)
+      if (r === e) {
+        H(t), this.untrackPortal(t);
+        return;
       }
-      this.mountedViews.splice(e, 1);
-    }
   }
 }
-const Ke = {
+const tt = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function Ue(n) {
-  const t = new Set(n);
-  for (const e of n) {
-    const r = Ke[e];
+function rt(n) {
+  const e = new Set(n);
+  for (const t of n) {
+    const r = tt[t];
     if (r)
       for (const o of r)
-        t.has(o) || console.warn(
-          `[DataGrid] Feature "${e}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
+        e.has(o) || console.warn(
+          `[DataGrid] Feature "${t}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
         );
   }
 }
-function Je(n) {
-  const t = [];
-  for (const [e, r] of Object.entries(n))
-    r === void 0 || r === !1 || t.push(e);
-  return Ue(t), be(n);
-}
-let le = !1, K = null;
-function ee() {
-  return le || (K = new Be(), he.registerAdapter(K), le = !0), K;
-}
-ee();
-function Ye(n) {
-  const e = n.getPluginByName?.("masterDetail");
-  e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
-}
-function Ze(n, t) {
-  const e = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !ge(n)) return;
-  const a = e.getPluginByName?.("responsive");
-  if (a && typeof a.setCardRenderer == "function") {
-    const c = t.createResponsiveCardRenderer(n);
-    c && a.setCardRenderer(c);
+function nt(n) {
+  const e = [];
+  for (const [t, r] of Object.entries(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;
+}
+te();
+function ot(n) {
+  const t = n.getPluginByName?.("masterDetail");
+  t && typeof t.refreshDetailRenderer == "function" && t.refreshDetailRenderer();
+}
+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);
   }
 }
-function Qe(n) {
-  const t = {};
-  return Ce.forEach(n, (e) => {
-    if (ve(e)) {
-      if (e.type && e.type.displayName === "GridDetailPanel") {
-        const r = e.props;
-        t.masterDetail = {
+function st(n) {
+  const e = {};
+  return Se.forEach(n, (t) => {
+    if (De(t)) {
+      if (t.type && t.type.displayName === "GridDetailPanel") {
+        const r = t.props;
+        e.masterDetail = {
           // Use props from the child component for configuration
           showExpandColumn: r.showExpandColumn ?? !0,
           animation: r.animation ?? "slide"
           // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
         };
       }
-      e.type && e.type.displayName === "GridResponsiveCard" && (t.responsive = !0);
+      t.type && t.type.displayName === "GridResponsiveCard" && (e.responsive = !0);
     }
-  }), t;
+  }), e;
 }
-const ut = Re(function(t, e) {
+const vt = he(function(e, t) {
   const {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: a,
+    columns: s,
     columnDefaults: c,
-    fitMode: s,
-    sortable: u,
-    filterable: l,
-    selectable: w,
-    loading: D,
-    customStyles: S,
-    className: L,
-    style: g,
-    children: h,
+    fitMode: a,
+    sortable: f,
+    filterable: d,
+    selectable: g,
+    loading: C,
+    customStyles: R,
+    className: K,
+    style: p,
+    children: v,
     // Plugin props
-    plugins: m,
+    plugins: y,
     // SSR mode
-    ssr: E,
+    ssr: k,
     // Legacy event handlers
-    onRowsChange: N,
+    onRowsChange: T,
     // Feature props and event props are in ...rest
-    ...y
-  } = t, f = x(null), j = x(null), re = O(Ne), $ = O(Ae), ne = [
+    ...h
+  } = e, u = E(null), j = E(null), oe = O(Oe), q = O(Le), ie = [
     "selection",
     "editing",
     "filtering",
@@ -705,293 +717,303 @@ const ut = Re(function(t, e) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], me = G(() => ne.map((i) => {
-    const d = y[i];
-    return d !== void 0 ? `${i}:${JSON.stringify(d)}` : "";
-  }).filter(Boolean).join("|"), [y]), oe = G(() => {
+  ], we = D(() => ie.map((i) => {
+    const l = h[i];
+    return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
+  }).filter(Boolean).join("|"), [h]), se = D(() => {
     const i = {};
-    for (const d of ne)
-      d in y && y[d] !== void 0 && (i[d] = y[d]);
+    for (const l of ie)
+      l in h && h[l] !== void 0 && (i[l] = h[l]);
     return i;
-  }, [me]), ie = G(() => Qe(h), [h]), se = G(() => ({ ...ie, ...oe }), [oe, ie]), _ = G(() => m || E ? [] : Je(se), [se, m, E]), k = G(() => {
-    if (m) {
-      const i = new Set(m.map((p) => p.name)), d = _.filter((p) => !i.has(p.name));
-      return [...m, ...d];
+  }, [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];
     }
     return _;
-  }, [m, _]), T = G(() => {
-    if (!a) return a;
-    const i = Ge(a);
-    return c ? i.map((d) => ({
+  }, [y, _]), F = D(() => {
+    if (!s) return s;
+    const i = Fe(s);
+    return c ? i.map((l) => ({
       ...c,
-      ...d
+      ...l
       // Individual column props override defaults
     })) : i;
-  }, [a, c]), F = G(() => {
-    const i = pe(o), d = {};
-    if (u !== void 0 && (d.sortable = u), l !== void 0 && (d.filterable = l), w !== void 0 && (d.selectable = w), $) {
-      const p = i?.icons || o?.icons || {};
-      d.icons = { ...$, ...p };
+  }, [s, c]), I = D(() => {
+    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 (k.length > 0 && i) {
-      const p = i.plugins || [], M = new Set(p.map((H) => H.name)), q = k.filter((H) => !M.has(H.name));
+    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));
       return {
         ...i,
-        ...d,
-        plugins: [...p, ...q]
+        ...l,
+        plugins: [...m, ...V]
       };
     }
-    return k.length > 0 && !i ? { ...d, plugins: k } : Object.keys(d).length > 0 ? { ...i, ...d } : i;
-  }, [o, k, u, l, w, $]);
-  C(() => {
-    ee().setTypeDefaults(re);
-  }, [re]), C(() => {
-    f.current && (f.current.rows = r);
-  }, [r]), C(() => {
-    f.current && F && (f.current.gridConfig = F);
-  }, [F]), C(() => {
-    f.current && T && (f.current.columns = T);
-  }, [T]), C(() => {
-    f.current && s !== void 0 && (f.current.fitMode = s);
-  }, [s]), C(() => {
-    f.current && D !== void 0 && (f.current.loading = D);
-  }, [D]), C(() => {
-    const i = f.current;
+    return N.length > 0 && !i ? { ...l, plugins: N } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
+  }, [o, N, f, d, g, q]);
+  P(() => {
+    te().setTypeDefaults(oe);
+  }, [oe]), P(() => {
+    u.current && (u.current.rows = r);
+  }, [r]), P(() => {
+    u.current && I && (u.current.gridConfig = I);
+  }, [I]), P(() => {
+    u.current && F && (u.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);
+  }, [C]), P(() => {
+    const i = u.current;
     if (!i) return;
-    const d = ee();
-    i.__frameworkAdapter = d, Ye(i), Ze(i, d);
-    let p = !1;
-    const M = requestAnimationFrame(() => {
-      p || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+    const l = te();
+    i.__frameworkAdapter = l, ot(i), it(i, l);
+    let m = !1;
+    const L = requestAnimationFrame(() => {
+      m || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
     });
     return () => {
-      p = !0, cancelAnimationFrame(M);
+      m = !0, cancelAnimationFrame(L);
     };
-  }, []), C(() => {
-    if (!f.current || !S) return;
-    const i = f.current, d = "react-custom-styles";
-    let p = !0;
+  }, []), P(() => {
+    if (!u.current || !R) return;
+    const i = u.current, l = "react-custom-styles";
+    let m = !0;
     return i.ready?.().then(() => {
-      p && S && (i.registerStyles?.(d, S), j.current = d);
+      m && R && (i.registerStyles?.(l, R), j.current = l);
     }), () => {
-      p = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
+      m = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
     };
-  }, [S]), C(() => {
-    const i = f.current;
+  }, [R]), P(() => {
+    const i = u.current;
     if (!i) return;
-    const d = [];
-    return N && d.push(i.on("rows-change", (p) => N(p.rows))), () => {
-      d.forEach((p) => p());
+    const l = [];
+    return T && l.push(i.on("rows-change", (m) => T(m.rows))), () => {
+      l.forEach((m) => m());
     };
-  }, [N]);
-  const ce = G(() => Object.keys(W).filter((i) => typeof y[i] == "function").sort().join("|"), [y]), ae = x({});
+  }, [T]);
+  const le = D(() => Object.keys(W).filter((i) => typeof h[i] == "function").sort().join("|"), [h]), de = E({});
   for (const i of Object.keys(W))
-    ae.current[i] = y[i];
-  return C(() => {
-    const i = f.current;
+    de.current[i] = h[i];
+  P(() => {
+    const i = u.current;
     if (!i) return;
-    const d = [];
-    for (const [p, M] of Object.entries(W))
-      ce.includes(p) && d.push(
-        i.on(M, (q, H) => {
-          ae.current[p]?.(q, H);
+    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);
         })
       );
     return () => {
-      d.forEach((p) => p());
+      l.forEach((m) => m());
     };
-  }, [ce]), we(
-    e,
+  }, [le]), ve(
+    t,
     () => ({
       get element() {
-        return f.current;
+        return u.current;
       },
       async getConfig() {
-        return f.current?.getConfig?.() ?? {};
+        return u.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return f.current?.ready?.();
+        return u.current?.ready?.();
       },
       async forceLayout() {
-        return f.current?.forceLayout?.();
+        return u.current?.forceLayout?.();
       },
       async toggleGroup(i) {
-        return f.current?.toggleGroup?.(i);
+        return u.current?.toggleGroup?.(i);
       },
-      registerStyles(i, d) {
-        f.current?.registerStyles?.(i, d);
+      registerStyles(i, l) {
+        u.current?.registerStyles?.(i, l);
       },
       unregisterStyles(i) {
-        f.current?.unregisterStyles?.(i);
+        u.current?.unregisterStyles?.(i);
       },
-      setRowLoading(i, d) {
-        f.current?.setRowLoading?.(i, d);
+      setRowLoading(i, l) {
+        u.current?.setRowLoading?.(i, l);
       },
-      setCellLoading(i, d, p) {
-        f.current?.setCellLoading?.(i, d, p);
+      setCellLoading(i, l, m) {
+        u.current?.setCellLoading?.(i, l, m);
       },
       isRowLoading(i) {
-        return f.current?.isRowLoading?.(i) ?? !1;
+        return u.current?.isRowLoading?.(i) ?? !1;
       },
-      isCellLoading(i, d) {
-        return f.current?.isCellLoading?.(i, d) ?? !1;
+      isCellLoading(i, l) {
+        return u.current?.isCellLoading?.(i, l) ?? !1;
       },
       clearAllLoading() {
-        f.current?.clearAllLoading?.();
+        u.current?.clearAllLoading?.();
       }
     }),
     []
-  ), /* @__PURE__ */ b(
-    "tbw-grid",
-    {
-      ref: (i) => {
-        if (f.current = i, i) {
-          const d = i;
-          F && (d.gridConfig = F), r && (d.rows = r), T && (d.columns = T);
-        }
-      },
-      class: L,
-      style: g,
-      children: /* @__PURE__ */ b(Ee.Provider, { value: f, children: h })
-    }
   );
+  const $ = E(null);
+  return ke(() => {
+    const i = u.current;
+    return i && $.current && fe(i, $.current), () => {
+      i && fe(i, null);
+    };
+  }, []), /* @__PURE__ */ Pe(re, { children: [
+    /* @__PURE__ */ b(je, { ref: $ }),
+    /* @__PURE__ */ b(
+      "tbw-grid",
+      {
+        ref: (i) => {
+          if (u.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(xe.Provider, { value: u, children: v })
+      }
+    )
+  ] });
 });
-function lt(n) {
+function Ct(n) {
   const {
-    field: t,
-    header: e,
+    field: e,
+    header: t,
     type: r,
     editable: o,
-    sortable: a,
+    sortable: s,
     resizable: c,
-    width: s,
-    minWidth: u,
-    hidden: l,
-    lockVisible: w,
-    children: D,
-    editor: S,
-    options: L,
-    multi: g,
-    format: h
-  } = n, m = x(null), E = P(
-    (f) => {
-      m.current = f, f && (D && $e(f, D), S && _e(f, S));
+    width: a,
+    minWidth: f,
+    hidden: d,
+    lockVisible: g,
+    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));
     },
-    [D, S, t]
-  ), N = typeof s == "number" ? `${s}px` : s, y = {
-    field: t,
-    ref: E
+    [C, R, e]
+  ), T = typeof a == "number" ? `${a}px` : a, h = {
+    field: e,
+    ref: k
   };
-  return e !== void 0 && (y.header = e), r !== void 0 && (y.type = r), o !== void 0 && (y.editable = o), a !== void 0 && (y.sortable = a), c !== void 0 && (y.resizable = c), N !== void 0 && (y.width = N), u !== void 0 && (y["min-width"] = u), l !== void 0 && (y.hidden = l), w !== void 0 && (y["lock-visible"] = w), g !== void 0 && (y.multi = g), h && (y["data-has-format"] = "true"), L && (y["data-has-options"] = "true"), /* @__PURE__ */ b("tbw-grid-column", { ...y });
+  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), T !== void 0 && (h.width = T), 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 });
 }
-function ft({ children: n }) {
+function Rt({ children: n }) {
   return /* @__PURE__ */ b("tbw-grid-tool-buttons", { children: n });
 }
-const gt = ({ icons: n, defaults: t, children: e }) => {
-  let r = e;
-  return t && (r = /* @__PURE__ */ b(Ie, { defaults: t, children: r })), n && (r = /* @__PURE__ */ b(xe, { icons: n, children: r })), /* @__PURE__ */ b(ye, { children: r });
+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 });
 };
-function pt(n) {
-  const t = x(null), [e, r] = de(!1), [o, a] = de(null), c = x(null), s = P(() => n ? (c.current ??= document.querySelector(n), c.current) : t.current?.element ?? null, [n]);
-  C(() => {
-    let g = !0;
+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]);
+  P(() => {
+    let p = !0;
     return (async () => {
       try {
         if (n) {
-          const m = document.querySelector(n);
-          if (!m) return;
-          if (c.current = m, await m.ready?.(), g) {
+          const y = document.querySelector(n);
+          if (!y) return;
+          if (c.current = y, await y.ready?.(), p) {
             r(!0);
-            const E = await m.getConfig?.();
-            g && E && a(E);
+            const k = await y.getConfig?.();
+            p && k && s(k);
           }
         } else {
-          const m = t.current;
-          if (!m) return;
-          if (await m.ready?.(), g) {
+          const y = e.current;
+          if (!y) return;
+          if (await y.ready?.(), p) {
             r(!0);
-            const E = await m.getConfig?.();
-            g && E && a(E);
+            const k = await y.getConfig?.();
+            p && k && s(k);
           }
         }
       } catch {
       }
     })(), () => {
-      g = !1;
+      p = !1;
     };
   }, [n]);
-  const u = P(async () => {
-    const g = s();
-    if (g)
-      return await g.getConfig?.() ?? null;
-    const h = t.current;
-    return h ? await h.getConfig?.() ?? null : null;
-  }, [s]), l = P(async () => {
-    const g = s();
-    if (g) {
-      await g.forceLayout?.();
+  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?.();
       return;
     }
-    const h = t.current;
-    h && await h.forceLayout?.();
-  }, [s]), w = P(
-    async (g) => {
-      const h = s();
-      if (h) {
-        await h.toggleGroup?.(g);
+    const v = e.current;
+    v && await v.forceLayout?.();
+  }, [a]), g = S(
+    async (p) => {
+      const v = a();
+      if (v) {
+        await v.toggleGroup?.(p);
         return;
       }
-      const m = t.current;
-      m && await m.toggleGroup?.(g);
+      const y = e.current;
+      y && await y.toggleGroup?.(p);
     },
-    [s]
-  ), D = P(
-    (g, h) => {
-      const m = s();
-      if (m) {
-        m.registerStyles?.(g, h);
+    [a]
+  ), C = S(
+    (p, v) => {
+      const y = a();
+      if (y) {
+        y.registerStyles?.(p, v);
         return;
       }
-      t.current?.registerStyles?.(g, h);
+      e.current?.registerStyles?.(p, v);
     },
-    [s]
-  ), S = P(
-    (g) => {
-      const h = s();
-      if (h) {
-        h.unregisterStyles?.(g);
+    [a]
+  ), R = S(
+    (p) => {
+      const v = a();
+      if (v) {
+        v.unregisterStyles?.(p);
         return;
       }
-      t.current?.unregisterStyles?.(g);
+      e.current?.unregisterStyles?.(p);
     },
-    [s]
-  ), L = P(() => o?.columns ? o.columns.filter((g) => !g.hidden) : [], [o]);
+    [a]
+  ), K = S(() => o?.columns ? o.columns.filter((p) => !p.hidden) : [], [o]);
   return {
-    ref: t,
-    element: s(),
-    isReady: e,
+    ref: e,
+    element: a(),
+    isReady: t,
     config: o,
-    getConfig: u,
-    forceLayout: l,
-    toggleGroup: w,
-    registerStyles: D,
-    unregisterStyles: S,
-    getVisibleColumns: L
+    getConfig: f,
+    forceLayout: d,
+    toggleGroup: g,
+    registerStyles: C,
+    unregisterStyles: R,
+    getVisibleColumns: K
   };
 }
 export {
-  ut as DataGrid,
-  Be as GridAdapter,
-  lt as GridColumn,
-  je as GridDetailPanel,
-  xe as GridIconProvider,
-  gt as GridProvider,
-  Ve as GridResponsiveCard,
-  ft as GridToolButtons,
-  dt as GridToolPanel,
-  Ie as GridTypeProvider,
-  pt as useGrid,
-  st as useGridIcons,
-  ct as useGridTypeDefaults,
-  at as useTypeDefault
+  vt as DataGrid,
+  et as GridAdapter,
+  Ct as GridColumn,
+  Ue as GridDetailPanel,
+  Ie as GridIconProvider,
+  wt as GridProvider,
+  Me as GridResponsiveCard,
+  Rt as GridToolButtons,
+  ht as GridToolPanel,
+  He as GridTypeProvider,
+  Pt as useGrid,
+  pt as useGridIcons,
+  mt as useGridTypeDefaults,
+  yt as useTypeDefault
 };