@toolbox-web/grid-react 0.18.4 → 0.18.5

package/index.js

@@ -1,37 +1,37 @@
-import { jsx as E, Fragment as Re } from "react/jsx-runtime";
-import { DataGridElement as ve } from "@toolbox-web/grid";
-import { createContext as pe, useContext as z, useRef as P, useCallback as h, useEffect as w, forwardRef as Ce, useMemo as G, useImperativeHandle as be, Children as Ee, isValidElement as Se, useState as de } from "react";
-import { flushSync as R } from "react-dom";
-import { createRoot as C } from "react-dom/client";
-import { createPluginsFromFeatures as Pe } from "@toolbox-web/grid/features/registry";
-import { G as xe } from "./chunks/grid-element-context-BU3WvNtM.js";
-function De(n) {
+import { jsx as E, Fragment as ie, jsxs as Se } from "react/jsx-runtime";
+import { DataGridElement as ke } from "@toolbox-web/grid";
+import { createContext as ve, useContext as z, useRef as b, useCallback as C, useEffect as R, forwardRef as Ce, useReducer as xe, useImperativeHandle as Re, useMemo as x, useLayoutEffect as Ge, Children as De, isValidElement as Ae, useState as fe } from "react";
+import { a as w, r as _, s as ge } from "./chunks/portal-bridge-B0mjqzak.js";
+import { createPortal as Te, flushSync as pe } from "react-dom";
+import { createPluginsFromFeatures as Ne } from "@toolbox-web/grid/features/registry";
+import { G as Ke } from "./chunks/grid-element-context-BU3WvNtM.js";
+function Ie(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(De).join(" ");
+function me(n) {
+  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Ie).join(" ");
 }
-const Ge = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function Ae(n) {
-  const t = n.lastIndexOf(":");
-  if (t > 0) {
-    const e = n.slice(t + 1).toLowerCase();
-    if (Ge.has(e)) {
-      const r = n.slice(0, t);
+const Le = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Fe(n) {
+  const e = n.lastIndexOf(":");
+  if (e > 0) {
+    const t = n.slice(e + 1).toLowerCase();
+    if (Le.has(t)) {
+      const r = n.slice(0, e);
       return {
         field: r,
-        header: ue(r),
-        type: e
+        header: me(r),
+        type: t
       };
     }
   }
   return {
     field: n,
-    header: ue(n)
+    header: me(n)
   };
 }
-function Ie(n) {
-  return n.map((t) => typeof t == "string" ? Ae(t) : t);
+function Me(n) {
+  return n.map((e) => typeof e == "string" ? Fe(e) : e);
 }
 const U = {
   onCellClick: "cell-click",
@@ -59,265 +59,285 @@ const U = {
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete"
-}, oe = pe(null), Ve = ({ icons: n, children: t }) => /* @__PURE__ */ E(oe.Provider, { value: n, children: t });
-function at() {
-  return z(oe);
+}, se = ve(null), qe = ({ icons: n, children: e }) => /* @__PURE__ */ E(se.Provider, { value: n, children: e });
+function yt() {
+  return z(se);
 }
-const Ne = oe, Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
-function me(n) {
-  const t = n.querySelector("tbw-grid-responsive-card");
-  if (t) {
-    const r = Z.get(t);
+const He = se, Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
+function we(n) {
+  const e = n.querySelector("tbw-grid-responsive-card");
+  if (e) {
+    const r = Q.get(e);
     if (r) return r;
   }
-  const e = n.id || n.getAttribute("data-grid-id");
-  if (e)
-    return Q.get(e);
+  const t = n.id || n.getAttribute("data-grid-id");
+  if (t)
+    return X.get(t);
 }
-function Le(n) {
-  const { children: t, cardRowHeight: e = "auto" } = n, r = P(null), o = h(
-    (l) => {
-      if (r.current = l, !l) return;
-      Z.set(l, t);
-      const i = l.closest("tbw-grid");
+function Oe(n) {
+  const { children: e, cardRowHeight: t = "auto" } = n, r = b(null), o = C(
+    (c) => {
+      if (r.current = c, !c) return;
+      Q.set(c, e);
+      const i = c.closest("tbw-grid");
       if (i) {
-        const f = i.id || i.getAttribute("data-grid-id");
-        f && Q.set(f, t);
+        const g = i.id || i.getAttribute("data-grid-id");
+        g && X.set(g, e);
       }
     },
-    [t]
+    [e]
   );
-  w(() => () => {
-    const l = r.current;
-    if (l) {
-      Z.delete(l);
-      const i = l.closest("tbw-grid");
+  R(() => () => {
+    const c = r.current;
+    if (c) {
+      Q.delete(c);
+      const i = c.closest("tbw-grid");
       if (i) {
-        const f = i.id || i.getAttribute("data-grid-id");
-        f && Q.delete(f);
+        const g = i.id || i.getAttribute("data-grid-id");
+        g && X.delete(g);
       }
     }
   }, []);
-  const a = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
+  const s = t === "auto" ? "auto" : String(t);
+  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
 }
-Le.displayName = "GridResponsiveCard";
-const $ = pe(null), Te = ({ defaults: n, children: t }) => /* @__PURE__ */ E($.Provider, { value: n, children: t });
-function lt() {
+Oe.displayName = "GridResponsiveCard";
+const $ = ve(null), je = ({ defaults: n, children: e }) => /* @__PURE__ */ E($.Provider, { value: n, children: e });
+function ht() {
   return z($);
 }
-function dt(n) {
+function vt(n) {
   return z($)?.[n];
 }
-const ke = $, K = /* @__PURE__ */ Symbol("reactProcessed"), I = [];
-function Fe(n) {
-  for (let t = I.length - 1; t >= 0; t--) {
-    const e = I[t];
-    if (n.contains(e.container) && e.container.classList.contains("react-cell-editor")) {
-      try {
-        e.root.unmount();
-      } catch {
+const Be = $, _e = Ce(function(e, t) {
+  const r = b(/* @__PURE__ */ new Map()), [, o] = xe((m) => m + 1, 0), s = b(!1), c = b(0), i = () => {
+    s.current || (s.current = !0, queueMicrotask(() => {
+      s.current = !1, pe(o), g();
+    }));
+  }, g = () => {
+    c.current || (c.current = requestAnimationFrame(() => {
+      c.current = 0;
+      let m = !1;
+      for (const [v, P] of r.current)
+        P.container.isConnected || (r.current.delete(v), m = !0);
+      m && pe(o);
+    }));
+  };
+  Re(
+    t,
+    () => ({
+      renderPortal(m, v, P) {
+        r.current.set(m, { container: v, element: P }), i();
+      },
+      removePortal(m) {
+        r.current.delete(m) && i();
+      },
+      clear() {
+        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), i());
       }
-      I.splice(t, 1);
-    }
+    }),
+    // forceRender is stable (useReducer dispatch), refs are stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const f = [];
+  for (const [m, { container: v, element: P }] of r.current)
+    f.push(Te(P, v, m));
+  return /* @__PURE__ */ E(ie, { children: f });
+}), Y = /* @__PURE__ */ Symbol("reactProcessed"), D = [];
+function ze(n) {
+  for (let e = D.length - 1; e >= 0; e--) {
+    const t = D[e];
+    n.contains(t.container) && t.container.classList.contains("react-cell-editor") && (_(t.key), D.splice(e, 1));
   }
 }
-function Me(n) {
-  const t = /* @__PURE__ */ new WeakMap();
-  return (e) => {
-    const r = e.cellEl;
+function $e(n) {
+  const e = /* @__PURE__ */ new WeakMap();
+  return (t) => {
+    const r = t.cellEl;
     if (r) {
-      const l = t.get(r);
-      if (l)
-        return R(() => {
-          l.root.render(n(e));
-        }), l.container;
+      const c = e.get(r);
+      if (c)
+        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 = C(o);
-    return R(() => {
-      a.render(n(e));
-    }), r && t.set(r, { root: a, container: o }), I.push({ root: a, container: o }), o;
+    const s = w(o, n(t));
+    return r && e.set(r, { portalKey: s, container: o }), D.push({ key: s, container: o }), o;
   };
 }
-function He(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-cell-editor", e.style.display = "contents";
-    const r = C(e);
-    return R(() => {
-      r.render(n(t));
-    }), I.push({ root: r, container: e }), e;
+function Ve(n) {
+  return (e) => {
+    const t = document.createElement("div");
+    t.className = "react-cell-editor", t.style.display = "contents";
+    const r = w(t, n(e));
+    return D.push({ key: r, container: t }), t;
   };
 }
-function Oe(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-header-renderer", e.style.display = "contents";
-    const r = C(e);
-    return R(() => {
-      r.render(n(t));
-    }), I.push({ root: r, container: e }), e;
+function We(n) {
+  return (e) => {
+    const t = document.createElement("div");
+    t.className = "react-header-renderer", t.style.display = "contents";
+    const r = w(t, n(e));
+    return D.push({ key: r, container: t }), t;
   };
 }
-function qe(n) {
-  return (t) => {
-    const e = document.createElement("div");
-    e.className = "react-header-label-renderer", e.style.display = "contents";
-    const r = C(e);
-    return R(() => {
-      r.render(n(t));
-    }), I.push({ root: r, container: e }), e;
+function Je(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 D.push({ key: r, container: t }), t;
   };
 }
-function Be(n) {
-  return (t) => {
-    const e = n(t);
-    if (e instanceof HTMLElement || typeof e == "string")
-      return e;
+function Ue(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 = C(r);
-    return R(() => {
-      o.render(e);
-    }), I.push({ root: o, container: r }), r;
+    const o = w(r, t);
+    return D.push({ key: o, container: r }), r;
   };
 }
-function ye(n) {
+function Pe(n) {
   if (!n) return;
-  if (n[K]) return n;
+  if (n[Y]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
       ...n,
-      loadingRenderer: Be(r)
+      loadingRenderer: Ue(r)
     };
   }
   if (!n.columns) {
     const r = n;
-    return r[K] = !0, r;
+    return r[Y] = !0, r;
   }
-  const t = n.columns.map((r) => {
-    const { renderer: o, editor: a, headerRenderer: l, headerLabelRenderer: i, ...f } = r, g = { ...f };
-    return o && (g.renderer = Me(o)), a && (g.editor = He(a)), l && (g.headerRenderer = Oe(l)), i && (g.headerLabelRenderer = qe(i)), g;
-  }), e = {
+  const e = n.columns.map((r) => {
+    const { renderer: o, editor: s, headerRenderer: c, headerLabelRenderer: i, ...g } = r, f = { ...g };
+    return o && (f.renderer = $e(o)), s && (f.editor = Ve(s)), c && (f.headerRenderer = We(c)), i && (f.headerLabelRenderer = Je(i)), f;
+  }), t = {
     ...n,
-    columns: t
+    columns: e
   };
-  return e[K] = !0, e;
+  return t[Y] = !0, t;
 }
-const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
-function je(n) {
-  const t = n.querySelector("tbw-grid-detail");
-  if (t) {
-    const r = X.get(t);
+const ee = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new Map();
+function Ye(n) {
+  const e = n.querySelector("tbw-grid-detail");
+  if (e) {
+    const r = ee.get(e);
     if (r) return r;
   }
-  const e = n.id || n.getAttribute("data-grid-id");
-  if (e)
-    return ee.get(e);
+  const t = n.id || n.getAttribute("data-grid-id");
+  if (t)
+    return te.get(t);
 }
-function _e(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = P(null), a = h(
+function Ze(n) {
+  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = b(null), s = C(
     (i) => {
       if (o.current = i, !i) return;
-      X.set(i, t);
-      const f = i.closest("tbw-grid");
-      if (f) {
-        const g = f.id || f.getAttribute("data-grid-id");
-        g && ee.set(g, t);
+      ee.set(i, e);
+      const g = i.closest("tbw-grid");
+      if (g) {
+        const f = g.id || g.getAttribute("data-grid-id");
+        f && te.set(f, e);
       }
     },
-    [t]
+    [e]
   );
-  return w(() => () => {
+  return R(() => () => {
     const i = o.current;
     if (i) {
-      X.delete(i);
-      const f = i.closest("tbw-grid");
-      if (f) {
-        const v = f.id || f.getAttribute("data-grid-id");
-        v && ee.delete(v);
+      ee.delete(i);
+      const g = i.closest("tbw-grid");
+      if (g) {
+        const m = g.id || g.getAttribute("data-grid-id");
+        m && te.delete(m);
       }
-      const g = i.parentNode;
-      g && g.contains(i);
+      const f = i.parentNode;
+      f && f.contains(i);
     }
   }, []), /* @__PURE__ */ E(
     "tbw-grid-detail",
     {
-      ref: a,
-      showExpandColumn: e ? void 0 : "false",
+      ref: s,
+      showExpandColumn: t ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
   );
 }
-_e.displayName = "GridDetailPanel";
-const te = /* @__PURE__ */ new WeakMap(), re = /* @__PURE__ */ new Map();
-function ze(n) {
-  const t = te.get(n);
-  if (t) return t;
-  const e = n.id;
-  if (e)
-    return re.get(e);
+Ze.displayName = "GridDetailPanel";
+const re = /* @__PURE__ */ new WeakMap(), ne = /* @__PURE__ */ new Map();
+function Qe(n) {
+  const e = re.get(n);
+  if (e) return e;
+  const t = n.id;
+  if (t)
+    return ne.get(t);
 }
-function ut(n) {
-  const { id: t, title: e, icon: r, tooltip: o, order: a = 100, children: l } = n, i = P(null), f = h(
-    (g) => {
-      i.current = g, g && (te.set(g, l), t && re.set(t, l));
+function Ct(n) {
+  const { id: e, title: t, icon: r, tooltip: o, order: s = 100, children: c } = n, i = b(null), g = C(
+    (f) => {
+      i.current = f, f && (re.set(f, c), e && ne.set(e, c));
     },
-    [l, t]
+    [c, e]
   );
-  return w(() => () => {
-    const g = i.current;
-    g && (te.delete(g), t && re.delete(t));
-  }, [t]), /* @__PURE__ */ E(
+  return R(() => () => {
+    const f = i.current;
+    f && (re.delete(f), e && ne.delete(e));
+  }, [e]), /* @__PURE__ */ E(
     "tbw-grid-tool-panel",
     {
-      ref: f,
-      id: t,
-      title: e,
+      ref: g,
+      id: e,
+      title: t,
       icon: r,
       tooltip: o,
-      order: a?.toString()
+      order: s?.toString()
     }
   );
 }
-const V = /* @__PURE__ */ new WeakMap(), N = /* @__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 = N.get(e) ?? {};
-    o.renderer = t, N.set(e, o);
+const A = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+function Xe(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);
   }
 }
-function We(n, t) {
-  const e = n.getAttribute("field"), r = V.get(n) ?? {};
-  if (r.editor = t, V.set(n, r), e) {
-    const o = N.get(e) ?? {};
-    o.editor = t, N.set(e, o);
+function et(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);
   }
 }
-function Je(n) {
-  let t = V.get(n)?.renderer;
-  if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = N.get(e)?.renderer);
+function tt(n) {
+  let e = A.get(n)?.renderer;
+  if (!e) {
+    const t = n.getAttribute("field");
+    t && (e = T.get(t)?.renderer);
   }
-  return t;
+  return e;
 }
-function Ue(n) {
-  let t = V.get(n)?.editor;
-  if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = N.get(e)?.editor);
+function rt(n) {
+  let e = A.get(n)?.editor;
+  if (!e) {
+    const t = n.getAttribute("field");
+    t && (e = T.get(t)?.editor);
   }
-  return t;
+  return e;
 }
-class he {
-  mountedViews = [];
-  /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
-  editorViews = [];
+class be {
+  /** 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 he {
    *
    * @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 ye(t) ?? t;
+  processConfig(e) {
+    return Pe(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 l = N.get(e);
-      l && (l.renderer || l.editor) && (r = l, V.set(t, r));
+  canHandle(e) {
+    const t = e.getAttribute("field");
+    let r = A.get(e);
+    if (!r && t) {
+      const c = T.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 = Je(t);
-    if (!e)
+  createRenderer(e) {
+    const t = tt(e);
+    if (!t)
       return;
-    const r = /* @__PURE__ */ new WeakMap();
-    return (o) => {
-      const a = o.cellEl;
-      if (a) {
-        const f = r.get(a);
+    const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
+    return (s) => {
+      const c = s.cellEl;
+      if (c) {
+        const f = o.get(c);
         if (f)
-          return R(() => {
-            f.root.render(e(o));
-          }), f.container;
-        const g = document.createElement("div");
-        g.className = "react-cell-renderer", g.style.display = "contents";
-        const v = C(g);
-        return R(() => {
-          v.render(e(o));
-        }), r.set(a, { root: v, container: g, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: v, container: g }), g;
+          return w(f.container, t(s), f.portalKey), f.container;
+        const m = document.createElement("div");
+        m.className = "react-cell-renderer", m.style.display = "contents";
+        const v = w(
+          m,
+          t(s),
+          void 0,
+          r ?? void 0
+        );
+        return o.set(c, { portalKey: v, container: m }), this.trackPortal(v, m, !1), m;
       }
-      const l = document.createElement("div");
-      l.className = "react-cell-renderer", l.style.display = "contents";
-      const i = C(l);
-      return R(() => {
-        i.render(e(o));
-      }), this.mountedViews.push({ root: i, container: l }), l;
+      const i = document.createElement("div");
+      i.className = "react-cell-renderer", i.style.display = "contents";
+      const g = w(
+        i,
+        t(s),
+        void 0,
+        r ?? void 0
+      );
+      return this.trackPortal(g, i, !1), i;
     };
   }
   /**
    * Creates an editor spec that renders a React component
    * with commit/cancel callbacks passed as props.
    */
-  createEditor(t) {
-    const e = Ue(t);
-    return e ? (r) => {
-      const o = document.createElement("div");
-      o.className = "react-cell-editor", o.style.display = "contents";
-      const a = C(o);
-      return R(() => {
-        a.render(e(r));
-      }), this.editorViews.push({ root: a, container: o }), o;
-    } : () => document.createElement("div");
+  createEditor(e) {
+    const t = rt(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 = je(t);
-    if (e)
+  createDetailRenderer(e) {
+    const t = Ye(e);
+    if (t)
       return (r, o) => {
-        const a = document.createElement("div");
-        a.className = "react-detail-panel";
-        const l = { row: r, rowIndex: o }, i = C(a);
-        return R(() => {
-          i.render(e(l));
-        }), this.mountedViews.push({ root: i, container: a }), a;
+        const s = document.createElement("div");
+        s.className = "react-detail-panel";
+        const i = w(
+          s,
+          t({ row: r, rowIndex: o }),
+          void 0,
+          e
+        );
+        return this.trackPortal(i, 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 = me(t);
-    if (e)
+  createResponsiveCardRenderer(e) {
+    const t = we(e);
+    if (t)
       return (r, o) => {
-        const a = document.createElement("div");
-        a.className = "react-responsive-card";
-        const l = { row: r, index: o }, i = C(a);
-        return R(() => {
-          i.render(e(l));
-        }), this.mountedViews.push({ root: i, container: a }), a;
+        const s = document.createElement("div");
+        s.className = "react-responsive-card";
+        const i = w(
+          s,
+          t({ row: r, index: o }),
+          void 0,
+          e
+        );
+        return this.trackPortal(i, 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 = Qe(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
-      }, l = C(o);
-      return R(() => {
-        l.render(e(a));
-      }), this.mountedViews.push({ root: l, container: o }), () => {
-        const i = this.mountedViews.findIndex((f) => f.container === o);
-        if (i !== -1) {
-          const { root: f } = this.mountedViews[i];
-          try {
-            f.unmount();
-          } catch {
-          }
-          this.mountedViews.splice(i, 1);
-        }
+      }), void 0, r ?? void 0);
+      return this.trackPortal(c, o, !1), () => {
+        _(c), this.untrackPortal(c);
       };
     };
   }
@@ -497,192 +523,178 @@ class he {
    * // 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 = C(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 = C(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 = C(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, i = w(s, e(o), void 0, c);
+      this.trackPortal(i, 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 = [], N.clear();
+    for (const e of this.allPortalKeys)
+      _(e);
+    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), T.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) && (_(t), this.untrackPortal(t));
     }
-    Fe(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) {
+        _(t), this.untrackPortal(t);
+        return;
       }
-      this.mountedViews.splice(e, 1);
-    }
   }
 }
-const ft = he, Ke = {
+const Rt = be, nt = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function Ye(n) {
-  const t = new Set(n);
-  for (const e of n) {
-    const r = Ke[e];
+function ot(n) {
+  const e = new Set(n);
+  for (const t of n) {
+    const r = nt[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 Ze(n) {
-  const t = [];
-  for (const [e, r] of Object.entries(n))
-    r === void 0 || r === !1 || t.push(e);
-  return Ye(t), Pe(n);
+function it(n) {
+  const e = [];
+  for (const [t, r] of Object.entries(n))
+    r === void 0 || r === !1 || e.push(t);
+  return ot(e), Ne(n);
 }
-let fe = !1, Y = null;
-function ne() {
-  return fe || (Y = new he(), ve.registerAdapter(Y), fe = !0), Y;
+let ye = !1, Z = null;
+function oe() {
+  return ye || (Z = new be(), ke.registerAdapter(Z), ye = !0), Z;
 }
-ne();
-function Qe(n) {
-  const e = n.getPluginByName?.("masterDetail");
-  e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
+oe();
+function st(n) {
+  const t = n.getPluginByName?.("masterDetail");
+  t && typeof t.refreshDetailRenderer == "function" && t.refreshDetailRenderer();
 }
-function Xe(n, t) {
-  const e = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !me(n)) return;
-  const a = e.getPluginByName?.("responsive");
-  if (a && typeof a.setCardRenderer == "function") {
-    const l = t.createResponsiveCardRenderer(n);
-    l && a.setCardRenderer(l);
+function ct(n, e) {
+  const t = n;
+  if (!n.querySelector("tbw-grid-responsive-card") || !we(n)) return;
+  const s = t.getPluginByName?.("responsive");
+  if (s && typeof s.setCardRenderer == "function") {
+    const c = e.createResponsiveCardRenderer(n);
+    c && s.setCardRenderer(c);
   }
 }
-function et(n) {
-  const t = {};
-  return Ee.forEach(n, (e) => {
-    if (Se(e)) {
-      if (e.type && e.type.displayName === "GridDetailPanel") {
-        const r = e.props;
-        t.masterDetail = {
+function at(n) {
+  const e = {};
+  return De.forEach(n, (t) => {
+    if (Ae(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 gt = Ce(function(t, e) {
+const wt = Ce(function(e, t) {
   const {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: a,
-    columnDefaults: l,
+    columns: s,
+    columnDefaults: c,
     fitMode: i,
-    sortable: f,
-    filterable: g,
-    selectable: v,
-    loading: x,
-    editOn: D,
-    customStyles: A,
-    className: k,
-    style: M,
-    children: L,
+    sortable: g,
+    filterable: f,
+    selectable: m,
+    loading: v,
+    editOn: P,
+    customStyles: G,
+    className: I,
+    style: F,
+    children: N,
     // Plugin props
-    plugins: S,
+    plugins: k,
     // SSR mode
-    ssr: T,
+    ssr: K,
     // Legacy event handlers
-    onRowsChange: y,
+    onRowsChange: h,
     // Feature props and event props are in ...rest
     ...d
-  } = t, s = P(null), p = P(null), b = z(ke), H = z(Ne), F = [
+  } = e, l = b(null), p = b(null), S = z(Be), M = z(He), L = [
     "selection",
     "editing",
     "filtering",
@@ -712,215 +724,225 @@ const gt = Ce(function(t, e) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], we = G(() => F.map((c) => {
-    const u = d[c];
-    return u !== void 0 ? `${c}:${JSON.stringify(u)}` : "";
-  }).filter(Boolean).join("|"), [d]), ie = G(() => {
-    const c = {};
-    for (const u of F)
-      u in d && d[u] !== void 0 && (c[u] = d[u]);
-    return c;
-  }, [we]), se = G(() => et(L), [L]), ce = G(() => ({ ...se, ...ie }), [ie, se]), W = G(() => S || T ? [] : Ze(ce), [ce, S, T]), O = G(() => {
-    if (S) {
-      const c = new Set(S.map((m) => m.name)), u = W.filter((m) => !c.has(m.name));
-      return [...S, ...u];
+  ], Ee = x(() => L.map((a) => {
+    const u = d[a];
+    return u !== void 0 ? `${a}:${JSON.stringify(u)}` : "";
+  }).filter(Boolean).join("|"), [d]), ce = x(() => {
+    const a = {};
+    for (const u of L)
+      u in d && d[u] !== void 0 && (a[u] = d[u]);
+    return a;
+  }, [Ee]), ae = x(() => at(N), [N]), le = x(() => ({ ...ae, ...ce }), [ce, ae]), V = x(() => k || K ? [] : it(le), [le, k, K]), q = x(() => {
+    if (k) {
+      const a = new Set(k.map((y) => y.name)), u = V.filter((y) => !a.has(y.name));
+      return [...k, ...u];
     }
-    return W;
-  }, [S, W]), q = G(() => {
-    if (!a) return a;
-    const c = Ie(a);
-    return l ? c.map((u) => ({
-      ...l,
+    return V;
+  }, [k, V]), H = x(() => {
+    if (!s) return s;
+    const a = Me(s);
+    return c ? a.map((u) => ({
+      ...c,
       ...u
       // Individual column props override defaults
-    })) : c;
-  }, [a, l]), B = G(() => {
-    const c = ye(o), u = {};
-    if (f !== void 0 && (u.sortable = f), g !== void 0 && (u.filterable = g), v !== void 0 && (u.selectable = v), H) {
-      const m = c?.icons || o?.icons || {};
-      u.icons = { ...H, ...m };
+    })) : a;
+  }, [s, c]), O = x(() => {
+    const a = Pe(o), u = {};
+    if (g !== void 0 && (u.sortable = g), f !== void 0 && (u.filterable = f), m !== void 0 && (u.selectable = m), M) {
+      const y = a?.icons || o?.icons || {};
+      u.icons = { ...M, ...y };
     }
-    if (O.length > 0 && c) {
-      const m = c.plugins || [], j = new Set(m.map((_) => _.name)), J = O.filter((_) => !j.has(_.name));
+    if (q.length > 0 && a) {
+      const y = a.plugins || [], j = new Set(y.map((B) => B.name)), J = q.filter((B) => !j.has(B.name));
       return {
-        ...c,
+        ...a,
         ...u,
-        plugins: [...m, ...J]
+        plugins: [...y, ...J]
       };
     }
-    return O.length > 0 && !c ? { ...u, plugins: O } : Object.keys(u).length > 0 ? { ...c, ...u } : c;
-  }, [o, O, f, g, v, H]);
-  w(() => {
-    ne().setTypeDefaults(b);
-  }, [b]), w(() => {
-    s.current && (s.current.rows = r);
-  }, [r]), w(() => {
-    s.current && B && (s.current.gridConfig = B);
-  }, [B]), w(() => {
-    s.current && q && (s.current.columns = q);
-  }, [q]), w(() => {
-    s.current && i !== void 0 && (s.current.fitMode = i);
-  }, [i]), w(() => {
-    s.current && D !== void 0 && (s.current.editOn = D);
-  }, [D]), w(() => {
-    s.current && x !== void 0 && (s.current.loading = x);
-  }, [x]), w(() => {
-    const c = s.current;
-    if (!c) return;
-    const u = ne();
-    c.__frameworkAdapter = u, Qe(c), Xe(c, u);
-    let m = !1;
+    return q.length > 0 && !a ? { ...u, plugins: q } : Object.keys(u).length > 0 ? { ...a, ...u } : a;
+  }, [o, q, g, f, m, M]);
+  R(() => {
+    oe().setTypeDefaults(S);
+  }, [S]), R(() => {
+    l.current && (l.current.rows = r);
+  }, [r]), R(() => {
+    l.current && O && (l.current.gridConfig = O);
+  }, [O]), R(() => {
+    l.current && H && (l.current.columns = H);
+  }, [H]), R(() => {
+    l.current && i !== void 0 && (l.current.fitMode = i);
+  }, [i]), R(() => {
+    l.current && P !== void 0 && (l.current.editOn = P);
+  }, [P]), R(() => {
+    l.current && v !== void 0 && (l.current.loading = v);
+  }, [v]), R(() => {
+    const a = l.current;
+    if (!a) return;
+    const u = oe();
+    a.__frameworkAdapter = u, st(a), ct(a, u);
+    let y = !1;
     const j = requestAnimationFrame(() => {
-      m || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
+      y || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
     });
     return () => {
-      m = !0, cancelAnimationFrame(j);
+      y = !0, cancelAnimationFrame(j);
     };
-  }, []), w(() => {
-    if (!s.current || !A) return;
-    const c = s.current, u = "react-custom-styles";
-    let m = !0;
-    return c.ready?.().then(() => {
-      m && A && (c.registerStyles?.(u, A), p.current = u);
+  }, []), R(() => {
+    if (!l.current || !G) return;
+    const a = l.current, u = "react-custom-styles";
+    let y = !0;
+    return a.ready?.().then(() => {
+      y && G && (a.registerStyles?.(u, G), p.current = u);
     }), () => {
-      m = !1, p.current && (c.unregisterStyles?.(p.current), p.current = null);
+      y = !1, p.current && (a.unregisterStyles?.(p.current), p.current = null);
     };
-  }, [A]), w(() => {
-    const c = s.current;
-    if (!c) return;
+  }, [G]), R(() => {
+    const a = l.current;
+    if (!a) return;
     const u = [];
-    return y && u.push(c.on("rows-change", (m) => y(m.rows))), () => {
-      u.forEach((m) => m());
+    return h && u.push(a.on("rows-change", (y) => h(y.rows))), () => {
+      u.forEach((y) => y());
     };
-  }, [y]);
-  const ae = G(() => Object.keys(U).filter((c) => typeof d[c] == "function").sort().join("|"), [d]), le = P({});
-  for (const c of Object.keys(U))
-    le.current[c] = d[c];
-  return w(() => {
-    const c = s.current;
-    if (!c) return;
+  }, [h]);
+  const de = x(() => Object.keys(U).filter((a) => typeof d[a] == "function").sort().join("|"), [d]), ue = b({});
+  for (const a of Object.keys(U))
+    ue.current[a] = d[a];
+  R(() => {
+    const a = l.current;
+    if (!a) return;
     const u = [];
-    for (const [m, j] of Object.entries(U))
-      ae.includes(m) && u.push(
-        c.on(j, (J, _) => {
-          le.current[m]?.(J, _);
+    for (const [y, j] of Object.entries(U))
+      de.includes(y) && u.push(
+        a.on(j, (J, B) => {
+          ue.current[y]?.(J, B);
         })
       );
     return () => {
-      u.forEach((m) => m());
+      u.forEach((y) => y());
     };
-  }, [ae]), be(
-    e,
+  }, [de]), Re(
+    t,
     () => ({
       get element() {
-        return s.current;
+        return l.current;
       },
       async getConfig() {
-        return s.current?.getConfig?.() ?? {};
+        return l.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return s.current?.ready?.();
+        return l.current?.ready?.();
       },
       async forceLayout() {
-        return s.current?.forceLayout?.();
+        return l.current?.forceLayout?.();
       },
-      async toggleGroup(c) {
-        return s.current?.toggleGroup?.(c);
+      async toggleGroup(a) {
+        return l.current?.toggleGroup?.(a);
       },
-      registerStyles(c, u) {
-        s.current?.registerStyles?.(c, u);
+      registerStyles(a, u) {
+        l.current?.registerStyles?.(a, u);
       },
-      unregisterStyles(c) {
-        s.current?.unregisterStyles?.(c);
+      unregisterStyles(a) {
+        l.current?.unregisterStyles?.(a);
       },
-      setRowLoading(c, u) {
-        s.current?.setRowLoading?.(c, u);
+      setRowLoading(a, u) {
+        l.current?.setRowLoading?.(a, u);
       },
-      setCellLoading(c, u, m) {
-        s.current?.setCellLoading?.(c, u, m);
+      setCellLoading(a, u, y) {
+        l.current?.setCellLoading?.(a, u, y);
       },
-      isRowLoading(c) {
-        return s.current?.isRowLoading?.(c) ?? !1;
+      isRowLoading(a) {
+        return l.current?.isRowLoading?.(a) ?? !1;
       },
-      isCellLoading(c, u) {
-        return s.current?.isCellLoading?.(c, u) ?? !1;
+      isCellLoading(a, u) {
+        return l.current?.isCellLoading?.(a, u) ?? !1;
       },
       clearAllLoading() {
-        s.current?.clearAllLoading?.();
+        l.current?.clearAllLoading?.();
       }
     }),
     []
-  ), /* @__PURE__ */ E(
-    "tbw-grid",
-    {
-      ref: (c) => {
-        if (s.current = c, c) {
-          const u = c;
-          B && (u.gridConfig = B), r && (u.rows = r), q && (u.columns = q);
-        }
-      },
-      class: k,
-      style: M,
-      children: /* @__PURE__ */ E(xe.Provider, { value: s, children: L })
-    }
   );
+  const W = b(null);
+  return Ge(() => {
+    const a = l.current;
+    return a && W.current && ge(a, W.current), () => {
+      a && ge(a, null);
+    };
+  }, []), /* @__PURE__ */ Se(ie, { children: [
+    /* @__PURE__ */ E(_e, { ref: W }),
+    /* @__PURE__ */ E(
+      "tbw-grid",
+      {
+        ref: (a) => {
+          if (l.current = a, a) {
+            const u = a;
+            O && (u.gridConfig = O), r && (u.rows = r), H && (u.columns = H);
+          }
+        },
+        class: I,
+        style: F,
+        children: /* @__PURE__ */ E(Ke.Provider, { value: l, children: N })
+      }
+    )
+  ] });
 });
-function pt(n) {
+function Pt(n) {
   const {
-    field: t,
-    header: e,
+    field: e,
+    header: t,
     type: r,
     editable: o,
-    sortable: a,
-    resizable: l,
+    sortable: s,
+    resizable: c,
     width: i,
-    minWidth: f,
-    hidden: g,
-    lockVisible: v,
-    children: x,
-    editor: D,
-    options: A,
-    multi: k,
-    format: M
-  } = n, L = P(null), S = h(
+    minWidth: g,
+    hidden: f,
+    lockVisible: m,
+    children: v,
+    editor: P,
+    options: G,
+    multi: I,
+    format: F
+  } = n, N = b(null), k = C(
     (d) => {
-      L.current = d, d && (x && $e(d, x), D && We(d, D));
+      N.current = d, d && (v && Xe(d, v), P && et(d, P));
     },
-    [x, D, t]
-  ), T = typeof i == "number" ? `${i}px` : i, y = {
-    field: t,
-    ref: S
+    [v, P, e]
+  ), K = typeof i == "number" ? `${i}px` : i, 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), l !== void 0 && (y.resizable = l), T !== void 0 && (y.width = T), f !== void 0 && (y["min-width"] = f), g !== void 0 && (y.hidden = g), v !== void 0 && (y["lock-visible"] = v), k !== void 0 && (y.multi = k), M && (y["data-has-format"] = "true"), A && (y["data-has-options"] = "true"), /* @__PURE__ */ E("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), K !== void 0 && (h.width = K), g !== void 0 && (h["min-width"] = g), f !== void 0 && (h.hidden = f), m !== void 0 && (h["lock-visible"] = m), I !== void 0 && (h.multi = I), F && (h["data-has-format"] = "true"), G && (h["data-has-options"] = "true"), /* @__PURE__ */ E("tbw-grid-column", { ...h });
 }
-function mt({ children: n }) {
+function bt({ children: n }) {
   return /* @__PURE__ */ E("tbw-grid-tool-buttons", { children: n });
 }
-const yt = ({ icons: n, defaults: t, children: e }) => {
-  let r = e;
-  return t && (r = /* @__PURE__ */ E(Te, { defaults: t, children: r })), n && (r = /* @__PURE__ */ E(Ve, { icons: n, children: r })), /* @__PURE__ */ E(Re, { children: r });
+const Et = ({ icons: n, defaults: e, children: t }) => {
+  let r = t;
+  return e && (r = /* @__PURE__ */ E(je, { defaults: e, children: r })), n && (r = /* @__PURE__ */ E(qe, { icons: n, children: r })), /* @__PURE__ */ E(ie, { children: r });
 };
-function ht(n) {
-  const t = P(null), [e, r] = de(!1), [o, a] = de(null), l = P(null), i = h(() => n ? (l.current ??= document.querySelector(n), l.current) : t.current?.element ?? null, [n]);
-  w(() => {
+function St(n) {
+  const e = b(null), [t, r] = fe(!1), [o, s] = fe(null), c = b(null), i = C(() => n ? (c.current ??= document.querySelector(n), c.current) : e.current?.element ?? null, [n]);
+  R(() => {
     let d = !0;
     return (async () => {
       try {
         if (n) {
           const p = document.querySelector(n);
           if (!p) return;
-          if (l.current = p, await p.ready?.(), d) {
+          if (c.current = p, await p.ready?.(), d) {
             r(!0);
-            const b = await p.getConfig?.();
-            d && b && a(b);
+            const S = await p.getConfig?.();
+            d && S && s(S);
           }
         } else {
-          const p = t.current;
+          const p = e.current;
           if (!p) return;
           if (await p.ready?.(), d) {
             r(!0);
-            const b = await p.getConfig?.();
-            d && b && a(b);
+            const S = await p.getConfig?.();
+            d && S && s(S);
           }
         }
       } catch {
@@ -929,73 +951,73 @@ function ht(n) {
       d = !1;
     };
   }, [n]);
-  const f = h(async () => {
+  const g = C(async () => {
     const d = i();
     if (d)
       return await d.getConfig?.() ?? null;
-    const s = t.current;
-    return s ? await s.getConfig?.() ?? null : null;
-  }, [i]), g = h(async () => {
+    const l = e.current;
+    return l ? await l.getConfig?.() ?? null : null;
+  }, [i]), f = C(async () => {
     const d = i();
     if (d) {
       await d.forceLayout?.();
       return;
     }
-    const s = t.current;
-    s && await s.forceLayout?.();
-  }, [i]), v = h(
+    const l = e.current;
+    l && await l.forceLayout?.();
+  }, [i]), m = C(
     async (d) => {
-      const s = i();
-      if (s) {
-        await s.toggleGroup?.(d);
+      const l = i();
+      if (l) {
+        await l.toggleGroup?.(d);
         return;
       }
-      const p = t.current;
+      const p = e.current;
       p && await p.toggleGroup?.(d);
     },
     [i]
-  ), x = h(
-    (d, s) => {
+  ), v = C(
+    (d, l) => {
       const p = i();
       if (p) {
-        p.registerStyles?.(d, s);
+        p.registerStyles?.(d, l);
         return;
       }
-      t.current?.registerStyles?.(d, s);
+      e.current?.registerStyles?.(d, l);
     },
     [i]
-  ), D = h(
+  ), P = C(
     (d) => {
-      const s = i();
-      if (s) {
-        s.unregisterStyles?.(d);
+      const l = i();
+      if (l) {
+        l.unregisterStyles?.(d);
         return;
       }
-      t.current?.unregisterStyles?.(d);
+      e.current?.unregisterStyles?.(d);
     },
     [i]
-  ), A = h(() => o?.columns ? o.columns.filter((d) => !d.hidden) : [], [o]), k = h(() => {
-    const d = i(), s = d?.getPluginByName?.("selection");
-    if (!s) {
+  ), G = C(() => o?.columns ? o.columns.filter((d) => !d.hidden) : [], [o]), I = C(() => {
+    const d = i(), l = d?.getPluginByName?.("selection");
+    if (!l) {
       console.warn("[useGrid] selectAll requires SelectionPlugin");
       return;
     }
-    if (s.config?.mode === "row") {
-      const p = d?.rows ?? [], b = new Set(p.map((H, F) => F));
-      s.selected = b, s.requestAfterRender?.();
+    if (l.config?.mode === "row") {
+      const p = d?.rows ?? [], S = new Set(p.map((M, L) => L));
+      l.selected = S, l.requestAfterRender?.();
     }
-  }, [i]), M = h(() => {
-    const s = i()?.getPluginByName?.("selection");
-    s && s.clearSelection?.();
-  }, [i]), L = h(() => {
-    const s = i()?.getPluginByName?.("selection");
-    return s ? new Set(s.selected ?? []) : /* @__PURE__ */ new Set();
-  }, [i]), S = h(() => {
-    const d = i(), s = d?.getPluginByName?.("selection");
-    if (!s) return [];
-    const p = d?.rows ?? [], b = s.selected ?? /* @__PURE__ */ new Set();
-    return p.filter((H, F) => b.has(F));
-  }, [i]), T = h(
+  }, [i]), F = C(() => {
+    const l = i()?.getPluginByName?.("selection");
+    l && l.clearSelection?.();
+  }, [i]), N = C(() => {
+    const l = i()?.getPluginByName?.("selection");
+    return l ? new Set(l.selected ?? []) : /* @__PURE__ */ new Set();
+  }, [i]), k = C(() => {
+    const d = i(), l = d?.getPluginByName?.("selection");
+    if (!l) return [];
+    const p = d?.rows ?? [], S = l.selected ?? /* @__PURE__ */ new Set();
+    return p.filter((M, L) => S.has(L));
+  }, [i]), K = C(
     (d) => {
       const p = i()?.getPluginByName?.("export");
       if (!p) {
@@ -1005,7 +1027,7 @@ function ht(n) {
       p.exportCsv?.({ filename: d ?? "export.csv" });
     },
     [i]
-  ), y = h(
+  ), h = C(
     (d) => {
       const p = i()?.getPluginByName?.("export");
       if (!p) {
@@ -1017,62 +1039,62 @@ function ht(n) {
     [i]
   );
   return {
-    ref: t,
+    ref: e,
     element: i(),
-    isReady: e,
+    isReady: t,
     config: o,
-    getConfig: f,
-    forceLayout: g,
-    toggleGroup: v,
-    registerStyles: x,
-    unregisterStyles: D,
-    getVisibleColumns: A,
+    getConfig: g,
+    forceLayout: f,
+    toggleGroup: m,
+    registerStyles: v,
+    unregisterStyles: P,
+    getVisibleColumns: G,
     // Selection methods
-    selectAll: k,
-    clearSelection: M,
-    getSelectedIndices: L,
-    getSelectedRows: S,
+    selectAll: I,
+    clearSelection: F,
+    getSelectedIndices: N,
+    getSelectedRows: k,
     // Export methods
-    exportToCsv: T,
-    exportToJson: y
+    exportToCsv: K,
+    exportToJson: h
   };
 }
-let ge = !1;
-function wt(n, t, e, r = []) {
-  !ge && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (ge = !0, console.warn(
+let he = !1;
+function kt(n, e, t, r = []) {
+  !he && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (he = !0, console.warn(
     `[useGridEvent] Deprecated: Use event props directly on DataGrid instead.
 Example: <DataGrid onSelectionChange={(e) => ...} />
 See migration guide: https://toolbox-web.dev/grid-react/migration`
   ));
-  const o = P(e);
-  w(() => {
-    o.current = e;
-  }, [e, ...r]), w(() => {
-    const a = n.current, l = a && "element" in a ? a.element : a;
-    if (!l) return;
-    const i = ((f) => {
-      o.current(f);
+  const o = b(t);
+  R(() => {
+    o.current = t;
+  }, [t, ...r]), R(() => {
+    const s = n.current, c = s && "element" in s ? s.element : s;
+    if (!c) return;
+    const i = ((g) => {
+      o.current(g);
     });
-    return l.addEventListener(t, i), () => {
-      l.removeEventListener(t, i);
+    return c.addEventListener(e, i), () => {
+      c.removeEventListener(e, i);
     };
-  }, [n, t]);
+  }, [n, e]);
 }
 export {
-  gt as DataGrid,
-  he as GridAdapter,
-  pt as GridColumn,
-  _e as GridDetailPanel,
-  Ve as GridIconProvider,
-  yt as GridProvider,
-  Le as GridResponsiveCard,
-  mt as GridToolButtons,
-  ut as GridToolPanel,
-  Te as GridTypeProvider,
-  ft as ReactGridAdapter,
-  ht as useGrid,
-  wt as useGridEvent,
-  at as useGridIcons,
-  lt as useGridTypeDefaults,
-  dt as useTypeDefault
+  wt as DataGrid,
+  be as GridAdapter,
+  Pt as GridColumn,
+  Ze as GridDetailPanel,
+  qe as GridIconProvider,
+  Et as GridProvider,
+  Oe as GridResponsiveCard,
+  bt as GridToolButtons,
+  Ct as GridToolPanel,
+  je as GridTypeProvider,
+  Rt as ReactGridAdapter,
+  St as useGrid,
+  kt as useGridEvent,
+  yt as useGridIcons,
+  ht as useGridTypeDefaults,
+  vt as useTypeDefault
 };