@toolbox-web/grid-react 0.6.0 → 0.8.0

package/index.js

@@ -1,205 +1,258 @@
-import { jsx as x } from "react/jsx-runtime";
-import { DataGridElement as J } from "@toolbox-web/grid";
-import { useRef as S, useCallback as E, useEffect as w, createContext as K, useContext as z, forwardRef as Q, useMemo as U, useImperativeHandle as X, useState as O } from "react";
-import { flushSync as v } from "react-dom";
-import { createRoot as b } from "react-dom/client";
-const L = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new Map();
-function j(n) {
-  const t = n.querySelector("tbw-grid-detail");
-  if (t) {
-    const r = L.get(t);
-    if (r) return r;
-  }
-  const e = n.id || n.getAttribute("data-grid-id");
-  if (e)
-    return N.get(e);
+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 he } from "./chunks/feature-registry-Y3KvnN54.js";
+function we(r) {
+  return r.charAt(0).toUpperCase() + r.slice(1);
 }
-function me(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = S(null), s = E(
-    (c) => {
-      if (i.current = c, !c) return;
-      L.set(c, t);
-      const d = c.closest("tbw-grid");
-      if (d) {
-        const u = d.id || d.getAttribute("data-grid-id");
-        u && N.set(u, t);
-      }
-    },
-    [t]
-  );
-  return w(() => () => {
-    const c = i.current;
-    if (c) {
-      L.delete(c);
-      const d = c.closest("tbw-grid");
-      if (d) {
-        const h = d.id || d.getAttribute("data-grid-id");
-        h && N.delete(h);
-      }
-      const u = c.parentNode;
-      u && u.contains(c);
-    }
-  }, []), /* @__PURE__ */ x(
-    "tbw-grid-detail",
-    {
-      ref: s,
-      showExpandColumn: e ? void 0 : "false",
-      animation: r === !1 ? "false" : r
+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 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 (ve.has(e)) {
+      const n = r.slice(0, t);
+      return {
+        field: n,
+        header: se(n),
+        type: e
+      };
     }
-  );
+  }
+  return {
+    field: r,
+    header: se(r)
+  };
+}
+function Re(r) {
+  return r.map((t) => typeof t == "string" ? Ce(t) : t);
 }
-const F = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new Map();
-function $(n) {
-  const t = n.querySelector("tbw-grid-responsive-card");
+const z = {
+  onCellClick: "cell-click",
+  onRowClick: "row-click",
+  onCellActivate: "cell-activate",
+  onCellChange: "cell-change",
+  onCellCommit: "cell-commit",
+  onRowCommit: "row-commit",
+  onSortChange: "sort-change",
+  onFilterChange: "filter-change",
+  onColumnResize: "column-resize",
+  onColumnMove: "column-move",
+  onColumnVisibility: "column-visibility",
+  onColumnStateChange: "column-state-change",
+  onSelectionChange: "selection-change",
+  onRowMove: "row-move",
+  onGroupToggle: "group-toggle",
+  onTreeExpand: "tree-expand",
+  onDetailExpand: "detail-expand",
+  onResponsiveChange: "responsive-change",
+  onCopy: "copy",
+  onPaste: "paste",
+  onUndoRedo: "undo-redo",
+  onExportComplete: "export-complete",
+  onPrintStart: "print-start",
+  onPrintComplete: "print-complete"
+}, W = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new Map();
+function le(r) {
+  const t = r.querySelector("tbw-grid-responsive-card");
   if (t) {
-    const r = F.get(t);
-    if (r) return r;
+    const n = W.get(t);
+    if (n) return n;
   }
-  const e = n.id || n.getAttribute("data-grid-id");
+  const e = r.id || r.getAttribute("data-grid-id");
   if (e)
-    return H.get(e);
+    return $.get(e);
 }
-function ye(n) {
-  const { children: t, cardRowHeight: e = "auto" } = n, r = S(null), i = E(
-    (o) => {
-      if (r.current = o, !o) return;
-      F.set(o, t);
-      const c = o.closest("tbw-grid");
-      if (c) {
-        const d = c.id || c.getAttribute("data-grid-id");
-        d && H.set(d, t);
+function be(r) {
+  const { children: t, cardRowHeight: e = "auto" } = r, n = P(null), o = h(
+    (i) => {
+      if (n.current = i, !i) return;
+      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]
   );
   w(() => () => {
-    const o = r.current;
-    if (o) {
-      F.delete(o);
-      const c = o.closest("tbw-grid");
-      if (c) {
-        const d = c.id || c.getAttribute("data-grid-id");
-        d && H.delete(d);
+    const i = n.current;
+    if (i) {
+      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__ */ x("tbw-grid-responsive-card", { ref: i, cardRowHeight: s });
+  const a = e === "auto" ? "auto" : String(e);
+  return /* @__PURE__ */ I("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
 }
-const T = K(null), he = ({ defaults: n, children: t }) => /* @__PURE__ */ x(T.Provider, { value: n, children: t });
-function we() {
-  return z(T);
+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 Re(n) {
-  return z(T)?.[n];
+function Ke(r) {
+  return Q(H)?.[r];
 }
-const Y = T;
-function Z(n) {
+const Ee = H;
+function Se(r) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
-    const r = e.cellEl;
-    if (r) {
-      const o = t.get(r);
-      if (o)
-        return v(() => {
-          o.root.render(n(e));
-        }), o.container;
+    const n = e.cellEl;
+    if (n) {
+      const i = t.get(n);
+      if (i)
+        return R(() => {
+          i.root.render(r(e));
+        }), i.container;
     }
-    const i = document.createElement("div");
-    i.className = "react-cell-renderer", i.style.display = "contents";
-    const s = b(i);
-    return v(() => {
-      s.render(n(e));
-    }), r && t.set(r, { root: s, container: i }), i;
+    const o = document.createElement("div");
+    o.className = "react-cell-renderer", o.style.display = "contents";
+    const a = S(o);
+    return R(() => {
+      a.render(r(e));
+    }), n && t.set(n, { root: a, container: o }), o;
   };
 }
-function ee(n) {
+function xe(r) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
-    const r = b(e);
-    return v(() => {
-      r.render(n(t));
+    const n = S(e);
+    return R(() => {
+      n.render(r(t));
     }), e;
   };
 }
-function te(n) {
-  if (!n) return;
-  if (!n.columns) return n;
-  const t = n.columns.map((e) => {
-    const { renderer: r, editor: i, ...s } = e, o = { ...s };
-    return r && (o.renderer = Z(r)), i && (o.editor = ee(i)), o;
+function De(r) {
+  if (!r) return;
+  if (!r.columns) return r;
+  const t = r.columns.map((e) => {
+    const { renderer: n, editor: o, ...a } = e, i = { ...a };
+    return n && (i.renderer = Se(n)), o && (i.editor = xe(o)), i;
   });
   return {
-    ...n,
+    ...r,
     columns: t
   };
 }
-const W = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
-function re(n) {
-  const t = W.get(n);
+const J = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new Map();
+function Pe(r) {
+  const t = r.querySelector("tbw-grid-detail");
+  if (t) {
+    const n = J.get(t);
+    if (n) return n;
+  }
+  const e = r.id || r.getAttribute("data-grid-id");
+  if (e)
+    return U.get(e);
+}
+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 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 m = s.parentNode;
+      m && m.contains(s);
+    }
+  }, []), /* @__PURE__ */ I(
+    "tbw-grid-detail",
+    {
+      ref: a,
+      showExpandColumn: e ? void 0 : "false",
+      animation: n === !1 ? "false" : n
+    }
+  );
+}
+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 = n.id;
+  const e = r.id;
   if (e)
-    return q.get(e);
+    return Y.get(e);
 }
-function ve(n) {
-  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, c = S(null), d = E(
-    (u) => {
-      c.current = u, u && (W.set(u, o), t && q.set(t, o));
+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));
     },
-    [o, t]
+    [i, t]
   );
   return w(() => () => {
-    const u = c.current;
-    u && (W.delete(u), t && q.delete(t));
-  }, [t]), /* @__PURE__ */ x(
+    const m = s.current;
+    m && (K.delete(m), t && Y.delete(t));
+  }, [t]), /* @__PURE__ */ I(
     "tbw-grid-tool-panel",
     {
-      ref: d,
+      ref: l,
       id: t,
       title: e,
-      icon: r,
-      tooltip: i,
-      order: s?.toString()
+      icon: n,
+      tooltip: o,
+      order: a?.toString()
     }
   );
 }
-const G = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new Map();
-function ne(n, t) {
-  const e = n.getAttribute("field"), r = G.get(n) ?? {};
-  if (r.renderer = t, G.set(n, r), e) {
-    const i = k.get(e) ?? {};
-    i.renderer = t, k.set(e, i);
+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 = N.get(e) ?? {};
+    o.renderer = t, N.set(e, o);
   }
 }
-function ie(n, t) {
-  const e = n.getAttribute("field"), r = G.get(n) ?? {};
-  if (r.editor = t, G.set(n, r), e) {
-    const i = k.get(e) ?? {};
-    i.editor = t, k.set(e, i);
+function Ie(r, t) {
+  const e = r.getAttribute("field"), n = G.get(r) ?? {};
+  if (n.editor = t, G.set(r, n), e) {
+    const o = N.get(e) ?? {};
+    o.editor = t, N.set(e, o);
   }
 }
-function oe(n) {
-  let t = G.get(n)?.renderer;
+function Te(r) {
+  let t = G.get(r)?.renderer;
   if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = k.get(e)?.renderer);
+    const e = r.getAttribute("field");
+    e && (t = N.get(e)?.renderer);
   }
   return t;
 }
-function se(n) {
-  let t = G.get(n)?.editor;
+function Ve(r) {
+  let t = G.get(r)?.editor;
   if (!t) {
-    const e = n.getAttribute("field");
-    e && (t = k.get(e)?.editor);
+    const e = r.getAttribute("field");
+    e && (t = N.get(e)?.editor);
   }
   return t;
 }
-function Ce() {
-  return Array.from(k.keys());
-}
-class ce {
+class ke {
   mountedViews = [];
   typeDefaults = null;
   /**
@@ -217,13 +270,13 @@ class ce {
    */
   canHandle(t) {
     const e = t.getAttribute("field");
-    let r = G.get(t);
-    if (!r && e) {
-      const o = k.get(e);
-      o && (o.renderer || o.editor) && (r = o, G.set(t, r));
+    let n = G.get(t);
+    if (!n && e) {
+      const i = N.get(e);
+      i && (i.renderer || i.editor) && (n = i, G.set(t, n));
     }
-    const i = r?.renderer !== void 0, s = r?.editor !== void 0;
-    return r !== void 0 && (i || 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
@@ -237,31 +290,31 @@ class ce {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = oe(t);
+    const e = Te(t);
     if (!e)
       return;
-    const r = /* @__PURE__ */ new WeakMap();
-    return (i) => {
-      const s = i.cellEl;
-      if (s) {
-        const d = r.get(s);
-        if (d)
-          return v(() => {
-            d.root.render(e(i));
-          }), d.container;
-        const u = document.createElement("div");
-        u.className = "react-cell-renderer", u.style.display = "contents";
-        const h = b(u);
-        return v(() => {
-          h.render(e(i));
-        }), r.set(s, { root: h, container: u, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: h, container: u }), u;
+    const n = /* @__PURE__ */ new WeakMap();
+    return (o) => {
+      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(a, { root: v, container: m, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: v, container: m }), m;
       }
-      const o = document.createElement("div");
-      o.className = "react-cell-renderer", o.style.display = "contents";
-      const c = b(o);
-      return v(() => {
-        c.render(e(i));
-      }), this.mountedViews.push({ root: c, container: o }), o;
+      const i = document.createElement("div");
+      i.className = "react-cell-renderer", i.style.display = "contents";
+      const s = S(i);
+      return R(() => {
+        s.render(e(o));
+      }), this.mountedViews.push({ root: s, container: i }), i;
     };
   }
   /**
@@ -269,14 +322,14 @@ class ce {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = se(t);
-    return e ? (r) => {
-      const i = document.createElement("div");
-      i.className = "react-cell-editor", i.style.display = "contents";
-      const s = b(i);
-      return v(() => {
-        s.render(e(r));
-      }), this.mountedViews.push({ root: s, container: i }), i;
+    const e = Ve(t);
+    return e ? (n) => {
+      const o = document.createElement("div");
+      o.className = "react-cell-editor", o.style.display = "contents";
+      const a = S(o);
+      return R(() => {
+        a.render(e(n));
+      }), this.mountedViews.push({ root: a, container: o }), o;
     } : () => document.createElement("div");
   }
   /**
@@ -284,15 +337,15 @@ class ce {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = j(t);
+    const e = Pe(t);
     if (e)
-      return (r, i) => {
-        const s = document.createElement("div");
-        s.className = "react-detail-panel";
-        const o = { row: r, rowIndex: i }, c = b(s);
-        return v(() => {
-          c.render(e(o));
-        }), this.mountedViews.push({ root: c, container: s }), s;
+      return (n, o) => {
+        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;
       };
   }
   /**
@@ -309,15 +362,15 @@ class ce {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(t) {
-    const e = $(t);
+    const e = le(t);
     if (e)
-      return (r, i) => {
-        const s = document.createElement("div");
-        s.className = "react-responsive-card";
-        const o = { row: r, index: i }, c = b(s);
-        return v(() => {
-          c.render(e(o));
-        }), this.mountedViews.push({ root: c, container: s }), s;
+      return (n, o) => {
+        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;
       };
   }
   /**
@@ -325,25 +378,25 @@ class ce {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = re(t);
+    const e = Ae(t);
     if (!e)
       return;
-    const r = t.closest("tbw-grid");
-    return (i) => {
-      const s = {
-        grid: r ?? i
-      }, o = b(i);
-      return v(() => {
-        o.render(e(s));
-      }), this.mountedViews.push({ root: o, container: i }), () => {
-        const c = this.mountedViews.findIndex((d) => d.container === i);
-        if (c !== -1) {
-          const { root: d } = this.mountedViews[c];
+    const n = t.closest("tbw-grid");
+    return (o) => {
+      const a = {
+        grid: n ?? o
+      }, i = S(o);
+      return R(() => {
+        i.render(e(a));
+      }), this.mountedViews.push({ root: i, container: o }), () => {
+        const s = this.mountedViews.findIndex((l) => l.container === o);
+        if (s !== -1) {
+          const { root: l } = this.mountedViews[s];
           try {
-            d.unmount();
+            l.unmount();
           } catch {
           }
-          this.mountedViews.splice(c, 1);
+          this.mountedViews.splice(s, 1);
         }
       };
     };
@@ -378,10 +431,10 @@ class ce {
     const e = this.typeDefaults[t];
     if (!e)
       return;
-    const r = {
+    const n = {
       editorParams: e.editorParams
     };
-    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), r;
+    return e.renderer && (n.renderer = this.createTypeRenderer(e.renderer)), e.editor && (n.editor = this.createTypeEditor(e.editor)), n;
   }
   /**
    * Creates a renderer function from a React render function for type defaults.
@@ -389,12 +442,12 @@ class ce {
    */
   createTypeRenderer(t) {
     return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = b(r);
-      return this.mountedViews.push({ root: i, container: r }), v(() => {
-        i.render(t(e));
-      }), r;
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const o = S(n);
+      return this.mountedViews.push({ root: o, container: n }), R(() => {
+        o.render(t(e));
+      }), n;
     };
   }
   /**
@@ -403,12 +456,12 @@ class ce {
    */
   createTypeEditor(t) {
     return (e) => {
-      const r = document.createElement("span");
-      r.style.display = "contents";
-      const i = b(r);
-      return this.mountedViews.push({ root: i, container: r }), v(() => {
-        i.render(t(e));
-      }), r;
+      const n = document.createElement("span");
+      n.style.display = "contents";
+      const o = S(n);
+      return this.mountedViews.push({ root: o, container: n }), R(() => {
+        o.render(t(e));
+      }), n;
     };
   }
   /**
@@ -427,229 +480,323 @@ class ce {
    * Unmount a specific container (called when cell is recycled).
    */
   unmount(t) {
-    const e = this.mountedViews.findIndex((r) => r.container === t);
+    const e = this.mountedViews.findIndex((n) => n.container === t);
     if (e !== -1) {
-      const { root: r } = this.mountedViews[e];
+      const { root: n } = this.mountedViews[e];
       try {
-        r.unmount();
+        n.unmount();
       } catch {
       }
       this.mountedViews.splice(e, 1);
     }
   }
 }
-let _ = !1, M = null;
-function B() {
-  return _ || (M = new ce(), J.registerAdapter(M), _ = !0), M;
+const Fe = {
+  undoRedo: ["editing"],
+  clipboard: ["selection"]
+};
+function Me(r) {
+  const t = new Set(r);
+  for (const e of r) {
+    const n = Fe[e];
+    if (n)
+      for (const o of n)
+        t.has(o) || console.warn(
+          `[DataGrid] Feature "${e}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
+        );
+  }
 }
-B();
-function de(n, t) {
-  const e = n, r = e.getPluginByName?.("masterDetail");
-  if (r && typeof r.refreshDetailRenderer == "function") {
-    r.refreshDetailRenderer();
-    return;
+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);
   }
-  const i = n.querySelector("tbw-grid-detail");
-  !i || !j(n) || import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: o }) => {
-    const c = t.createDetailRenderer(n);
-    if (!c) return;
-    const d = i.getAttribute("animation");
-    let u = "slide";
-    d === "false" ? u = !1 : d === "fade" && (u = "fade");
-    const h = i.getAttribute("showExpandColumn") !== "false", l = new o({
-      detailRenderer: c,
-      showExpandColumn: h,
-      animation: u
-    }), p = e.gridConfig || {}, D = p.plugins || [];
-    e.gridConfig = {
-      ...p,
-      plugins: [...D, l]
-    };
-  }).catch(() => {
-  });
+  Me(e);
+  const o = [
+    "selection",
+    "editing",
+    // Then everything else in the order they were specified
+    ...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;
 }
-function ae(n, t) {
-  const e = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !$(n)) return;
-  const s = e.getPluginByName?.("responsive");
-  if (s && typeof s.setCardRenderer == "function") {
-    const o = t.createResponsiveCardRenderer(n);
-    o && s.setCardRenderer(o);
-    return;
+let ce = !1, _ = null;
+function Z() {
+  return ce || (_ = new ke(), ue.registerAdapter(_), ce = !0), _;
+}
+Z();
+function Oe(r) {
+  const e = r.getPluginByName?.("masterDetail");
+  e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
+}
+function Be(r, t) {
+  const e = r;
+  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 && a.setCardRenderer(i);
   }
-  console.warn(
-    `[tbw-grid-react] <GridResponsiveCard> found but ResponsivePlugin is not configured.
-Add ResponsivePlugin to your gridConfig.plugins array:
-
-  import { ResponsivePlugin } from "@toolbox-web/grid/all";
-  const config = {
-    plugins: [new ResponsivePlugin({ breakpoint: 500 })],
-  };`
-  );
 }
-const be = Q(function(t, e) {
+function je(r) {
+  const t = {};
+  return me.forEach(r, (e) => {
+    if (ye(e)) {
+      if (e.type && e.type.displayName === "GridDetailPanel") {
+        const n = e.props;
+        t.masterDetail = {
+          // Use props from the child component for configuration
+          showExpandColumn: n.showExpandColumn ?? !0,
+          animation: n.animation ?? "slide"
+          // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
+        };
+      }
+      e.type && e.type.displayName === "GridResponsiveCard" && (t.responsive = !0);
+    }
+  }), t;
+}
+const Ze = ge(function(t, e) {
   const {
-    rows: r,
-    gridConfig: i,
-    columns: s,
-    fitMode: o,
-    editOn: c,
-    customStyles: d,
-    className: u,
-    style: h,
-    children: l,
+    // Core props
+    rows: n,
+    gridConfig: o,
+    columns: a,
+    columnDefaults: i,
+    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: f,
+    // Legacy event handlers
     onRowsChange: p,
-    onCellEdit: D,
-    onRowClick: A,
-    onColumnStateChange: P,
-    onSortChange: I
-  } = t, f = S(null), V = S(null), y = z(Y), C = U(() => te(i), [i]);
-  return w(() => {
-    B().setTypeDefaults(y);
-  }, [y]), w(() => {
-    f.current && (f.current.rows = r);
-  }, [r]), w(() => {
-    f.current && C && (f.current.gridConfig = C);
-  }, [C]), w(() => {
-    f.current && s && (f.current.columns = s);
+    // Feature props and event props are in ...rest
+    ...g
+  } = t, u = P(null), V = P(null), k = Q(Ee), X = [
+    "selection",
+    "editing",
+    "filtering",
+    "multiSort",
+    "sorting",
+    // deprecated alias for multiSort
+    "clipboard",
+    "contextMenu",
+    "reorder",
+    "rowReorder",
+    "visibility",
+    "undoRedo",
+    "tree",
+    "groupingRows",
+    "groupingColumns",
+    "pinnedColumns",
+    "pinnedRows",
+    "masterDetail",
+    "responsive",
+    "columnVirtualization",
+    "export",
+    "print",
+    "pivot",
+    "serverSide"
+  ], 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 c = new Set(E.map((y) => y.name)), d = q.filter((y) => !c.has(y.name));
+      return [...E, ...d];
+    }
+    return q;
+  }, [E, q]), O = D(() => {
+    if (!a) return a;
+    const c = Re(a);
+    return i ? c.map((d) => ({
+      ...i,
+      ...d
+      // Individual column props override defaults
+    })) : 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 {
+        ...c,
+        ...d,
+        plugins: [...y, ...j]
+      };
+    }
+    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(() => {
-    f.current && o !== void 0 && (f.current.fitMode = o);
-  }, [o]), w(() => {
-    f.current && c !== void 0 && (f.current.editOn = c);
-  }, [c]), w(() => {
-    const a = f.current;
-    if (!a) return;
-    const m = B();
-    a.__frameworkAdapter = m, de(a, m), ae(a, m);
-    let g = !1;
-    const R = requestAnimationFrame(() => {
-      g || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
+    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 () => {
-      g = !0, cancelAnimationFrame(R);
+      y = !0, cancelAnimationFrame(C);
     };
   }, []), w(() => {
-    if (!f.current || !d) return;
-    const a = f.current, m = "react-custom-styles";
-    let g = !0;
-    return a.ready?.().then(() => {
-      g && d && (a.registerStyles?.(m, d), V.current = m);
+    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);
     }), () => {
-      g = !1, V.current && (a.unregisterStyles?.(V.current), V.current = null);
+      y = !1, V.current && (c.unregisterStyles?.(V.current), V.current = null);
     };
-  }, [d]), w(() => {
-    const a = f.current;
-    if (!a) return;
-    const m = [];
+  }, [b]), w(() => {
+    const c = u.current;
+    if (!c) return;
+    const d = [];
     if (p) {
-      const g = ((R) => p(R.detail.rows));
-      a.addEventListener("rows-change", g), m.push(["rows-change", g]);
-    }
-    if (D) {
-      const g = ((R) => D(R));
-      a.addEventListener("cell-edit", g), m.push(["cell-edit", g]);
-    }
-    if (A) {
-      const g = ((R) => A(R));
-      a.addEventListener("row-click", g), m.push(["row-click", g]);
-    }
-    if (P) {
-      const g = ((R) => P(R));
-      a.addEventListener("column-state-change", g), m.push(["column-state-change", g]);
-    }
-    if (I) {
-      const g = ((R) => I(R));
-      a.addEventListener("sort-change", g), m.push(["sort-change", g]);
+      const y = ((C) => p(C.detail.rows));
+      c.addEventListener("rows-change", y), d.push(["rows-change", y]);
     }
     return () => {
-      m.forEach(([g, R]) => {
-        a.removeEventListener(g, R);
+      d.forEach(([y, C]) => {
+        c.removeEventListener(y, C);
       });
     };
-  }, [p, D, A, P, I]), X(
+  }, [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);
+        });
+        c.addEventListener(C, j), d.push([C, j]);
+      }
+    return () => {
+      d.forEach(([y, C]) => {
+        c.removeEventListener(y, C);
+      });
+    };
+  }, [ne]), pe(
     e,
     () => ({
       get element() {
-        return f.current;
+        return u.current;
       },
       async getConfig() {
-        return f.current?.getConfig?.() ?? {};
+        return u.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return f.current?.ready?.();
+        return u.current?.ready?.();
       },
       async forceLayout() {
-        return f.current?.forceLayout?.();
+        return u.current?.forceLayout?.();
       },
-      async toggleGroup(a) {
-        return f.current?.toggleGroup?.(a);
+      async toggleGroup(c) {
+        return u.current?.toggleGroup?.(c);
       },
-      registerStyles(a, m) {
-        f.current?.registerStyles?.(a, m);
+      registerStyles(c, d) {
+        u.current?.registerStyles?.(c, d);
       },
-      unregisterStyles(a) {
-        f.current?.unregisterStyles?.(a);
+      unregisterStyles(c) {
+        u.current?.unregisterStyles?.(c);
       }
     }),
     []
-  ), /* @__PURE__ */ x(
+  ), /* @__PURE__ */ I(
     "tbw-grid",
     {
-      ref: (a) => {
-        if (f.current = a, a) {
-          const m = a;
-          C && (m.gridConfig = C), r && (m.rows = r), s && (m.columns = s);
+      ref: (c) => {
+        if (u.current = c, c) {
+          const d = c;
+          B && (d.gridConfig = B), n && (d.rows = n), O && (d.columns = O);
         }
       },
-      class: u,
-      style: h,
-      children: l
+      class: M,
+      style: T,
+      children: A
     }
   );
 });
-function Ee(n) {
+function Qe(r) {
   const {
     field: t,
     header: e,
-    type: r,
-    editable: i,
-    sortable: s,
-    resizable: o,
-    width: c,
-    minWidth: d,
-    hidden: u,
-    lockVisible: h,
-    children: l,
-    editor: p,
-    options: D,
-    multi: A,
-    format: P
-  } = n, I = S(null), f = E(
-    (C) => {
-      I.current = C, C && (l && ne(C, l), p && ie(C, p));
+    type: n,
+    editable: o,
+    sortable: a,
+    resizable: i,
+    width: s,
+    minWidth: l,
+    hidden: m,
+    lockVisible: v,
+    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));
     },
-    [l, p, t]
-  ), V = typeof c == "number" ? `${c}px` : c, y = {
+    [x, b, t]
+  ), p = typeof s == "number" ? `${s}px` : s, g = {
     field: t,
     ref: f
   };
-  return e !== void 0 && (y.header = e), r !== void 0 && (y.type = r), i !== void 0 && (y.editable = i), s !== void 0 && (y.sortable = s), o !== void 0 && (y.resizable = o), V !== void 0 && (y.width = V), d !== void 0 && (y["min-width"] = d), u !== void 0 && (y.hidden = u), h !== void 0 && (y["lock-visible"] = h), A !== void 0 && (y.multi = A), P && (y["data-has-format"] = "true"), D && (y["data-has-options"] = "true"), /* @__PURE__ */ x("tbw-grid-column", { ...y });
+  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 Ae({ children: n }) {
-  return /* @__PURE__ */ x("tbw-grid-tool-buttons", { children: n });
+function Xe({ children: r }) {
+  return /* @__PURE__ */ I("tbw-grid-tool-buttons", { children: r });
 }
-function De() {
-  const n = S(null), [t, e] = O(!1), [r, i] = O(null);
+function et() {
+  const r = P(null), [t, e] = ie(!1), [n, o] = ie(null);
   w(() => {
-    const l = n.current;
-    if (!l) return;
+    const f = r.current;
+    if (!f) return;
     let p = !0;
     return (async () => {
       try {
-        if (await l.ready?.(), p) {
+        if (await f.ready?.(), p) {
           e(!0);
-          const A = await l.getConfig?.();
-          p && A && i(A);
+          const u = await f.getConfig?.();
+          p && u && o(u);
         }
       } catch {
       }
@@ -657,60 +804,108 @@ function De() {
       p = !1;
     };
   }, []);
-  const s = E(async () => {
-    const l = n.current;
-    return l ? await l.getConfig?.() ?? null : null;
-  }, []), o = E(async () => {
-    const l = n.current;
-    l && await l.forceLayout?.();
-  }, []), c = E(async (l) => {
-    const p = n.current;
-    p && await p.toggleGroup?.(l);
-  }, []), d = E((l, p) => {
-    n.current?.registerStyles?.(l, p);
-  }, []), u = E((l) => {
-    n.current?.unregisterStyles?.(l);
-  }, []), h = E(() => r?.columns ? r.columns.filter((l) => !l.hidden) : [], [r]);
+  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 (p.config?.mode === "row") {
+      const g = f?.rows ?? [], u = new Set(g.map((V, k) => k));
+      p.selected = u, p.requestAfterRender?.();
+    }
+  }, []), 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;
+    }
+    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;
+    }
+    g.exportJson?.({ filename: f ?? "export.json" });
+  }, []);
   return {
-    ref: n,
-    element: n.current?.element ?? null,
+    ref: r,
+    element: r.current?.element ?? null,
     isReady: t,
-    config: r,
-    getConfig: s,
-    forceLayout: o,
-    toggleGroup: c,
-    registerStyles: d,
-    unregisterStyles: u,
-    getVisibleColumns: h
+    config: n,
+    getConfig: a,
+    forceLayout: i,
+    toggleGroup: s,
+    registerStyles: l,
+    unregisterStyles: m,
+    getVisibleColumns: v,
+    // Selection methods
+    selectAll: x,
+    clearSelection: b,
+    getSelectedIndices: M,
+    getSelectedRows: T,
+    // Export methods
+    exportToCsv: A,
+    exportToJson: E
   };
 }
-function Se(n, t, e, r = []) {
-  const i = S(e);
+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);
   w(() => {
-    i.current = e;
-  }, [e, ...r]), w(() => {
-    const s = n.current, o = s && "element" in s ? s.element : s;
-    if (!o) return;
-    const c = ((d) => {
-      i.current(d);
+    o.current = e;
+  }, [e, ...n]), w(() => {
+    const a = r.current, i = a && "element" in a ? a.element : a;
+    if (!i) return;
+    const s = ((l) => {
+      o.current(l);
     });
-    return o.addEventListener(t, c), () => {
-      o.removeEventListener(t, c);
+    return i.addEventListener(t, s), () => {
+      i.removeEventListener(t, s);
     };
-  }, [n, t]);
+  }, [r, t]);
 }
 export {
-  be as DataGrid,
-  Ee as GridColumn,
-  me as GridDetailPanel,
-  ye as GridResponsiveCard,
-  Ae as GridToolButtons,
-  ve as GridToolPanel,
-  he as GridTypeProvider,
-  ce as ReactGridAdapter,
-  Ce as getRegisteredFields,
-  De as useGrid,
-  Se as useGridEvent,
-  we as useGridTypeDefaults,
-  Re 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
 };