@toolbox-web/grid-react 0.5.0 → 0.7.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 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 { createRoot as S } from "react-dom/client";
+import { c as pe } from "./chunks/feature-registry-Y3KvnN54.js";
+function me(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 oe(r) {
+  return r.toLowerCase() === "id" ? "ID" : r.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(me).join(" ");
+}
+const ye = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function he(r) {
+  const t = r.lastIndexOf(":");
+  if (t > 0) {
+    const e = r.slice(t + 1).toLowerCase();
+    if (ye.has(e)) {
+      const n = r.slice(0, t);
+      return {
+        field: n,
+        header: oe(n),
+        type: e
+      };
     }
-  );
+  }
+  return {
+    field: r,
+    header: oe(r)
+  };
+}
+function we(r) {
+  return r.map((t) => typeof t == "string" ? he(t) : t);
 }
-const F = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new Map();
-function $(n) {
-  const t = n.querySelector("tbw-grid-responsive-card");
+const q = {
+  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"
+}, _ = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new Map();
+function ce(r) {
+  const t = r.querySelector("tbw-grid-responsive-card");
   if (t) {
-    const r = F.get(t);
-    if (r) return r;
+    const n = _.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 W.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 ve(r) {
+  const { children: t, cardRowHeight: e = "auto" } = r, n = P(null), o = y(
+    (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);
       }
     },
     [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);
+  h(() => () => {
+    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);
       }
     }
   }, []);
   const s = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ x("tbw-grid-responsive-card", { ref: i, cardRowHeight: s });
+  return /* @__PURE__ */ V("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
 }
-const T = K(null), he = ({ defaults: n, children: t }) => /* @__PURE__ */ x(T.Provider, { value: n, children: t });
-function we() {
-  return z(T);
+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);
 }
-function Re(n) {
-  return z(T)?.[n];
+function $e(r) {
+  return Z(H)?.[r];
 }
-const Y = T;
-function Z(n) {
+const Ce = H;
+function Re(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 b(() => {
+          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 s = S(o);
+    return b(() => {
+      s.render(r(e));
+    }), n && t.set(n, { root: s, container: o }), o;
   };
 }
-function ee(n) {
+function be(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 b(() => {
+      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 Ee(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;
   });
   return {
-    ...n,
+    ...r,
     columns: t
   };
 }
-const W = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
-function re(n) {
-  const t = W.get(n);
+const $ = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new Map();
+function Se(r) {
+  const t = r.querySelector("tbw-grid-detail");
+  if (t) {
+    const n = $.get(t);
+    if (n) return n;
+  }
+  const e = r.id || r.getAttribute("data-grid-id");
+  if (e)
+    return J.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);
+      }
+    },
+    [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);
+      }
+      const g = d.parentNode;
+      g && g.contains(d);
+    }
+  }, []), /* @__PURE__ */ V(
+    "tbw-grid-detail",
+    {
+      ref: s,
+      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);
   if (t) return t;
-  const e = n.id;
+  const e = r.id;
   if (e)
-    return q.get(e);
+    return K.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 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));
     },
-    [o, t]
+    [i, t]
   );
-  return w(() => () => {
-    const u = c.current;
-    u && (W.delete(u), t && q.delete(t));
-  }, [t]), /* @__PURE__ */ x(
+  return h(() => () => {
+    const g = d.current;
+    g && (U.delete(g), t && K.delete(t));
+  }, [t]), /* @__PURE__ */ V(
     "tbw-grid-tool-panel",
     {
-      ref: d,
+      ref: u,
       id: t,
       title: e,
-      icon: r,
-      tooltip: i,
+      icon: n,
+      tooltip: o,
       order: s?.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(), T = /* @__PURE__ */ new Map();
+function Pe(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);
   }
 }
-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 Ge(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);
   }
 }
-function oe(n) {
-  let t = G.get(n)?.renderer;
+function Ae(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 = T.get(e)?.renderer);
   }
   return t;
 }
-function se(n) {
-  let t = G.get(n)?.editor;
+function Ne(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 = T.get(e)?.editor);
   }
   return t;
 }
-function Ce() {
-  return Array.from(k.keys());
-}
-class ce {
+class Ie {
   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 = T.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, s = n?.editor !== void 0;
+    return n !== void 0 && (o || s);
   }
   /**
    * 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 = Ae(t);
     if (!e)
       return;
-    const r = /* @__PURE__ */ new WeakMap();
-    return (i) => {
-      const s = i.cellEl;
+    const n = /* @__PURE__ */ new WeakMap();
+    return (o) => {
+      const s = o.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 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(() => {
+          v.render(e(o));
+        }), n.set(s, { root: v, container: g, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: v, container: g }), g;
       }
-      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 d = S(i);
+      return b(() => {
+        d.render(e(o));
+      }), this.mountedViews.push({ root: d, 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 = Ne(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;
     } : () => document.createElement("div");
   }
   /**
@@ -284,15 +337,15 @@ class ce {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = j(t);
+    const e = Se(t);
     if (e)
-      return (r, i) => {
+      return (n, o) => {
         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;
+        const i = { row: n, rowIndex: o }, d = S(s);
+        return b(() => {
+          d.render(e(i));
+        }), this.mountedViews.push({ root: d, container: s }), s;
       };
   }
   /**
@@ -309,15 +362,15 @@ class ce {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(t) {
-    const e = $(t);
+    const e = ce(t);
     if (e)
-      return (r, i) => {
+      return (n, o) => {
         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;
+        const i = { row: n, index: o }, d = S(s);
+        return b(() => {
+          d.render(e(i));
+        }), this.mountedViews.push({ root: d, container: s }), s;
       };
   }
   /**
@@ -325,25 +378,25 @@ class ce {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = re(t);
+    const e = De(t);
     if (!e)
       return;
-    const r = t.closest("tbw-grid");
-    return (i) => {
+    const n = t.closest("tbw-grid");
+    return (o) => {
       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];
+        grid: n ?? o
+      }, i = S(o);
+      return b(() => {
+        i.render(e(s));
+      }), 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];
           try {
-            d.unmount();
+            u.unmount();
           } catch {
           }
-          this.mountedViews.splice(c, 1);
+          this.mountedViews.splice(d, 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 }), b(() => {
+        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 }), b(() => {
+        o.render(t(e));
+      }), n;
     };
   }
   /**
@@ -427,290 +480,425 @@ 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 Te = {
+  undoRedo: ["editing"],
+  clipboard: ["selection"]
+};
+function Ve(r) {
+  const t = new Set(r);
+  for (const e of r) {
+    const n = Te[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 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);
   }
-  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(() => {
-  });
+  Ve(e);
+  const n = [
+    "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);
+  }
+  return t;
+}
+let ie = !1, z = null;
+function Y() {
+  return ie || (z = new Ie(), ae.registerAdapter(z), ie = !0), z;
+}
+Y();
+function Fe(r) {
+  const e = r.getPluginByName?.("masterDetail");
+  e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
 }
-function ae(n, t) {
-  const e = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !$(n)) return;
+function Me(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") {
-    const o = t.createResponsiveCardRenderer(n);
-    o && s.setCardRenderer(o);
-    return;
+    const i = t.createResponsiveCardRenderer(r);
+    i && s.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 Le(r) {
+  const t = {};
+  return fe.forEach(r, (e) => {
+    if (ge(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 Ue = ue(function(t, e) {
   const {
-    rows: r,
-    gridConfig: i,
+    // Core props
+    rows: n,
+    gridConfig: o,
     columns: s,
-    fitMode: o,
-    editOn: c,
-    customStyles: d,
-    className: u,
-    style: h,
-    children: l,
-    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);
-  }, [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;
+    columnDefaults: i,
+    fitMode: d,
+    editOn: u,
+    customStyles: g,
+    className: v,
+    style: A,
+    children: x,
+    // Plugin props
+    plugins: E,
+    // SSR mode
+    ssr: N,
+    // Legacy event handlers
+    onRowsChange: I,
+    // Feature props and event props are in ...rest
+    ...C
+  } = t, c = P(null), l = P(null), p = Z(Ce), w = [
+    "selection",
+    "editing",
+    "filtering",
+    "sorting",
+    "clipboard",
+    "contextMenu",
+    "reorder",
+    "rowReorder",
+    "visibility",
+    "undoRedo",
+    "tree",
+    "groupingRows",
+    "groupingColumns",
+    "pinnedColumns",
+    "pinnedRows",
+    "masterDetail",
+    "responsive",
+    "columnVirtualization",
+    "export",
+    "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(() => {
+    if (E) {
+      const a = new Set(E.map((m) => m.name)), f = j.filter((m) => !a.has(m.name));
+      return [...E, ...f];
+    }
+    return j;
+  }, [E, j]), L = D(() => {
+    if (!s) return s;
+    const a = we(s);
+    return i ? a.map((f) => ({
+      ...i,
+      ...f
+      // 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));
+      return {
+        ...a,
+        plugins: [...f, ...R]
+      };
+    }
+    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 m = B();
-    a.__frameworkAdapter = m, de(a, m), ae(a, m);
-    let g = !1;
+    const f = Y();
+    a.__frameworkAdapter = f, Fe(a), Me(a, f);
+    let m = !1;
     const R = requestAnimationFrame(() => {
-      g || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
+      m || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
     });
     return () => {
-      g = !0, cancelAnimationFrame(R);
+      m = !0, cancelAnimationFrame(R);
     };
-  }, []), w(() => {
-    if (!f.current || !d) return;
-    const a = f.current, m = "react-custom-styles";
-    let g = !0;
+  }, []), h(() => {
+    if (!c.current || !g) return;
+    const a = c.current, f = "react-custom-styles";
+    let m = !0;
     return a.ready?.().then(() => {
-      g && d && (a.registerStyles?.(m, d), V.current = m);
+      m && g && (a.registerStyles?.(f, g), l.current = f);
     }), () => {
-      g = !1, V.current && (a.unregisterStyles?.(V.current), V.current = null);
+      m = !1, l.current && (a.unregisterStyles?.(l.current), l.current = null);
     };
-  }, [d]), w(() => {
-    const a = f.current;
+  }, [g]), h(() => {
+    const a = c.current;
     if (!a) return;
-    const m = [];
-    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]);
-    }
+    const f = [];
     if (I) {
-      const g = ((R) => I(R));
-      a.addEventListener("sort-change", g), m.push(["sort-change", g]);
+      const m = ((R) => I(R.detail.rows));
+      a.addEventListener("rows-change", m), f.push(["rows-change", m]);
     }
     return () => {
-      m.forEach(([g, R]) => {
-        a.removeEventListener(g, R);
+      f.forEach(([m, R]) => {
+        a.removeEventListener(m, R);
+      });
+    };
+  }, [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);
+        });
+        a.addEventListener(R, F), f.push([R, F]);
+      }
+    return () => {
+      f.forEach(([m, R]) => {
+        a.removeEventListener(m, R);
       });
     };
-  }, [p, D, A, P, I]), X(
+  }, [ee]), le(
     e,
     () => ({
       get element() {
-        return f.current;
+        return c.current;
       },
       async getConfig() {
-        return f.current?.getConfig?.() ?? {};
+        return c.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return f.current?.ready?.();
+        return c.current?.ready?.();
       },
       async forceLayout() {
-        return f.current?.forceLayout?.();
+        return c.current?.forceLayout?.();
       },
       async toggleGroup(a) {
-        return f.current?.toggleGroup?.(a);
+        return c.current?.toggleGroup?.(a);
       },
-      registerStyles(a, m) {
-        f.current?.registerStyles?.(a, m);
+      registerStyles(a, f) {
+        c.current?.registerStyles?.(a, f);
       },
       unregisterStyles(a) {
-        f.current?.unregisterStyles?.(a);
+        c.current?.unregisterStyles?.(a);
       }
     }),
     []
-  ), /* @__PURE__ */ x(
+  ), /* @__PURE__ */ V(
     "tbw-grid",
     {
       ref: (a) => {
-        if (f.current = a, a) {
-          const m = a;
-          C && (m.gridConfig = C), r && (m.rows = r), s && (m.columns = s);
+        if (c.current = a, a) {
+          const f = a;
+          B && (f.gridConfig = B), n && (f.rows = n), L && (f.columns = L);
         }
       },
-      class: u,
-      style: h,
-      children: l
+      class: v,
+      style: A,
+      children: x
     }
   );
 });
-function Ee(n) {
+function Ke(r) {
   const {
     field: t,
     header: e,
-    type: r,
-    editable: i,
+    type: n,
+    editable: o,
     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));
+    resizable: i,
+    width: d,
+    minWidth: u,
+    hidden: g,
+    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));
     },
-    [l, p, t]
-  ), V = typeof c == "number" ? `${c}px` : c, y = {
+    [A, x, t]
+  ), l = typeof d == "number" ? `${d}px` : d, p = {
     field: t,
-    ref: f
+    ref: c
   };
-  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 && (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 });
 }
-function Ae({ children: n }) {
-  return /* @__PURE__ */ x("tbw-grid-tool-buttons", { children: n });
+function Ye({ children: r }) {
+  return /* @__PURE__ */ V("tbw-grid-tool-buttons", { children: r });
 }
-function De() {
-  const n = S(null), [t, e] = O(!1), [r, i] = O(null);
-  w(() => {
-    const l = n.current;
-    if (!l) return;
-    let p = !0;
+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;
     return (async () => {
       try {
-        if (await l.ready?.(), p) {
+        if (await c.ready?.(), l) {
           e(!0);
-          const A = await l.getConfig?.();
-          p && A && i(A);
+          const w = await c.getConfig?.();
+          l && w && o(w);
         }
       } catch {
       }
     })(), () => {
-      p = !1;
+      l = !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 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) {
+      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?.();
+    }
+  }, []), 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) {
+      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) {
+      console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
+      return;
+    }
+    p.exportJson?.({ filename: c ?? "export.json" });
+  }, []);
   return {
-    ref: n,
-    element: n.current?.element ?? null,
+    ref: r,
+    element: r.current?.element ?? null,
     isReady: t,
-    config: r,
+    config: n,
     getConfig: s,
-    forceLayout: o,
-    toggleGroup: c,
-    registerStyles: d,
-    unregisterStyles: u,
-    getVisibleColumns: h
+    forceLayout: i,
+    toggleGroup: d,
+    registerStyles: u,
+    unregisterStyles: g,
+    getVisibleColumns: v,
+    // Selection methods
+    selectAll: A,
+    clearSelection: x,
+    getSelectedIndices: E,
+    getSelectedRows: N,
+    // Export methods
+    exportToCsv: I,
+    exportToJson: C
   };
 }
-function Se(n, t, e, r = []) {
-  const i = S(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);
+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(
+    `[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(() => {
+    o.current = e;
+  }, [e, ...n]), h(() => {
+    const s = r.current, i = s && "element" in s ? s.element : s;
+    if (!i) return;
+    const d = ((u) => {
+      o.current(u);
     });
-    return o.addEventListener(t, c), () => {
-      o.removeEventListener(t, c);
+    return i.addEventListener(t, d), () => {
+      i.removeEventListener(t, d);
     };
-  }, [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
+  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
 };