@toolbox-web/grid-react 0.18.1 → 0.18.2

package/index.js

@@ -1,9 +1,9 @@
 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 j, useRef as D, useCallback as R, useEffect as w, forwardRef as Ce, useMemo as x, useImperativeHandle as be, Children as Ee, isValidElement as Pe, useState as de } from "react";
-import { flushSync as v } from "react-dom";
-import { createRoot as b } from "react-dom/client";
-import { createPluginsFromFeatures as Se } from "@toolbox-web/grid/features/registry";
+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) {
   return n.charAt(0).toUpperCase() + n.slice(1);
@@ -33,7 +33,7 @@ function Ae(n) {
 function Ie(n) {
   return n.map((t) => typeof t == "string" ? Ae(t) : t);
 }
-const W = {
+const U = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -58,57 +58,57 @@ const W = {
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete"
-}, re = pe(null), Ve = ({ icons: n, children: t }) => /* @__PURE__ */ E(re.Provider, { value: n, children: t });
+}, oe = pe(null), Ve = ({ icons: n, children: t }) => /* @__PURE__ */ E(oe.Provider, { value: n, children: t });
 function at() {
-  return j(re);
+  return z(oe);
 }
-const Ne = re, K = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+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 = K.get(t);
+    const r = Z.get(t);
     if (r) return r;
   }
   const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return Y.get(e);
+    return Q.get(e);
 }
-function Te(n) {
-  const { children: t, cardRowHeight: e = "auto" } = n, r = D(null), o = R(
-    (c) => {
-      if (r.current = c, !c) return;
-      K.set(c, t);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const u = a.id || a.getAttribute("data-grid-id");
-        u && Y.set(u, 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");
+      if (i) {
+        const f = i.id || i.getAttribute("data-grid-id");
+        f && Q.set(f, t);
       }
     },
     [t]
   );
   w(() => () => {
-    const c = r.current;
-    if (c) {
-      K.delete(c);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const u = a.id || a.getAttribute("data-grid-id");
-        u && Y.delete(u);
+    const l = r.current;
+    if (l) {
+      Z.delete(l);
+      const i = l.closest("tbw-grid");
+      if (i) {
+        const f = i.id || i.getAttribute("data-grid-id");
+        f && Q.delete(f);
       }
     }
   }, []);
-  const s = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+  const a = e === "auto" ? "auto" : String(e);
+  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
 }
-Te.displayName = "GridResponsiveCard";
-const _ = pe(null), Le = ({ defaults: n, children: t }) => /* @__PURE__ */ E(_.Provider, { value: n, children: t });
+Le.displayName = "GridResponsiveCard";
+const $ = pe(null), Te = ({ defaults: n, children: t }) => /* @__PURE__ */ E($.Provider, { value: n, children: t });
 function lt() {
-  return j(_);
+  return z($);
 }
 function dt(n) {
-  return j(_)?.[n];
+  return z($)?.[n];
 }
-const ke = _, J = /* @__PURE__ */ Symbol("reactProcessed"), I = [];
+const ke = $, K = /* @__PURE__ */ Symbol("reactProcessed"), I = [];
 function Fe(n) {
   for (let t = I.length - 1; t >= 0; t--) {
     const e = I[t];
@@ -126,26 +126,26 @@ function Me(n) {
   return (e) => {
     const r = e.cellEl;
     if (r) {
-      const c = t.get(r);
-      if (c)
-        return v(() => {
-          c.root.render(n(e));
-        }), c.container;
+      const l = t.get(r);
+      if (l)
+        return R(() => {
+          l.root.render(n(e));
+        }), l.container;
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const s = b(o);
-    return v(() => {
-      s.render(n(e));
-    }), r && t.set(r, { root: s, container: o }), I.push({ root: s, container: o }), o;
+    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;
   };
 }
 function He(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
-    const r = b(e);
-    return v(() => {
+    const r = C(e);
+    return R(() => {
       r.render(n(t));
     }), I.push({ root: r, container: e }), e;
   };
@@ -154,131 +154,131 @@ function Oe(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-header-renderer", e.style.display = "contents";
-    const r = b(e);
-    return v(() => {
+    const r = C(e);
+    return R(() => {
       r.render(n(t));
     }), I.push({ root: r, container: e }), e;
   };
 }
-function Be(n) {
+function qe(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-header-label-renderer", e.style.display = "contents";
-    const r = b(e);
-    return v(() => {
+    const r = C(e);
+    return R(() => {
       r.render(n(t));
     }), I.push({ root: r, container: e }), e;
   };
 }
-function je(n) {
+function Be(n) {
   return (t) => {
     const e = n(t);
     if (e instanceof HTMLElement || typeof e == "string")
       return e;
     const r = document.createElement("div");
     r.className = "react-loading-renderer", r.style.display = "contents";
-    const o = b(r);
-    return v(() => {
+    const o = C(r);
+    return R(() => {
       o.render(e);
     }), I.push({ root: o, container: r }), r;
   };
 }
 function ye(n) {
   if (!n) return;
-  if (n[J]) return n;
+  if (n[K]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
       ...n,
-      loadingRenderer: je(r)
+      loadingRenderer: Be(r)
     };
   }
   if (!n.columns) {
     const r = n;
-    return r[J] = !0, r;
+    return r[K] = !0, r;
   }
   const t = n.columns.map((r) => {
-    const { renderer: o, editor: s, headerRenderer: c, headerLabelRenderer: a, ...u } = r, f = { ...u };
-    return o && (f.renderer = Me(o)), s && (f.editor = He(s)), c && (f.headerRenderer = Oe(c)), a && (f.headerLabelRenderer = Be(a)), f;
+    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 = {
     ...n,
     columns: t
   };
-  return e[J] = !0, e;
+  return e[K] = !0, e;
 }
-const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
-function _e(n) {
+const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+function je(n) {
   const t = n.querySelector("tbw-grid-detail");
   if (t) {
-    const r = Z.get(t);
+    const r = X.get(t);
     if (r) return r;
   }
   const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return Q.get(e);
+    return ee.get(e);
 }
-function qe(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = D(null), s = R(
-    (a) => {
-      if (o.current = a, !a) return;
-      Z.set(a, t);
-      const u = a.closest("tbw-grid");
-      if (u) {
-        const f = u.id || u.getAttribute("data-grid-id");
-        f && Q.set(f, t);
+function _e(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = P(null), a = h(
+    (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);
       }
     },
     [t]
   );
   return w(() => () => {
-    const a = o.current;
-    if (a) {
-      Z.delete(a);
-      const u = a.closest("tbw-grid");
-      if (u) {
-        const C = u.id || u.getAttribute("data-grid-id");
-        C && Q.delete(C);
+    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);
       }
-      const f = a.parentNode;
-      f && f.contains(a);
+      const g = i.parentNode;
+      g && g.contains(i);
     }
   }, []), /* @__PURE__ */ E(
     "tbw-grid-detail",
     {
-      ref: s,
+      ref: a,
       showExpandColumn: e ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
   );
 }
-qe.displayName = "GridDetailPanel";
-const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+_e.displayName = "GridDetailPanel";
+const te = /* @__PURE__ */ new WeakMap(), re = /* @__PURE__ */ new Map();
 function ze(n) {
-  const t = X.get(n);
+  const t = te.get(n);
   if (t) return t;
   const e = n.id;
   if (e)
-    return ee.get(e);
+    return re.get(e);
 }
 function ut(n) {
-  const { id: t, title: e, icon: r, tooltip: o, order: s = 100, children: c } = n, a = D(null), u = R(
-    (f) => {
-      a.current = f, f && (X.set(f, c), t && ee.set(t, c));
+  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));
     },
-    [c, t]
+    [l, t]
   );
   return w(() => () => {
-    const f = a.current;
-    f && (X.delete(f), t && ee.delete(t));
+    const g = i.current;
+    g && (te.delete(g), t && re.delete(t));
   }, [t]), /* @__PURE__ */ E(
     "tbw-grid-tool-panel",
     {
-      ref: u,
+      ref: f,
       id: t,
       title: e,
       icon: r,
       tooltip: o,
-      order: s?.toString()
+      order: a?.toString()
     }
   );
 }
@@ -343,11 +343,11 @@ class he {
     const e = t.getAttribute("field");
     let r = V.get(t);
     if (!r && e) {
-      const c = N.get(e);
-      c && (c.renderer || c.editor) && (r = c, V.set(t, r));
+      const l = N.get(e);
+      l && (l.renderer || l.editor) && (r = l, V.set(t, r));
     }
-    const o = r?.renderer !== void 0, s = r?.editor !== void 0;
-    return r !== void 0 && (o || s);
+    const o = r?.renderer !== void 0, a = r?.editor !== void 0;
+    return r !== void 0 && (o || a);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -366,26 +366,26 @@ class he {
       return;
     const r = /* @__PURE__ */ new WeakMap();
     return (o) => {
-      const s = o.cellEl;
-      if (s) {
-        const u = r.get(s);
-        if (u)
-          return v(() => {
-            u.root.render(e(o));
-          }), u.container;
-        const f = document.createElement("div");
-        f.className = "react-cell-renderer", f.style.display = "contents";
-        const C = b(f);
-        return v(() => {
-          C.render(e(o));
-        }), r.set(s, { root: C, container: f, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: C, container: f }), f;
+      const a = o.cellEl;
+      if (a) {
+        const f = r.get(a);
+        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;
       }
-      const c = document.createElement("div");
-      c.className = "react-cell-renderer", c.style.display = "contents";
-      const a = b(c);
-      return v(() => {
-        a.render(e(o));
-      }), this.mountedViews.push({ root: a, container: c }), c;
+      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;
     };
   }
   /**
@@ -397,10 +397,10 @@ class he {
     return e ? (r) => {
       const o = document.createElement("div");
       o.className = "react-cell-editor", o.style.display = "contents";
-      const s = b(o);
-      return v(() => {
-        s.render(e(r));
-      }), this.editorViews.push({ root: s, container: o }), o;
+      const a = C(o);
+      return R(() => {
+        a.render(e(r));
+      }), this.editorViews.push({ root: a, container: o }), o;
     } : () => document.createElement("div");
   }
   /**
@@ -408,15 +408,15 @@ class he {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = _e(t);
+    const e = je(t);
     if (e)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-detail-panel";
-        const c = { row: r, rowIndex: o }, a = b(s);
-        return v(() => {
-          a.render(e(c));
-        }), this.mountedViews.push({ root: a, container: s }), s;
+        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;
       };
   }
   /**
@@ -436,12 +436,12 @@ class he {
     const e = me(t);
     if (e)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-responsive-card";
-        const c = { row: r, index: o }, a = b(s);
-        return v(() => {
-          a.render(e(c));
-        }), this.mountedViews.push({ root: a, container: s }), s;
+        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;
       };
   }
   /**
@@ -454,20 +454,20 @@ class he {
       return;
     const r = t.closest("tbw-grid");
     return (o) => {
-      const s = {
+      const a = {
         grid: r ?? o
-      }, c = b(o);
-      return v(() => {
-        c.render(e(s));
-      }), this.mountedViews.push({ root: c, container: o }), () => {
-        const a = this.mountedViews.findIndex((u) => u.container === o);
-        if (a !== -1) {
-          const { root: u } = this.mountedViews[a];
+      }, 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 {
-            u.unmount();
+            f.unmount();
           } catch {
           }
-          this.mountedViews.splice(a, 1);
+          this.mountedViews.splice(i, 1);
         }
       };
     };
@@ -515,8 +515,8 @@ class he {
     return (e) => {
       const r = document.createElement("span");
       r.style.display = "contents";
-      const o = b(r);
-      return this.mountedViews.push({ root: o, container: r }), v(() => {
+      const o = C(r);
+      return this.mountedViews.push({ root: o, container: r }), R(() => {
         o.render(t(e));
       }), r;
     };
@@ -529,8 +529,8 @@ class he {
     return (e) => {
       const r = document.createElement("span");
       r.style.display = "contents";
-      const o = b(r);
-      return this.editorViews.push({ root: o, container: r }), v(() => {
+      const o = C(r);
+      return this.editorViews.push({ root: o, container: r }), R(() => {
         o.render(t(e));
       }), r;
     };
@@ -543,9 +543,9 @@ class he {
     return (e, r) => {
       const o = document.createElement("div");
       o.style.display = "contents";
-      const s = b(o);
-      this.mountedViews.push({ root: s, container: o }), v(() => {
-        s.render(t(r));
+      const a = C(o);
+      this.mountedViews.push({ root: a, container: o }), R(() => {
+        a.render(t(r));
       }), e.appendChild(o);
     };
   }
@@ -619,13 +619,13 @@ function Ze(n) {
   const t = [];
   for (const [e, r] of Object.entries(n))
     r === void 0 || r === !1 || t.push(e);
-  return Ye(t), Se(n);
+  return Ye(t), Pe(n);
 }
-let fe = !1, U = null;
-function te() {
-  return fe || (U = new he(), ve.registerAdapter(U), fe = !0), U;
+let fe = !1, Y = null;
+function ne() {
+  return fe || (Y = new he(), ve.registerAdapter(Y), fe = !0), Y;
 }
-te();
+ne();
 function Qe(n) {
   const e = n.getPluginByName?.("masterDetail");
   e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
@@ -633,16 +633,16 @@ function Qe(n) {
 function Xe(n, t) {
   const e = n;
   if (!n.querySelector("tbw-grid-responsive-card") || !me(n)) return;
-  const s = e.getPluginByName?.("responsive");
-  if (s && typeof s.setCardRenderer == "function") {
-    const c = t.createResponsiveCardRenderer(n);
-    c && s.setCardRenderer(c);
+  const a = e.getPluginByName?.("responsive");
+  if (a && typeof a.setCardRenderer == "function") {
+    const l = t.createResponsiveCardRenderer(n);
+    l && a.setCardRenderer(l);
   }
 }
 function et(n) {
   const t = {};
   return Ee.forEach(n, (e) => {
-    if (Pe(e)) {
+    if (Se(e)) {
       if (e.type && e.type.displayName === "GridDetailPanel") {
         const r = e.props;
         t.masterDetail = {
@@ -661,27 +661,27 @@ const gt = Ce(function(t, e) {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: s,
-    columnDefaults: c,
-    fitMode: a,
-    sortable: u,
-    filterable: f,
-    selectable: C,
-    loading: P,
-    editOn: S,
-    customStyles: G,
-    className: L,
-    style: k,
-    children: T,
+    columns: a,
+    columnDefaults: l,
+    fitMode: i,
+    sortable: f,
+    filterable: g,
+    selectable: v,
+    loading: x,
+    editOn: D,
+    customStyles: A,
+    className: k,
+    style: M,
+    children: L,
     // Plugin props
-    plugins: d,
+    plugins: S,
     // SSR mode
-    ssr: p,
+    ssr: T,
     // Legacy event handlers
-    onRowsChange: m,
+    onRowsChange: y,
     // Feature props and event props are in ...rest
-    ...h
-  } = t, g = D(null), A = D(null), ne = j(ke), q = j(Ne), oe = [
+    ...d
+  } = t, s = P(null), p = P(null), b = z(ke), H = z(Ne), F = [
     "selection",
     "editing",
     "filtering",
@@ -711,156 +711,156 @@ const gt = Ce(function(t, e) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], we = x(() => oe.map((i) => {
-    const l = h[i];
-    return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
-  }).filter(Boolean).join("|"), [h]), ie = x(() => {
-    const i = {};
-    for (const l of oe)
-      l in h && h[l] !== void 0 && (i[l] = h[l]);
-    return i;
-  }, [we]), se = x(() => et(T), [T]), ce = x(() => ({ ...se, ...ie }), [ie, se]), z = x(() => d || p ? [] : Ze(ce), [ce, d, p]), F = x(() => {
-    if (d) {
-      const i = new Set(d.map((y) => y.name)), l = z.filter((y) => !i.has(y.name));
-      return [...d, ...l];
+  ], 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];
     }
-    return z;
-  }, [d, z]), M = x(() => {
-    if (!s) return s;
-    const i = Ie(s);
-    return c ? i.map((l) => ({
-      ...c,
-      ...l
+    return W;
+  }, [S, W]), q = G(() => {
+    if (!a) return a;
+    const c = Ie(a);
+    return l ? c.map((u) => ({
+      ...l,
+      ...u
       // Individual column props override defaults
-    })) : i;
-  }, [s, c]), H = x(() => {
-    const i = ye(o), l = {};
-    if (u !== void 0 && (l.sortable = u), f !== void 0 && (l.filterable = f), C !== void 0 && (l.selectable = C), q) {
-      const y = i?.icons || o?.icons || {};
-      l.icons = { ...q, ...y };
+    })) : 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 };
     }
-    if (F.length > 0 && i) {
-      const y = i.plugins || [], O = new Set(y.map((B) => B.name)), $ = F.filter((B) => !O.has(B.name));
+    if (O.length > 0 && c) {
+      const m = c.plugins || [], j = new Set(m.map((_) => _.name)), J = O.filter((_) => !j.has(_.name));
       return {
-        ...i,
-        ...l,
-        plugins: [...y, ...$]
+        ...c,
+        ...u,
+        plugins: [...m, ...J]
       };
     }
-    return F.length > 0 && !i ? { ...l, plugins: F } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
-  }, [o, F, u, f, C, q]);
+    return O.length > 0 && !c ? { ...u, plugins: O } : Object.keys(u).length > 0 ? { ...c, ...u } : c;
+  }, [o, O, f, g, v, H]);
   w(() => {
-    te().setTypeDefaults(ne);
-  }, [ne]), w(() => {
-    g.current && (g.current.rows = r);
+    ne().setTypeDefaults(b);
+  }, [b]), w(() => {
+    s.current && (s.current.rows = r);
   }, [r]), w(() => {
-    g.current && H && (g.current.gridConfig = H);
-  }, [H]), w(() => {
-    g.current && M && (g.current.columns = M);
-  }, [M]), w(() => {
-    g.current && a !== void 0 && (g.current.fitMode = a);
-  }, [a]), w(() => {
-    g.current && S !== void 0 && (g.current.editOn = S);
-  }, [S]), w(() => {
-    g.current && P !== void 0 && (g.current.loading = P);
-  }, [P]), w(() => {
-    const i = g.current;
-    if (!i) return;
-    const l = te();
-    i.__frameworkAdapter = l, Qe(i), Xe(i, l);
-    let y = !1;
-    const O = requestAnimationFrame(() => {
-      y || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+    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;
+    const j = requestAnimationFrame(() => {
+      m || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
     });
     return () => {
-      y = !0, cancelAnimationFrame(O);
+      m = !0, cancelAnimationFrame(j);
     };
   }, []), w(() => {
-    if (!g.current || !G) return;
-    const i = g.current, l = "react-custom-styles";
-    let y = !0;
-    return i.ready?.().then(() => {
-      y && G && (i.registerStyles?.(l, G), A.current = l);
+    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);
     }), () => {
-      y = !1, A.current && (i.unregisterStyles?.(A.current), A.current = null);
+      m = !1, p.current && (c.unregisterStyles?.(p.current), p.current = null);
     };
-  }, [G]), w(() => {
-    const i = g.current;
-    if (!i) return;
-    const l = [];
-    return m && l.push(i.on("rows-change", (y) => m(y.rows))), () => {
-      l.forEach((y) => y());
+  }, [A]), w(() => {
+    const c = s.current;
+    if (!c) return;
+    const u = [];
+    return y && u.push(c.on("rows-change", (m) => y(m.rows))), () => {
+      u.forEach((m) => m());
     };
-  }, [m]);
-  const ae = x(() => Object.keys(W).filter((i) => typeof h[i] == "function").sort().join("|"), [h]), le = D({});
-  for (const i of Object.keys(W))
-    le.current[i] = h[i];
+  }, [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 i = g.current;
-    if (!i) return;
-    const l = [];
-    for (const [y, O] of Object.entries(W))
-      ae.includes(y) && l.push(
-        i.on(O, ($, B) => {
-          le.current[y]?.($, B);
+    const c = s.current;
+    if (!c) return;
+    const u = [];
+    for (const [m, j] of Object.entries(U))
+      ae.includes(m) && u.push(
+        c.on(j, (J, _) => {
+          le.current[m]?.(J, _);
         })
       );
     return () => {
-      l.forEach((y) => y());
+      u.forEach((m) => m());
     };
   }, [ae]), be(
     e,
     () => ({
       get element() {
-        return g.current;
+        return s.current;
       },
       async getConfig() {
-        return g.current?.getConfig?.() ?? {};
+        return s.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return g.current?.ready?.();
+        return s.current?.ready?.();
       },
       async forceLayout() {
-        return g.current?.forceLayout?.();
+        return s.current?.forceLayout?.();
       },
-      async toggleGroup(i) {
-        return g.current?.toggleGroup?.(i);
+      async toggleGroup(c) {
+        return s.current?.toggleGroup?.(c);
       },
-      registerStyles(i, l) {
-        g.current?.registerStyles?.(i, l);
+      registerStyles(c, u) {
+        s.current?.registerStyles?.(c, u);
       },
-      unregisterStyles(i) {
-        g.current?.unregisterStyles?.(i);
+      unregisterStyles(c) {
+        s.current?.unregisterStyles?.(c);
       },
-      setRowLoading(i, l) {
-        g.current?.setRowLoading?.(i, l);
+      setRowLoading(c, u) {
+        s.current?.setRowLoading?.(c, u);
       },
-      setCellLoading(i, l, y) {
-        g.current?.setCellLoading?.(i, l, y);
+      setCellLoading(c, u, m) {
+        s.current?.setCellLoading?.(c, u, m);
       },
-      isRowLoading(i) {
-        return g.current?.isRowLoading?.(i) ?? !1;
+      isRowLoading(c) {
+        return s.current?.isRowLoading?.(c) ?? !1;
       },
-      isCellLoading(i, l) {
-        return g.current?.isCellLoading?.(i, l) ?? !1;
+      isCellLoading(c, u) {
+        return s.current?.isCellLoading?.(c, u) ?? !1;
       },
       clearAllLoading() {
-        g.current?.clearAllLoading?.();
+        s.current?.clearAllLoading?.();
       }
     }),
     []
   ), /* @__PURE__ */ E(
     "tbw-grid",
     {
-      ref: (i) => {
-        if (g.current = i, i) {
-          const l = i;
-          H && (l.gridConfig = H), r && (l.rows = r), M && (l.columns = M);
+      ref: (c) => {
+        if (s.current = c, c) {
+          const u = c;
+          B && (u.gridConfig = B), r && (u.rows = r), q && (u.columns = q);
         }
       },
-      class: L,
-      style: k,
-      children: /* @__PURE__ */ E(xe.Provider, { value: g, children: T })
+      class: k,
+      style: M,
+      children: /* @__PURE__ */ E(xe.Provider, { value: s, children: L })
     }
   );
 });
@@ -870,122 +870,170 @@ function pt(n) {
     header: e,
     type: r,
     editable: o,
-    sortable: s,
-    resizable: c,
-    width: a,
-    minWidth: u,
-    hidden: f,
-    lockVisible: C,
-    children: P,
-    editor: S,
-    options: G,
-    multi: L,
-    format: k
-  } = n, T = D(null), d = R(
-    (h) => {
-      T.current = h, h && (P && $e(h, P), S && We(h, S));
+    sortable: a,
+    resizable: l,
+    width: i,
+    minWidth: f,
+    hidden: g,
+    lockVisible: v,
+    children: x,
+    editor: D,
+    options: A,
+    multi: k,
+    format: M
+  } = n, L = P(null), S = h(
+    (d) => {
+      L.current = d, d && (x && $e(d, x), D && We(d, D));
     },
-    [P, S, t]
-  ), p = typeof a == "number" ? `${a}px` : a, m = {
+    [x, D, t]
+  ), T = typeof i == "number" ? `${i}px` : i, y = {
     field: t,
-    ref: d
+    ref: S
   };
-  return e !== void 0 && (m.header = e), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), s !== void 0 && (m.sortable = s), c !== void 0 && (m.resizable = c), p !== void 0 && (m.width = p), u !== void 0 && (m["min-width"] = u), f !== void 0 && (m.hidden = f), C !== void 0 && (m["lock-visible"] = C), L !== void 0 && (m.multi = L), k && (m["data-has-format"] = "true"), G && (m["data-has-options"] = "true"), /* @__PURE__ */ E("tbw-grid-column", { ...m });
+  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 });
 }
 function mt({ 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(Le, { defaults: t, children: r })), n && (r = /* @__PURE__ */ E(Ve, { icons: n, children: r })), /* @__PURE__ */ E(Re, { children: r });
+  return t && (r = /* @__PURE__ */ E(Te, { defaults: t, children: r })), n && (r = /* @__PURE__ */ E(Ve, { icons: n, children: r })), /* @__PURE__ */ E(Re, { children: r });
 };
-function ht() {
-  const n = D(null), [t, e] = de(!1), [r, o] = de(null);
+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(() => {
-    const d = n.current;
-    if (!d) return;
-    let p = !0;
+    let d = !0;
     return (async () => {
       try {
-        if (await d.ready?.(), p) {
-          e(!0);
-          const h = await d.getConfig?.();
-          p && h && o(h);
+        if (n) {
+          const p = document.querySelector(n);
+          if (!p) return;
+          if (l.current = p, await p.ready?.(), d) {
+            r(!0);
+            const b = await p.getConfig?.();
+            d && b && a(b);
+          }
+        } else {
+          const p = t.current;
+          if (!p) return;
+          if (await p.ready?.(), d) {
+            r(!0);
+            const b = await p.getConfig?.();
+            d && b && a(b);
+          }
         }
       } catch {
       }
     })(), () => {
-      p = !1;
+      d = !1;
     };
-  }, []);
-  const s = R(async () => {
-    const d = n.current;
-    return d ? await d.getConfig?.() ?? null : null;
-  }, []), c = R(async () => {
-    const d = n.current;
-    d && await d.forceLayout?.();
-  }, []), a = R(async (d) => {
-    const p = n.current;
-    p && await p.toggleGroup?.(d);
-  }, []), u = R((d, p) => {
-    n.current?.registerStyles?.(d, p);
-  }, []), f = R((d) => {
-    n.current?.unregisterStyles?.(d);
-  }, []), C = R(() => r?.columns ? r.columns.filter((d) => !d.hidden) : [], [r]), P = R(() => {
-    const d = n.current?.element, p = d?.getPluginByName?.("selection");
-    if (!p) {
-      console.warn("[useGrid] selectAll requires SelectionPlugin");
+  }, [n]);
+  const f = h(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 d = i();
+    if (d) {
+      await d.forceLayout?.();
       return;
     }
-    if (p.config?.mode === "row") {
-      const m = d?.rows ?? [], h = new Set(m.map((g, A) => A));
-      p.selected = h, p.requestAfterRender?.();
-    }
-  }, []), S = R(() => {
-    const p = n.current?.element?.getPluginByName?.("selection");
-    p && p.clearSelection?.();
-  }, []), G = R(() => {
-    const p = n.current?.element?.getPluginByName?.("selection");
-    return p ? new Set(p.selected ?? []) : /* @__PURE__ */ new Set();
-  }, []), L = R(() => {
-    const d = n.current?.element, p = d?.getPluginByName?.("selection");
-    if (!p) return [];
-    const m = d?.rows ?? [], h = p.selected ?? /* @__PURE__ */ new Set();
-    return m.filter((g, A) => h.has(A));
-  }, []), k = R((d) => {
-    const m = n.current?.element?.getPluginByName?.("export");
-    if (!m) {
-      console.warn("[useGrid] exportToCsv requires ExportPlugin (use export prop)");
+    const s = t.current;
+    s && await s.forceLayout?.();
+  }, [i]), v = h(
+    async (d) => {
+      const s = i();
+      if (s) {
+        await s.toggleGroup?.(d);
+        return;
+      }
+      const p = t.current;
+      p && await p.toggleGroup?.(d);
+    },
+    [i]
+  ), x = h(
+    (d, s) => {
+      const p = i();
+      if (p) {
+        p.registerStyles?.(d, s);
+        return;
+      }
+      t.current?.registerStyles?.(d, s);
+    },
+    [i]
+  ), D = h(
+    (d) => {
+      const s = i();
+      if (s) {
+        s.unregisterStyles?.(d);
+        return;
+      }
+      t.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) {
+      console.warn("[useGrid] selectAll requires SelectionPlugin");
       return;
     }
-    m.exportCsv?.({ filename: d ?? "export.csv" });
-  }, []), T = R((d) => {
-    const m = n.current?.element?.getPluginByName?.("export");
-    if (!m) {
-      console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
-      return;
+    if (s.config?.mode === "row") {
+      const p = d?.rows ?? [], b = new Set(p.map((H, F) => F));
+      s.selected = b, s.requestAfterRender?.();
     }
-    m.exportJson?.({ filename: d ?? "export.json" });
-  }, []);
+  }, [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(
+    (d) => {
+      const p = i()?.getPluginByName?.("export");
+      if (!p) {
+        console.warn("[useGrid] exportToCsv requires ExportPlugin (use export prop)");
+        return;
+      }
+      p.exportCsv?.({ filename: d ?? "export.csv" });
+    },
+    [i]
+  ), y = h(
+    (d) => {
+      const p = i()?.getPluginByName?.("export");
+      if (!p) {
+        console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
+        return;
+      }
+      p.exportJson?.({ filename: d ?? "export.json" });
+    },
+    [i]
+  );
   return {
-    ref: n,
-    element: n.current?.element ?? null,
-    isReady: t,
-    config: r,
-    getConfig: s,
-    forceLayout: c,
-    toggleGroup: a,
-    registerStyles: u,
-    unregisterStyles: f,
-    getVisibleColumns: C,
+    ref: t,
+    element: i(),
+    isReady: e,
+    config: o,
+    getConfig: f,
+    forceLayout: g,
+    toggleGroup: v,
+    registerStyles: x,
+    unregisterStyles: D,
+    getVisibleColumns: A,
     // Selection methods
-    selectAll: P,
-    clearSelection: S,
-    getSelectedIndices: G,
-    getSelectedRows: L,
+    selectAll: k,
+    clearSelection: M,
+    getSelectedIndices: L,
+    getSelectedRows: S,
     // Export methods
-    exportToCsv: k,
-    exportToJson: T
+    exportToCsv: T,
+    exportToJson: y
   };
 }
 let ge = !1;
@@ -995,17 +1043,17 @@ function wt(n, t, e, r = []) {
 Example: <DataGrid onSelectionChange={(e) => ...} />
 See migration guide: https://toolbox-web.dev/grid-react/migration`
   ));
-  const o = D(e);
+  const o = P(e);
   w(() => {
     o.current = e;
   }, [e, ...r]), w(() => {
-    const s = n.current, c = s && "element" in s ? s.element : s;
-    if (!c) return;
-    const a = ((u) => {
-      o.current(u);
+    const a = n.current, l = a && "element" in a ? a.element : a;
+    if (!l) return;
+    const i = ((f) => {
+      o.current(f);
     });
-    return c.addEventListener(t, a), () => {
-      c.removeEventListener(t, a);
+    return l.addEventListener(t, i), () => {
+      l.removeEventListener(t, i);
     };
   }, [n, t]);
 }
@@ -1013,13 +1061,13 @@ export {
   gt as DataGrid,
   he as GridAdapter,
   pt as GridColumn,
-  qe as GridDetailPanel,
+  _e as GridDetailPanel,
   Ve as GridIconProvider,
   yt as GridProvider,
-  Te as GridResponsiveCard,
+  Le as GridResponsiveCard,
   mt as GridToolButtons,
   ut as GridToolPanel,
-  Le as GridTypeProvider,
+  Te as GridTypeProvider,
   ft as ReactGridAdapter,
   ht as useGrid,
   wt as useGridEvent,