@toolbox-web/grid-react 0.7.0 → 0.8.1

package/index.js

@@ -1,38 +1,38 @@
-import { jsx as V } from "react/jsx-runtime";
-import { DataGridElement as ae } from "@toolbox-web/grid";
-import { useRef as P, useCallback as y, useEffect as h, createContext as de, useContext as Z, forwardRef as ue, useMemo as D, useImperativeHandle as le, Children as fe, isValidElement as ge, useState as ne } from "react";
-import { flushSync as b } from "react-dom";
+import { jsx as I } from "react/jsx-runtime";
+import { DataGridElement as ue } from "@toolbox-web/grid";
+import { useRef as P, useCallback as h, useEffect as w, createContext as fe, useContext as Q, forwardRef as ge, useMemo as D, useImperativeHandle as pe, Children as me, isValidElement as ye, useState as ie } from "react";
+import { flushSync as R } from "react-dom";
 import { createRoot as S } from "react-dom/client";
-import { c as pe } from "./chunks/feature-registry-Y3KvnN54.js";
-function me(r) {
+import { c as he } from "./chunks/feature-registry-Y3KvnN54.js";
+function we(r) {
   return r.charAt(0).toUpperCase() + r.slice(1);
 }
-function oe(r) {
-  return r.toLowerCase() === "id" ? "ID" : r.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(me).join(" ");
+function se(r) {
+  return r.toLowerCase() === "id" ? "ID" : r.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(we).join(" ");
 }
-const ye = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function he(r) {
+const ve = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Ce(r) {
   const t = r.lastIndexOf(":");
   if (t > 0) {
     const e = r.slice(t + 1).toLowerCase();
-    if (ye.has(e)) {
+    if (ve.has(e)) {
       const n = r.slice(0, t);
       return {
         field: n,
-        header: oe(n),
+        header: se(n),
         type: e
       };
     }
   }
   return {
     field: r,
-    header: oe(r)
+    header: se(r)
   };
 }
-function we(r) {
-  return r.map((t) => typeof t == "string" ? he(t) : t);
+function Re(r) {
+  return r.map((t) => typeof t == "string" ? Ce(t) : t);
 }
-const q = {
+const z = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -57,202 +57,202 @@ const q = {
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete"
-}, _ = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new Map();
-function ce(r) {
+}, W = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new Map();
+function le(r) {
   const t = r.querySelector("tbw-grid-responsive-card");
   if (t) {
-    const n = _.get(t);
+    const n = W.get(t);
     if (n) return n;
   }
   const e = r.id || r.getAttribute("data-grid-id");
   if (e)
-    return W.get(e);
+    return $.get(e);
 }
-function ve(r) {
-  const { children: t, cardRowHeight: e = "auto" } = r, n = P(null), o = y(
+function be(r) {
+  const { children: t, cardRowHeight: e = "auto" } = r, n = P(null), o = h(
     (i) => {
       if (n.current = i, !i) return;
-      _.set(i, t);
-      const d = i.closest("tbw-grid");
-      if (d) {
-        const u = d.id || d.getAttribute("data-grid-id");
-        u && W.set(u, t);
+      W.set(i, t);
+      const s = i.closest("tbw-grid");
+      if (s) {
+        const l = s.id || s.getAttribute("data-grid-id");
+        l && $.set(l, t);
       }
     },
     [t]
   );
-  h(() => () => {
+  w(() => () => {
     const i = n.current;
     if (i) {
-      _.delete(i);
-      const d = i.closest("tbw-grid");
-      if (d) {
-        const u = d.id || d.getAttribute("data-grid-id");
-        u && W.delete(u);
+      W.delete(i);
+      const s = i.closest("tbw-grid");
+      if (s) {
+        const l = s.id || s.getAttribute("data-grid-id");
+        l && $.delete(l);
       }
     }
   }, []);
-  const s = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ V("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+  const a = e === "auto" ? "auto" : String(e);
+  return /* @__PURE__ */ I("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
 }
-ve.displayName = "GridResponsiveCard";
-const H = de(null), _e = ({ defaults: r, children: t }) => /* @__PURE__ */ V(H.Provider, { value: r, children: t });
-function We() {
-  return Z(H);
+be.displayName = "GridResponsiveCard";
+const H = fe(null), Je = ({ defaults: r, children: t }) => /* @__PURE__ */ I(H.Provider, { value: r, children: t });
+function Ue() {
+  return Q(H);
 }
-function $e(r) {
-  return Z(H)?.[r];
+function Ke(r) {
+  return Q(H)?.[r];
 }
-const Ce = H;
-function Re(r) {
+const Ee = H;
+function Se(r) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     const n = e.cellEl;
     if (n) {
       const i = t.get(n);
       if (i)
-        return b(() => {
+        return R(() => {
           i.root.render(r(e));
         }), i.container;
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const s = S(o);
-    return b(() => {
-      s.render(r(e));
-    }), n && t.set(n, { root: s, container: o }), o;
+    const a = S(o);
+    return R(() => {
+      a.render(r(e));
+    }), n && t.set(n, { root: a, container: o }), o;
   };
 }
-function be(r) {
+function xe(r) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
     const n = S(e);
-    return b(() => {
+    return R(() => {
       n.render(r(t));
     }), e;
   };
 }
-function Ee(r) {
+function De(r) {
   if (!r) return;
   if (!r.columns) return r;
   const t = r.columns.map((e) => {
-    const { renderer: n, editor: o, ...s } = e, i = { ...s };
-    return n && (i.renderer = Re(n)), o && (i.editor = be(o)), i;
+    const { renderer: n, editor: o, ...a } = e, i = { ...a };
+    return n && (i.renderer = Se(n)), o && (i.editor = xe(o)), i;
   });
   return {
     ...r,
     columns: t
   };
 }
-const $ = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new Map();
-function Se(r) {
+const J = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new Map();
+function Pe(r) {
   const t = r.querySelector("tbw-grid-detail");
   if (t) {
-    const n = $.get(t);
+    const n = J.get(t);
     if (n) return n;
   }
   const e = r.id || r.getAttribute("data-grid-id");
   if (e)
-    return J.get(e);
+    return U.get(e);
 }
-function xe(r) {
-  const { children: t, showExpandColumn: e = !0, animation: n = "slide" } = r, o = P(null), s = y(
-    (d) => {
-      if (o.current = d, !d) return;
-      $.set(d, t);
-      const u = d.closest("tbw-grid");
-      if (u) {
-        const g = u.id || u.getAttribute("data-grid-id");
-        g && J.set(g, t);
+function Ge(r) {
+  const { children: t, showExpandColumn: e = !0, animation: n = "slide" } = r, o = P(null), a = h(
+    (s) => {
+      if (o.current = s, !s) return;
+      J.set(s, t);
+      const l = s.closest("tbw-grid");
+      if (l) {
+        const m = l.id || l.getAttribute("data-grid-id");
+        m && U.set(m, t);
       }
     },
     [t]
   );
-  return h(() => () => {
-    const d = o.current;
-    if (d) {
-      $.delete(d);
-      const u = d.closest("tbw-grid");
-      if (u) {
-        const v = u.id || u.getAttribute("data-grid-id");
-        v && J.delete(v);
+  return w(() => () => {
+    const s = o.current;
+    if (s) {
+      J.delete(s);
+      const l = s.closest("tbw-grid");
+      if (l) {
+        const v = l.id || l.getAttribute("data-grid-id");
+        v && U.delete(v);
       }
-      const g = d.parentNode;
-      g && g.contains(d);
+      const m = s.parentNode;
+      m && m.contains(s);
     }
-  }, []), /* @__PURE__ */ V(
+  }, []), /* @__PURE__ */ I(
     "tbw-grid-detail",
     {
-      ref: s,
+      ref: a,
       showExpandColumn: e ? void 0 : "false",
       animation: n === !1 ? "false" : n
     }
   );
 }
-xe.displayName = "GridDetailPanel";
-const U = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new Map();
-function De(r) {
-  const t = U.get(r);
+Ge.displayName = "GridDetailPanel";
+const K = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+function Ae(r) {
+  const t = K.get(r);
   if (t) return t;
   const e = r.id;
   if (e)
-    return K.get(e);
+    return Y.get(e);
 }
-function Je(r) {
-  const { id: t, title: e, icon: n, tooltip: o, order: s = 100, children: i } = r, d = P(null), u = y(
-    (g) => {
-      d.current = g, g && (U.set(g, i), t && K.set(t, i));
+function Ye(r) {
+  const { id: t, title: e, icon: n, tooltip: o, order: a = 100, children: i } = r, s = P(null), l = h(
+    (m) => {
+      s.current = m, m && (K.set(m, i), t && Y.set(t, i));
     },
     [i, t]
   );
-  return h(() => () => {
-    const g = d.current;
-    g && (U.delete(g), t && K.delete(t));
-  }, [t]), /* @__PURE__ */ V(
+  return w(() => () => {
+    const m = s.current;
+    m && (K.delete(m), t && Y.delete(t));
+  }, [t]), /* @__PURE__ */ I(
     "tbw-grid-tool-panel",
     {
-      ref: u,
+      ref: l,
       id: t,
       title: e,
       icon: n,
       tooltip: o,
-      order: s?.toString()
+      order: a?.toString()
     }
   );
 }
-const G = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
-function Pe(r, t) {
+const G = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new Map();
+function Ne(r, t) {
   const e = r.getAttribute("field"), n = G.get(r) ?? {};
   if (n.renderer = t, G.set(r, n), e) {
-    const o = T.get(e) ?? {};
-    o.renderer = t, T.set(e, o);
+    const o = N.get(e) ?? {};
+    o.renderer = t, N.set(e, o);
   }
 }
-function Ge(r, t) {
+function Ie(r, t) {
   const e = r.getAttribute("field"), n = G.get(r) ?? {};
   if (n.editor = t, G.set(r, n), e) {
-    const o = T.get(e) ?? {};
-    o.editor = t, T.set(e, o);
+    const o = N.get(e) ?? {};
+    o.editor = t, N.set(e, o);
   }
 }
-function Ae(r) {
+function Te(r) {
   let t = G.get(r)?.renderer;
   if (!t) {
     const e = r.getAttribute("field");
-    e && (t = T.get(e)?.renderer);
+    e && (t = N.get(e)?.renderer);
   }
   return t;
 }
-function Ne(r) {
+function Ve(r) {
   let t = G.get(r)?.editor;
   if (!t) {
     const e = r.getAttribute("field");
-    e && (t = T.get(e)?.editor);
+    e && (t = N.get(e)?.editor);
   }
   return t;
 }
-class Ie {
+class ke {
   mountedViews = [];
   typeDefaults = null;
   /**
@@ -272,11 +272,11 @@ class Ie {
     const e = t.getAttribute("field");
     let n = G.get(t);
     if (!n && e) {
-      const i = T.get(e);
+      const i = N.get(e);
       i && (i.renderer || i.editor) && (n = i, G.set(t, n));
     }
-    const o = n?.renderer !== void 0, s = n?.editor !== void 0;
-    return n !== void 0 && (o || s);
+    const o = n?.renderer !== void 0, a = n?.editor !== void 0;
+    return n !== void 0 && (o || a);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -290,31 +290,31 @@ class Ie {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = Ae(t);
+    const e = Te(t);
     if (!e)
       return;
     const n = /* @__PURE__ */ new WeakMap();
     return (o) => {
-      const s = o.cellEl;
-      if (s) {
-        const u = n.get(s);
-        if (u)
-          return b(() => {
-            u.root.render(e(o));
-          }), u.container;
-        const g = document.createElement("div");
-        g.className = "react-cell-renderer", g.style.display = "contents";
-        const v = S(g);
-        return b(() => {
+      const a = o.cellEl;
+      if (a) {
+        const l = n.get(a);
+        if (l)
+          return R(() => {
+            l.root.render(e(o));
+          }), l.container;
+        const m = document.createElement("div");
+        m.className = "react-cell-renderer", m.style.display = "contents";
+        const v = S(m);
+        return R(() => {
           v.render(e(o));
-        }), n.set(s, { root: v, container: g, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: v, container: g }), g;
+        }), n.set(a, { root: v, container: m, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: v, container: m }), m;
       }
       const i = document.createElement("div");
       i.className = "react-cell-renderer", i.style.display = "contents";
-      const d = S(i);
-      return b(() => {
-        d.render(e(o));
-      }), this.mountedViews.push({ root: d, container: i }), i;
+      const s = S(i);
+      return R(() => {
+        s.render(e(o));
+      }), this.mountedViews.push({ root: s, container: i }), i;
     };
   }
   /**
@@ -322,14 +322,14 @@ class Ie {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = Ne(t);
+    const e = Ve(t);
     return e ? (n) => {
       const o = document.createElement("div");
       o.className = "react-cell-editor", o.style.display = "contents";
-      const s = S(o);
-      return b(() => {
-        s.render(e(n));
-      }), this.mountedViews.push({ root: s, container: o }), o;
+      const a = S(o);
+      return R(() => {
+        a.render(e(n));
+      }), this.mountedViews.push({ root: a, container: o }), o;
     } : () => document.createElement("div");
   }
   /**
@@ -337,15 +337,15 @@ class Ie {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = Se(t);
+    const e = Pe(t);
     if (e)
       return (n, o) => {
-        const s = document.createElement("div");
-        s.className = "react-detail-panel";
-        const i = { row: n, rowIndex: o }, d = S(s);
-        return b(() => {
-          d.render(e(i));
-        }), this.mountedViews.push({ root: d, container: s }), s;
+        const a = document.createElement("div");
+        a.className = "react-detail-panel";
+        const i = { row: n, rowIndex: o }, s = S(a);
+        return R(() => {
+          s.render(e(i));
+        }), this.mountedViews.push({ root: s, container: a }), a;
       };
   }
   /**
@@ -362,15 +362,15 @@ class Ie {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(t) {
-    const e = ce(t);
+    const e = le(t);
     if (e)
       return (n, o) => {
-        const s = document.createElement("div");
-        s.className = "react-responsive-card";
-        const i = { row: n, index: o }, d = S(s);
-        return b(() => {
-          d.render(e(i));
-        }), this.mountedViews.push({ root: d, container: s }), s;
+        const a = document.createElement("div");
+        a.className = "react-responsive-card";
+        const i = { row: n, index: o }, s = S(a);
+        return R(() => {
+          s.render(e(i));
+        }), this.mountedViews.push({ root: s, container: a }), a;
       };
   }
   /**
@@ -378,25 +378,25 @@ class Ie {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = De(t);
+    const e = Ae(t);
     if (!e)
       return;
     const n = t.closest("tbw-grid");
     return (o) => {
-      const s = {
+      const a = {
         grid: n ?? o
       }, i = S(o);
-      return b(() => {
-        i.render(e(s));
+      return R(() => {
+        i.render(e(a));
       }), this.mountedViews.push({ root: i, container: o }), () => {
-        const d = this.mountedViews.findIndex((u) => u.container === o);
-        if (d !== -1) {
-          const { root: u } = this.mountedViews[d];
+        const s = this.mountedViews.findIndex((l) => l.container === o);
+        if (s !== -1) {
+          const { root: l } = this.mountedViews[s];
           try {
-            u.unmount();
+            l.unmount();
           } catch {
           }
-          this.mountedViews.splice(d, 1);
+          this.mountedViews.splice(s, 1);
         }
       };
     };
@@ -445,7 +445,7 @@ class Ie {
       const n = document.createElement("span");
       n.style.display = "contents";
       const o = S(n);
-      return this.mountedViews.push({ root: o, container: n }), b(() => {
+      return this.mountedViews.push({ root: o, container: n }), R(() => {
         o.render(t(e));
       }), n;
     };
@@ -459,7 +459,7 @@ class Ie {
       const n = document.createElement("span");
       n.style.display = "contents";
       const o = S(n);
-      return this.mountedViews.push({ root: o, container: n }), b(() => {
+      return this.mountedViews.push({ root: o, container: n }), R(() => {
         o.render(t(e));
       }), n;
     };
@@ -491,14 +491,14 @@ class Ie {
     }
   }
 }
-const Te = {
+const Fe = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function Ve(r) {
+function Me(r) {
   const t = new Set(r);
   for (const e of r) {
-    const n = Te[e];
+    const n = Fe[e];
     if (n)
       for (const o of n)
         t.has(o) || console.warn(
@@ -506,50 +506,51 @@ function Ve(r) {
         );
   }
 }
-function ke(r) {
-  const t = [], e = [];
-  for (const [s, i] of Object.entries(r)) {
-    if (i === void 0 || i === !1) continue;
-    const d = s;
-    e.push(d);
+function Le(r) {
+  const t = [], e = [], n = { ...r };
+  n.multiSort !== void 0 ? delete n.sorting : n.sorting !== void 0 && (n.multiSort = n.sorting, delete n.sorting);
+  for (const [i, s] of Object.entries(n)) {
+    if (s === void 0 || s === !1) continue;
+    const l = i;
+    e.push(l);
   }
-  Ve(e);
-  const n = [
+  Me(e);
+  const o = [
     "selection",
     "editing",
     // Then everything else in the order they were specified
-    ...e.filter((s) => s !== "selection" && s !== "editing")
-  ], o = [...new Set(n)].filter((s) => e.includes(s));
-  for (const s of o) {
-    const i = r[s];
-    if (i === void 0 || i === !1) continue;
-    const d = pe(s, i);
-    d && t.push(d);
+    ...e.filter((i) => i !== "selection" && i !== "editing")
+  ], a = [...new Set(o)].filter((i) => e.includes(i));
+  for (const i of a) {
+    const s = r[i];
+    if (s === void 0 || s === !1) continue;
+    const l = he(i, s);
+    l && t.push(l);
   }
   return t;
 }
-let ie = !1, z = null;
-function Y() {
-  return ie || (z = new Ie(), ae.registerAdapter(z), ie = !0), z;
+let ce = !1, _ = null;
+function Z() {
+  return ce || (_ = new ke(), ue.registerAdapter(_), ce = !0), _;
 }
-Y();
-function Fe(r) {
+Z();
+function Oe(r) {
   const e = r.getPluginByName?.("masterDetail");
   e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
 }
-function Me(r, t) {
+function Be(r, t) {
   const e = r;
-  if (!r.querySelector("tbw-grid-responsive-card") || !ce(r)) return;
-  const s = e.getPluginByName?.("responsive");
-  if (s && typeof s.setCardRenderer == "function") {
+  if (!r.querySelector("tbw-grid-responsive-card") || !le(r)) return;
+  const a = e.getPluginByName?.("responsive");
+  if (a && typeof a.setCardRenderer == "function") {
     const i = t.createResponsiveCardRenderer(r);
-    i && s.setCardRenderer(i);
+    i && a.setCardRenderer(i);
   }
 }
-function Le(r) {
+function je(r) {
   const t = {};
-  return fe.forEach(r, (e) => {
-    if (ge(e)) {
+  return me.forEach(r, (e) => {
+    if (ye(e)) {
       if (e.type && e.type.displayName === "GridDetailPanel") {
         const n = e.props;
         t.masterDetail = {
@@ -563,32 +564,37 @@ function Le(r) {
     }
   }), t;
 }
-const Ue = ue(function(t, e) {
+const Ze = ge(function(t, e) {
   const {
     // Core props
     rows: n,
     gridConfig: o,
-    columns: s,
+    columns: a,
     columnDefaults: i,
-    fitMode: d,
-    editOn: u,
-    customStyles: g,
-    className: v,
-    style: A,
-    children: x,
+    fitMode: s,
+    sortable: l,
+    filterable: m,
+    selectable: v,
+    editOn: x,
+    customStyles: b,
+    className: M,
+    style: T,
+    children: A,
     // Plugin props
     plugins: E,
     // SSR mode
-    ssr: N,
+    ssr: f,
     // Legacy event handlers
-    onRowsChange: I,
+    onRowsChange: p,
     // Feature props and event props are in ...rest
-    ...C
-  } = t, c = P(null), l = P(null), p = Z(Ce), w = [
+    ...g
+  } = t, u = P(null), V = P(null), k = Q(Ee), X = [
     "selection",
     "editing",
     "filtering",
+    "multiSort",
     "sorting",
+    // deprecated alias for multiSort
     "clipboard",
     "contextMenu",
     "reorder",
@@ -607,298 +613,299 @@ const Ue = ue(function(t, e) {
     "print",
     "pivot",
     "serverSide"
-  ], O = D(() => w.map((a) => {
-    const f = C[a];
-    return f !== void 0 ? `${a}:${JSON.stringify(f)}` : "";
-  }).filter(Boolean).join("|"), [C]), k = D(() => {
-    const a = {};
-    for (const f of w)
-      f in C && C[f] !== void 0 && (a[f] = C[f]);
-    return a;
-  }, [O]), Q = D(() => Le(x), [x]), X = D(() => ({ ...Q, ...k }), [k, Q]), j = D(() => E || N ? [] : ke(X), [X, E, N]), M = D(() => {
+  ], de = D(() => X.map((c) => {
+    const d = g[c];
+    return d !== void 0 ? `${c}:${JSON.stringify(d)}` : "";
+  }).filter(Boolean).join("|"), [g]), ee = D(() => {
+    const c = {};
+    for (const d of X)
+      d in g && g[d] !== void 0 && (c[d] = g[d]);
+    return c;
+  }, [de]), te = D(() => je(A), [A]), re = D(() => ({ ...te, ...ee }), [ee, te]), q = D(() => E || f ? [] : Le(re), [re, E, f]), L = D(() => {
     if (E) {
-      const a = new Set(E.map((m) => m.name)), f = j.filter((m) => !a.has(m.name));
-      return [...E, ...f];
+      const c = new Set(E.map((y) => y.name)), d = q.filter((y) => !c.has(y.name));
+      return [...E, ...d];
     }
-    return j;
-  }, [E, j]), L = D(() => {
-    if (!s) return s;
-    const a = we(s);
-    return i ? a.map((f) => ({
+    return q;
+  }, [E, q]), O = D(() => {
+    if (!a) return a;
+    const c = Re(a);
+    return i ? c.map((d) => ({
       ...i,
-      ...f
+      ...d
       // Individual column props override defaults
-    })) : a;
-  }, [s, i]), B = D(() => {
-    const a = Ee(o);
-    if (M.length > 0 && a) {
-      const f = a.plugins || [], m = new Set(f.map((F) => F.name)), R = M.filter((F) => !m.has(F.name));
+    })) : c;
+  }, [a, i]), B = D(() => {
+    const c = De(o), d = {};
+    if (l !== void 0 && (d.sortable = l), m !== void 0 && (d.filterable = m), v !== void 0 && (d.selectable = v), L.length > 0 && c) {
+      const y = c.plugins || [], C = new Set(y.map((F) => F.name)), j = L.filter((F) => !C.has(F.name));
       return {
-        ...a,
-        plugins: [...f, ...R]
+        ...c,
+        ...d,
+        plugins: [...y, ...j]
       };
     }
-    return M.length > 0 && !a ? { plugins: M } : a;
-  }, [o, M]);
-  h(() => {
-    Y().setTypeDefaults(p);
-  }, [p]), h(() => {
-    c.current && (c.current.rows = n);
-  }, [n]), h(() => {
-    c.current && B && (c.current.gridConfig = B);
-  }, [B]), h(() => {
-    c.current && L && (c.current.columns = L);
-  }, [L]), h(() => {
-    c.current && d !== void 0 && (c.current.fitMode = d);
-  }, [d]), h(() => {
-    c.current && u !== void 0 && (c.current.editOn = u);
-  }, [u]), h(() => {
-    const a = c.current;
-    if (!a) return;
-    const f = Y();
-    a.__frameworkAdapter = f, Fe(a), Me(a, f);
-    let m = !1;
-    const R = requestAnimationFrame(() => {
-      m || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
+    return L.length > 0 && !c ? { ...d, plugins: L } : Object.keys(d).length > 0 ? { ...c, ...d } : c;
+  }, [o, L, l, m, v]);
+  w(() => {
+    Z().setTypeDefaults(k);
+  }, [k]), w(() => {
+    u.current && (u.current.rows = n);
+  }, [n]), w(() => {
+    u.current && B && (u.current.gridConfig = B);
+  }, [B]), w(() => {
+    u.current && O && (u.current.columns = O);
+  }, [O]), w(() => {
+    u.current && s !== void 0 && (u.current.fitMode = s);
+  }, [s]), w(() => {
+    u.current && x !== void 0 && (u.current.editOn = x);
+  }, [x]), w(() => {
+    const c = u.current;
+    if (!c) return;
+    const d = Z();
+    c.__frameworkAdapter = d, Oe(c), Be(c, d);
+    let y = !1;
+    const C = requestAnimationFrame(() => {
+      y || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
     });
     return () => {
-      m = !0, cancelAnimationFrame(R);
+      y = !0, cancelAnimationFrame(C);
     };
-  }, []), h(() => {
-    if (!c.current || !g) return;
-    const a = c.current, f = "react-custom-styles";
-    let m = !0;
-    return a.ready?.().then(() => {
-      m && g && (a.registerStyles?.(f, g), l.current = f);
+  }, []), w(() => {
+    if (!u.current || !b) return;
+    const c = u.current, d = "react-custom-styles";
+    let y = !0;
+    return c.ready?.().then(() => {
+      y && b && (c.registerStyles?.(d, b), V.current = d);
     }), () => {
-      m = !1, l.current && (a.unregisterStyles?.(l.current), l.current = null);
+      y = !1, V.current && (c.unregisterStyles?.(V.current), V.current = null);
     };
-  }, [g]), h(() => {
-    const a = c.current;
-    if (!a) return;
-    const f = [];
-    if (I) {
-      const m = ((R) => I(R.detail.rows));
-      a.addEventListener("rows-change", m), f.push(["rows-change", m]);
+  }, [b]), w(() => {
+    const c = u.current;
+    if (!c) return;
+    const d = [];
+    if (p) {
+      const y = ((C) => p(C.detail.rows));
+      c.addEventListener("rows-change", y), d.push(["rows-change", y]);
     }
     return () => {
-      f.forEach(([m, R]) => {
-        a.removeEventListener(m, R);
+      d.forEach(([y, C]) => {
+        c.removeEventListener(y, C);
       });
     };
-  }, [I]);
-  const ee = D(() => Object.keys(q).filter((a) => typeof C[a] == "function").sort().join("|"), [C]), te = P({});
-  for (const a of Object.keys(q))
-    te.current[a] = C[a];
-  return h(() => {
-    const a = c.current;
-    if (!a) return;
-    const f = [];
-    for (const [m, R] of Object.entries(q))
-      if (ee.includes(m)) {
-        const F = ((re) => {
-          te.current[m]?.(re.detail, re);
+  }, [p]);
+  const ne = D(() => Object.keys(z).filter((c) => typeof g[c] == "function").sort().join("|"), [g]), oe = P({});
+  for (const c of Object.keys(z))
+    oe.current[c] = g[c];
+  return w(() => {
+    const c = u.current;
+    if (!c) return;
+    const d = [];
+    for (const [y, C] of Object.entries(z))
+      if (ne.includes(y)) {
+        const j = ((F) => {
+          oe.current[y]?.(F.detail, F);
         });
-        a.addEventListener(R, F), f.push([R, F]);
+        c.addEventListener(C, j), d.push([C, j]);
       }
     return () => {
-      f.forEach(([m, R]) => {
-        a.removeEventListener(m, R);
+      d.forEach(([y, C]) => {
+        c.removeEventListener(y, C);
       });
     };
-  }, [ee]), le(
+  }, [ne]), pe(
     e,
     () => ({
       get element() {
-        return c.current;
+        return u.current;
       },
       async getConfig() {
-        return c.current?.getConfig?.() ?? {};
+        return u.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return c.current?.ready?.();
+        return u.current?.ready?.();
       },
       async forceLayout() {
-        return c.current?.forceLayout?.();
+        return u.current?.forceLayout?.();
       },
-      async toggleGroup(a) {
-        return c.current?.toggleGroup?.(a);
+      async toggleGroup(c) {
+        return u.current?.toggleGroup?.(c);
       },
-      registerStyles(a, f) {
-        c.current?.registerStyles?.(a, f);
+      registerStyles(c, d) {
+        u.current?.registerStyles?.(c, d);
       },
-      unregisterStyles(a) {
-        c.current?.unregisterStyles?.(a);
+      unregisterStyles(c) {
+        u.current?.unregisterStyles?.(c);
       }
     }),
     []
-  ), /* @__PURE__ */ V(
+  ), /* @__PURE__ */ I(
     "tbw-grid",
     {
-      ref: (a) => {
-        if (c.current = a, a) {
-          const f = a;
-          B && (f.gridConfig = B), n && (f.rows = n), L && (f.columns = L);
+      ref: (c) => {
+        if (u.current = c, c) {
+          const d = c;
+          B && (d.gridConfig = B), n && (d.rows = n), O && (d.columns = O);
         }
       },
-      class: v,
-      style: A,
-      children: x
+      class: M,
+      style: T,
+      children: A
     }
   );
 });
-function Ke(r) {
+function Qe(r) {
   const {
     field: t,
     header: e,
     type: n,
     editable: o,
-    sortable: s,
+    sortable: a,
     resizable: i,
-    width: d,
-    minWidth: u,
-    hidden: g,
+    width: s,
+    minWidth: l,
+    hidden: m,
     lockVisible: v,
-    children: A,
-    editor: x,
-    options: E,
-    multi: N,
-    format: I
-  } = r, C = P(null), c = y(
-    (w) => {
-      C.current = w, w && (A && Pe(w, A), x && Ge(w, x));
+    children: x,
+    editor: b,
+    options: M,
+    multi: T,
+    format: A
+  } = r, E = P(null), f = h(
+    (u) => {
+      E.current = u, u && (x && Ne(u, x), b && Ie(u, b));
     },
-    [A, x, t]
-  ), l = typeof d == "number" ? `${d}px` : d, p = {
+    [x, b, t]
+  ), p = typeof s == "number" ? `${s}px` : s, g = {
     field: t,
-    ref: c
+    ref: f
   };
-  return e !== void 0 && (p.header = e), n !== void 0 && (p.type = n), o !== void 0 && (p.editable = o), s !== void 0 && (p.sortable = s), i !== void 0 && (p.resizable = i), l !== void 0 && (p.width = l), u !== void 0 && (p["min-width"] = u), g !== void 0 && (p.hidden = g), v !== void 0 && (p["lock-visible"] = v), N !== void 0 && (p.multi = N), I && (p["data-has-format"] = "true"), E && (p["data-has-options"] = "true"), /* @__PURE__ */ V("tbw-grid-column", { ...p });
+  return e !== void 0 && (g.header = e), n !== void 0 && (g.type = n), o !== void 0 && (g.editable = o), a !== void 0 && (g.sortable = a), i !== void 0 && (g.resizable = i), p !== void 0 && (g.width = p), l !== void 0 && (g["min-width"] = l), m !== void 0 && (g.hidden = m), v !== void 0 && (g["lock-visible"] = v), T !== void 0 && (g.multi = T), A && (g["data-has-format"] = "true"), M && (g["data-has-options"] = "true"), /* @__PURE__ */ I("tbw-grid-column", { ...g });
 }
-function Ye({ children: r }) {
-  return /* @__PURE__ */ V("tbw-grid-tool-buttons", { children: r });
+function Xe({ children: r }) {
+  return /* @__PURE__ */ I("tbw-grid-tool-buttons", { children: r });
 }
-function Ze() {
-  const r = P(null), [t, e] = ne(!1), [n, o] = ne(null);
-  h(() => {
-    const c = r.current;
-    if (!c) return;
-    let l = !0;
+function et() {
+  const r = P(null), [t, e] = ie(!1), [n, o] = ie(null);
+  w(() => {
+    const f = r.current;
+    if (!f) return;
+    let p = !0;
     return (async () => {
       try {
-        if (await c.ready?.(), l) {
+        if (await f.ready?.(), p) {
           e(!0);
-          const w = await c.getConfig?.();
-          l && w && o(w);
+          const u = await f.getConfig?.();
+          p && u && o(u);
         }
       } catch {
       }
     })(), () => {
-      l = !1;
+      p = !1;
     };
   }, []);
-  const s = y(async () => {
-    const c = r.current;
-    return c ? await c.getConfig?.() ?? null : null;
-  }, []), i = y(async () => {
-    const c = r.current;
-    c && await c.forceLayout?.();
-  }, []), d = y(async (c) => {
-    const l = r.current;
-    l && await l.toggleGroup?.(c);
-  }, []), u = y((c, l) => {
-    r.current?.registerStyles?.(c, l);
-  }, []), g = y((c) => {
-    r.current?.unregisterStyles?.(c);
-  }, []), v = y(() => n?.columns ? n.columns.filter((c) => !c.hidden) : [], [n]), A = y(() => {
-    const c = r.current?.element, l = c?.getPluginByName?.("selection");
-    if (!l) {
+  const a = h(async () => {
+    const f = r.current;
+    return f ? await f.getConfig?.() ?? null : null;
+  }, []), i = h(async () => {
+    const f = r.current;
+    f && await f.forceLayout?.();
+  }, []), s = h(async (f) => {
+    const p = r.current;
+    p && await p.toggleGroup?.(f);
+  }, []), l = h((f, p) => {
+    r.current?.registerStyles?.(f, p);
+  }, []), m = h((f) => {
+    r.current?.unregisterStyles?.(f);
+  }, []), v = h(() => n?.columns ? n.columns.filter((f) => !f.hidden) : [], [n]), x = h(() => {
+    const f = r.current?.element, p = f?.getPluginByName?.("selection");
+    if (!p) {
       console.warn("[useGrid] selectAll requires SelectionPlugin");
       return;
     }
-    if (l.config?.mode === "row") {
-      const p = c?.rows ?? [], w = new Set(p.map((O, k) => k));
-      l.selected = w, l.requestAfterRender?.();
+    if (p.config?.mode === "row") {
+      const g = f?.rows ?? [], u = new Set(g.map((V, k) => k));
+      p.selected = u, p.requestAfterRender?.();
     }
-  }, []), x = y(() => {
-    const l = r.current?.element?.getPluginByName?.("selection");
-    l && l.clearSelection?.();
-  }, []), E = y(() => {
-    const l = r.current?.element?.getPluginByName?.("selection");
-    return l ? new Set(l.selected ?? []) : /* @__PURE__ */ new Set();
-  }, []), N = y(() => {
-    const c = r.current?.element, l = c?.getPluginByName?.("selection");
-    if (!l) return [];
-    const p = c?.rows ?? [], w = l.selected ?? /* @__PURE__ */ new Set();
-    return p.filter((O, k) => w.has(k));
-  }, []), I = y((c) => {
-    const p = r.current?.element?.getPluginByName?.("export");
-    if (!p) {
+  }, []), b = h(() => {
+    const p = r.current?.element?.getPluginByName?.("selection");
+    p && p.clearSelection?.();
+  }, []), M = h(() => {
+    const p = r.current?.element?.getPluginByName?.("selection");
+    return p ? new Set(p.selected ?? []) : /* @__PURE__ */ new Set();
+  }, []), T = h(() => {
+    const f = r.current?.element, p = f?.getPluginByName?.("selection");
+    if (!p) return [];
+    const g = f?.rows ?? [], u = p.selected ?? /* @__PURE__ */ new Set();
+    return g.filter((V, k) => u.has(k));
+  }, []), A = h((f) => {
+    const g = r.current?.element?.getPluginByName?.("export");
+    if (!g) {
       console.warn("[useGrid] exportToCsv requires ExportPlugin (use export prop)");
       return;
     }
-    p.exportCsv?.({ filename: c ?? "export.csv" });
-  }, []), C = y((c) => {
-    const p = r.current?.element?.getPluginByName?.("export");
-    if (!p) {
+    g.exportCsv?.({ filename: f ?? "export.csv" });
+  }, []), E = h((f) => {
+    const g = r.current?.element?.getPluginByName?.("export");
+    if (!g) {
       console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
       return;
     }
-    p.exportJson?.({ filename: c ?? "export.json" });
+    g.exportJson?.({ filename: f ?? "export.json" });
   }, []);
   return {
     ref: r,
     element: r.current?.element ?? null,
     isReady: t,
     config: n,
-    getConfig: s,
+    getConfig: a,
     forceLayout: i,
-    toggleGroup: d,
-    registerStyles: u,
-    unregisterStyles: g,
+    toggleGroup: s,
+    registerStyles: l,
+    unregisterStyles: m,
     getVisibleColumns: v,
     // Selection methods
-    selectAll: A,
-    clearSelection: x,
-    getSelectedIndices: E,
-    getSelectedRows: N,
+    selectAll: x,
+    clearSelection: b,
+    getSelectedIndices: M,
+    getSelectedRows: T,
     // Export methods
-    exportToCsv: I,
-    exportToJson: C
+    exportToCsv: A,
+    exportToJson: E
   };
 }
-let se = !1;
-function Qe(r, t, e, n = []) {
-  !se && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (se = !0, console.warn(
+let ae = !1;
+function tt(r, t, e, n = []) {
+  !ae && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (ae = !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);
-  h(() => {
+  w(() => {
     o.current = e;
-  }, [e, ...n]), h(() => {
-    const s = r.current, i = s && "element" in s ? s.element : s;
+  }, [e, ...n]), w(() => {
+    const a = r.current, i = a && "element" in a ? a.element : a;
     if (!i) return;
-    const d = ((u) => {
-      o.current(u);
+    const s = ((l) => {
+      o.current(l);
     });
-    return i.addEventListener(t, d), () => {
-      i.removeEventListener(t, d);
+    return i.addEventListener(t, s), () => {
+      i.removeEventListener(t, s);
     };
   }, [r, t]);
 }
 export {
-  Ue as DataGrid,
-  Ke as GridColumn,
-  xe as GridDetailPanel,
-  ve as GridResponsiveCard,
-  Ye as GridToolButtons,
-  Je as GridToolPanel,
-  _e as GridTypeProvider,
-  Ie as ReactGridAdapter,
-  Ze as useGrid,
-  Qe as useGridEvent,
-  We as useGridTypeDefaults,
-  $e as useTypeDefault
+  Ze as DataGrid,
+  Qe as GridColumn,
+  Ge as GridDetailPanel,
+  be as GridResponsiveCard,
+  Xe as GridToolButtons,
+  Ye as GridToolPanel,
+  Je as GridTypeProvider,
+  ke as ReactGridAdapter,
+  et as useGrid,
+  tt as useGridEvent,
+  Ue as useGridTypeDefaults,
+  Ke as useTypeDefault
 };