@toolbox-web/grid-react 0.8.1 → 0.9.0

package/index.js

@@ -1,38 +1,38 @@
-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 { jsx as E, Fragment as me } from "react/jsx-runtime";
+import { DataGridElement as ye } from "@toolbox-web/grid";
+import { createContext as fe, useContext as j, useRef as G, useCallback as v, useEffect as w, forwardRef as he, useMemo as D, useImperativeHandle as we, Children as ve, isValidElement as Ce, useState as ae } from "react";
+import { flushSync as b } 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);
+import { c as Re } from "./chunks/feature-registry-Y3KvnN54.js";
+function be(n) {
+  return n.charAt(0).toUpperCase() + n.slice(1);
 }
-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(" ");
+function le(n) {
+  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(be).join(" ");
 }
-const ve = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function Ce(r) {
-  const t = r.lastIndexOf(":");
+const Ee = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Se(n) {
+  const t = n.lastIndexOf(":");
   if (t > 0) {
-    const e = r.slice(t + 1).toLowerCase();
-    if (ve.has(e)) {
-      const n = r.slice(0, t);
+    const e = n.slice(t + 1).toLowerCase();
+    if (Ee.has(e)) {
+      const r = n.slice(0, t);
       return {
-        field: n,
-        header: se(n),
+        field: r,
+        header: le(r),
         type: e
       };
     }
   }
   return {
-    field: r,
-    header: se(r)
+    field: n,
+    header: le(n)
   };
 }
-function Re(r) {
-  return r.map((t) => typeof t == "string" ? Ce(t) : t);
+function xe(n) {
+  return n.map((t) => typeof t == "string" ? Se(t) : t);
 }
-const z = {
+const W = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -57,202 +57,206 @@ const z = {
   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");
+}, ee = fe(null), Pe = ({ icons: n, children: t }) => /* @__PURE__ */ E(ee.Provider, { value: n, children: t });
+function et() {
+  return j(ee);
+}
+const De = ee, J = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new Map();
+function ge(n) {
+  const t = n.querySelector("tbw-grid-responsive-card");
   if (t) {
-    const n = W.get(t);
-    if (n) return n;
+    const r = J.get(t);
+    if (r) return r;
   }
-  const e = r.id || r.getAttribute("data-grid-id");
+  const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return $.get(e);
+    return U.get(e);
 }
-function be(r) {
-  const { children: t, cardRowHeight: e = "auto" } = r, n = P(null), o = h(
+function Ge(n) {
+  const { children: t, cardRowHeight: e = "auto" } = n, r = G(null), o = v(
     (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);
+      if (r.current = i, !i) return;
+      J.set(i, t);
+      const c = i.closest("tbw-grid");
+      if (c) {
+        const d = c.id || c.getAttribute("data-grid-id");
+        d && U.set(d, t);
       }
     },
     [t]
   );
   w(() => () => {
-    const i = n.current;
+    const i = r.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);
+      J.delete(i);
+      const c = i.closest("tbw-grid");
+      if (c) {
+        const d = c.id || c.getAttribute("data-grid-id");
+        d && U.delete(d);
       }
     }
   }, []);
   const a = e === "auto" ? "auto" : String(e);
-  return /* @__PURE__ */ I("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
+  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
 }
-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);
+Ge.displayName = "GridResponsiveCard";
+const q = fe(null), Ae = ({ defaults: n, children: t }) => /* @__PURE__ */ E(q.Provider, { value: n, children: t });
+function tt() {
+  return j(q);
 }
-function Ke(r) {
-  return Q(H)?.[r];
+function rt(n) {
+  return j(q)?.[n];
 }
-const Ee = H;
-function Se(r) {
+const Ie = q;
+function Ne(n) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
-    const n = e.cellEl;
-    if (n) {
-      const i = t.get(n);
+    const r = e.cellEl;
+    if (r) {
+      const i = t.get(r);
       if (i)
-        return R(() => {
-          i.root.render(r(e));
+        return b(() => {
+          i.root.render(n(e));
         }), i.container;
     }
     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;
+    return b(() => {
+      a.render(n(e));
+    }), r && t.set(r, { root: a, container: o }), o;
   };
 }
-function xe(r) {
+function Te(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
-    const n = S(e);
-    return R(() => {
-      n.render(r(t));
+    const r = S(e);
+    return b(() => {
+      r.render(n(t));
     }), e;
   };
 }
-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;
+function Ve(n) {
+  if (!n) return;
+  if (!n.columns) return n;
+  const t = n.columns.map((e) => {
+    const { renderer: r, editor: o, ...a } = e, i = { ...a };
+    return r && (i.renderer = Ne(r)), o && (i.editor = Te(o)), i;
   });
   return {
-    ...r,
+    ...n,
     columns: t
   };
 }
-const J = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new Map();
-function Pe(r) {
-  const t = r.querySelector("tbw-grid-detail");
+const K = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+function ke(n) {
+  const t = n.querySelector("tbw-grid-detail");
   if (t) {
-    const n = J.get(t);
-    if (n) return n;
+    const r = K.get(t);
+    if (r) return r;
   }
-  const e = r.id || r.getAttribute("data-grid-id");
+  const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return U.get(e);
+    return Y.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);
+function Le(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = G(null), a = v(
+    (c) => {
+      if (o.current = c, !c) return;
+      K.set(c, t);
+      const d = c.closest("tbw-grid");
+      if (d) {
+        const p = d.id || d.getAttribute("data-grid-id");
+        p && Y.set(p, 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 c = o.current;
+    if (c) {
+      K.delete(c);
+      const d = c.closest("tbw-grid");
+      if (d) {
+        const C = d.id || d.getAttribute("data-grid-id");
+        C && Y.delete(C);
       }
-      const m = s.parentNode;
-      m && m.contains(s);
+      const p = c.parentNode;
+      p && p.contains(c);
     }
-  }, []), /* @__PURE__ */ I(
+  }, []), /* @__PURE__ */ E(
     "tbw-grid-detail",
     {
       ref: a,
       showExpandColumn: e ? void 0 : "false",
-      animation: n === !1 ? "false" : n
+      animation: r === !1 ? "false" : r
     }
   );
 }
-Ge.displayName = "GridDetailPanel";
-const K = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
-function Ae(r) {
-  const t = K.get(r);
+Le.displayName = "GridDetailPanel";
+const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
+function Fe(n) {
+  const t = Z.get(n);
   if (t) return t;
-  const e = r.id;
+  const e = n.id;
   if (e)
-    return Y.get(e);
+    return Q.get(e);
 }
-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));
+function nt(n) {
+  const { id: t, title: e, icon: r, tooltip: o, order: a = 100, children: i } = n, c = G(null), d = v(
+    (p) => {
+      c.current = p, p && (Z.set(p, i), t && Q.set(t, i));
     },
     [i, t]
   );
   return w(() => () => {
-    const m = s.current;
-    m && (K.delete(m), t && Y.delete(t));
-  }, [t]), /* @__PURE__ */ I(
+    const p = c.current;
+    p && (Z.delete(p), t && Q.delete(t));
+  }, [t]), /* @__PURE__ */ E(
     "tbw-grid-tool-panel",
     {
-      ref: l,
+      ref: d,
       id: t,
       title: e,
-      icon: n,
+      icon: r,
       tooltip: o,
       order: a?.toString()
     }
   );
 }
-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);
+const N = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new Map();
+function Me(n, t) {
+  const e = n.getAttribute("field"), r = N.get(n) ?? {};
+  if (r.renderer = t, N.set(n, r), e) {
+    const o = V.get(e) ?? {};
+    o.renderer = t, V.set(e, o);
   }
 }
-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, t) {
+  const e = n.getAttribute("field"), r = N.get(n) ?? {};
+  if (r.editor = t, N.set(n, r), e) {
+    const o = V.get(e) ?? {};
+    o.editor = t, V.set(e, o);
   }
 }
-function Te(r) {
-  let t = G.get(r)?.renderer;
+function Be(n) {
+  let t = N.get(n)?.renderer;
   if (!t) {
-    const e = r.getAttribute("field");
-    e && (t = N.get(e)?.renderer);
+    const e = n.getAttribute("field");
+    e && (t = V.get(e)?.renderer);
   }
   return t;
 }
-function Ve(r) {
-  let t = G.get(r)?.editor;
+function je(n) {
+  let t = N.get(n)?.editor;
   if (!t) {
-    const e = r.getAttribute("field");
-    e && (t = N.get(e)?.editor);
+    const e = n.getAttribute("field");
+    e && (t = V.get(e)?.editor);
   }
   return t;
 }
-class ke {
+class He {
   mountedViews = [];
   typeDefaults = null;
   /**
@@ -270,13 +274,13 @@ class ke {
    */
   canHandle(t) {
     const e = t.getAttribute("field");
-    let n = G.get(t);
-    if (!n && e) {
-      const i = N.get(e);
-      i && (i.renderer || i.editor) && (n = i, G.set(t, n));
+    let r = N.get(t);
+    if (!r && e) {
+      const i = V.get(e);
+      i && (i.renderer || i.editor) && (r = i, N.set(t, r));
     }
-    const o = n?.renderer !== void 0, a = n?.editor !== void 0;
-    return n !== void 0 && (o || a);
+    const o = r?.renderer !== void 0, a = r?.editor !== void 0;
+    return r !== void 0 && (o || a);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -290,31 +294,31 @@ class ke {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = Te(t);
+    const e = Be(t);
     if (!e)
       return;
-    const n = /* @__PURE__ */ new WeakMap();
+    const r = /* @__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 d = r.get(a);
+        if (d)
+          return b(() => {
+            d.root.render(e(o));
+          }), d.container;
+        const p = document.createElement("div");
+        p.className = "react-cell-renderer", p.style.display = "contents";
+        const C = S(p);
+        return b(() => {
+          C.render(e(o));
+        }), r.set(a, { root: C, container: p, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: C, container: p }), p;
       }
       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;
+      const c = S(i);
+      return b(() => {
+        c.render(e(o));
+      }), this.mountedViews.push({ root: c, container: i }), i;
     };
   }
   /**
@@ -322,13 +326,13 @@ class ke {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = Ve(t);
-    return e ? (n) => {
+    const e = je(t);
+    return e ? (r) => {
       const o = document.createElement("div");
       o.className = "react-cell-editor", o.style.display = "contents";
       const a = S(o);
-      return R(() => {
-        a.render(e(n));
+      return b(() => {
+        a.render(e(r));
       }), this.mountedViews.push({ root: a, container: o }), o;
     } : () => document.createElement("div");
   }
@@ -337,15 +341,15 @@ class ke {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = Pe(t);
+    const e = ke(t);
     if (e)
-      return (n, o) => {
+      return (r, 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;
+        const i = { row: r, rowIndex: o }, c = S(a);
+        return b(() => {
+          c.render(e(i));
+        }), this.mountedViews.push({ root: c, container: a }), a;
       };
   }
   /**
@@ -362,15 +366,15 @@ class ke {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(t) {
-    const e = le(t);
+    const e = ge(t);
     if (e)
-      return (n, o) => {
+      return (r, 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;
+        const i = { row: r, index: o }, c = S(a);
+        return b(() => {
+          c.render(e(i));
+        }), this.mountedViews.push({ root: c, container: a }), a;
       };
   }
   /**
@@ -378,25 +382,25 @@ class ke {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = Ae(t);
+    const e = Fe(t);
     if (!e)
       return;
-    const n = t.closest("tbw-grid");
+    const r = t.closest("tbw-grid");
     return (o) => {
       const a = {
-        grid: n ?? o
+        grid: r ?? o
       }, i = S(o);
-      return R(() => {
+      return b(() => {
         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];
+        const c = this.mountedViews.findIndex((d) => d.container === o);
+        if (c !== -1) {
+          const { root: d } = this.mountedViews[c];
           try {
-            l.unmount();
+            d.unmount();
           } catch {
           }
-          this.mountedViews.splice(s, 1);
+          this.mountedViews.splice(c, 1);
         }
       };
     };
@@ -431,10 +435,10 @@ class ke {
     const e = this.typeDefaults[t];
     if (!e)
       return;
-    const n = {
+    const r = {
       editorParams: e.editorParams
     };
-    return e.renderer && (n.renderer = this.createTypeRenderer(e.renderer)), e.editor && (n.editor = this.createTypeEditor(e.editor)), n;
+    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), r;
   }
   /**
    * Creates a renderer function from a React render function for type defaults.
@@ -442,12 +446,12 @@ class ke {
    */
   createTypeRenderer(t) {
     return (e) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const o = S(n);
-      return this.mountedViews.push({ root: o, container: n }), R(() => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const o = S(r);
+      return this.mountedViews.push({ root: o, container: r }), b(() => {
         o.render(t(e));
-      }), n;
+      }), r;
     };
   }
   /**
@@ -456,12 +460,12 @@ class ke {
    */
   createTypeEditor(t) {
     return (e) => {
-      const n = document.createElement("span");
-      n.style.display = "contents";
-      const o = S(n);
-      return this.mountedViews.push({ root: o, container: n }), R(() => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const o = S(r);
+      return this.mountedViews.push({ root: o, container: r }), b(() => {
         o.render(t(e));
-      }), n;
+      }), r;
     };
   }
   /**
@@ -480,41 +484,41 @@ class ke {
    * Unmount a specific container (called when cell is recycled).
    */
   unmount(t) {
-    const e = this.mountedViews.findIndex((n) => n.container === t);
+    const e = this.mountedViews.findIndex((r) => r.container === t);
     if (e !== -1) {
-      const { root: n } = this.mountedViews[e];
+      const { root: r } = this.mountedViews[e];
       try {
-        n.unmount();
+        r.unmount();
       } catch {
       }
       this.mountedViews.splice(e, 1);
     }
   }
 }
-const Fe = {
+const qe = {
   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)
+function ze(n) {
+  const t = new Set(n);
+  for (const e of n) {
+    const r = qe[e];
+    if (r)
+      for (const o of r)
         t.has(o) || console.warn(
           `[DataGrid] Feature "${e}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
         );
   }
 }
-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);
+function _e(n) {
+  const t = [], e = [], r = { ...n };
+  r.multiSort !== void 0 ? delete r.sorting : r.sorting !== void 0 && (r.multiSort = r.sorting, delete r.sorting);
+  for (const [i, c] of Object.entries(r)) {
+    if (c === void 0 || c === !1) continue;
+    const d = i;
+    e.push(d);
   }
-  Me(e);
+  ze(e);
   const o = [
     "selection",
     "editing",
@@ -522,41 +526,41 @@ function Le(r) {
     ...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);
+    const c = n[i];
+    if (c === void 0 || c === !1) continue;
+    const d = Re(i, c);
+    d && t.push(d);
   }
   return t;
 }
-let ce = !1, _ = null;
-function Z() {
-  return ce || (_ = new ke(), ue.registerAdapter(_), ce = !0), _;
+let de = !1, $ = null;
+function X() {
+  return de || ($ = new He(), ye.registerAdapter($), de = !0), $;
 }
-Z();
-function Oe(r) {
-  const e = r.getPluginByName?.("masterDetail");
+X();
+function We(n) {
+  const e = n.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;
+function $e(n, t) {
+  const e = n;
+  if (!n.querySelector("tbw-grid-responsive-card") || !ge(n)) return;
   const a = e.getPluginByName?.("responsive");
   if (a && typeof a.setCardRenderer == "function") {
-    const i = t.createResponsiveCardRenderer(r);
+    const i = t.createResponsiveCardRenderer(n);
     i && a.setCardRenderer(i);
   }
 }
-function je(r) {
+function Je(n) {
   const t = {};
-  return me.forEach(r, (e) => {
-    if (ye(e)) {
+  return ve.forEach(n, (e) => {
+    if (Ce(e)) {
       if (e.type && e.type.displayName === "GridDetailPanel") {
-        const n = e.props;
+        const r = e.props;
         t.masterDetail = {
           // Use props from the child component for configuration
-          showExpandColumn: n.showExpandColumn ?? !0,
-          animation: n.animation ?? "slide"
+          showExpandColumn: r.showExpandColumn ?? !0,
+          animation: r.animation ?? "slide"
           // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
         };
       }
@@ -564,31 +568,32 @@ function je(r) {
     }
   }), t;
 }
-const Ze = ge(function(t, e) {
+const ot = he(function(t, e) {
   const {
     // Core props
-    rows: n,
+    rows: r,
     gridConfig: o,
     columns: a,
     columnDefaults: i,
-    fitMode: s,
-    sortable: l,
-    filterable: m,
-    selectable: v,
-    editOn: x,
-    customStyles: b,
-    className: M,
-    style: T,
-    children: A,
+    fitMode: c,
+    sortable: d,
+    filterable: p,
+    selectable: C,
+    loading: x,
+    editOn: P,
+    customStyles: A,
+    className: k,
+    style: F,
+    children: T,
     // Plugin props
-    plugins: E,
+    plugins: u,
     // SSR mode
-    ssr: f,
+    ssr: g,
     // Legacy event handlers
-    onRowsChange: p,
+    onRowsChange: m,
     // Feature props and event props are in ...rest
-    ...g
-  } = t, u = P(null), V = P(null), k = Q(Ee), X = [
+    ...h
+  } = t, f = G(null), I = G(null), te = j(Ie), z = j(De), re = [
     "selection",
     "editing",
     "filtering",
@@ -613,299 +618,327 @@ const Ze = ge(function(t, e) {
     "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];
+  ], pe = D(() => re.map((s) => {
+    const l = h[s];
+    return l !== void 0 ? `${s}:${JSON.stringify(l)}` : "";
+  }).filter(Boolean).join("|"), [h]), ne = D(() => {
+    const s = {};
+    for (const l of re)
+      l in h && h[l] !== void 0 && (s[l] = h[l]);
+    return s;
+  }, [pe]), oe = D(() => Je(T), [T]), ie = D(() => ({ ...oe, ...ne }), [ne, oe]), _ = D(() => u || g ? [] : _e(ie), [ie, u, g]), M = D(() => {
+    if (u) {
+      const s = new Set(u.map((y) => y.name)), l = _.filter((y) => !s.has(y.name));
+      return [...u, ...l];
     }
-    return q;
-  }, [E, q]), O = D(() => {
+    return _;
+  }, [u, _]), O = D(() => {
     if (!a) return a;
-    const c = Re(a);
-    return i ? c.map((d) => ({
+    const s = xe(a);
+    return i ? s.map((l) => ({
       ...i,
-      ...d
+      ...l
       // Individual column props override defaults
-    })) : c;
+    })) : s;
   }, [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));
+    const s = Ve(o), l = {};
+    if (d !== void 0 && (l.sortable = d), p !== void 0 && (l.filterable = p), C !== void 0 && (l.selectable = C), z) {
+      const y = s?.icons || o?.icons || {};
+      l.icons = { ...z, ...y };
+    }
+    if (M.length > 0 && s) {
+      const y = s.plugins || [], R = new Set(y.map((L) => L.name)), H = M.filter((L) => !R.has(L.name));
       return {
-        ...c,
-        ...d,
-        plugins: [...y, ...j]
+        ...s,
+        ...l,
+        plugins: [...y, ...H]
       };
     }
-    return L.length > 0 && !c ? { ...d, plugins: L } : Object.keys(d).length > 0 ? { ...c, ...d } : c;
-  }, [o, L, l, m, v]);
+    return M.length > 0 && !s ? { ...l, plugins: M } : Object.keys(l).length > 0 ? { ...s, ...l } : s;
+  }, [o, M, d, p, C, z]);
   w(() => {
-    Z().setTypeDefaults(k);
-  }, [k]), w(() => {
-    u.current && (u.current.rows = n);
-  }, [n]), w(() => {
-    u.current && B && (u.current.gridConfig = B);
+    X().setTypeDefaults(te);
+  }, [te]), w(() => {
+    f.current && (f.current.rows = r);
+  }, [r]), w(() => {
+    f.current && B && (f.current.gridConfig = B);
   }, [B]), w(() => {
-    u.current && O && (u.current.columns = O);
+    f.current && O && (f.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);
+    f.current && c !== void 0 && (f.current.fitMode = c);
+  }, [c]), w(() => {
+    f.current && P !== void 0 && (f.current.editOn = P);
+  }, [P]), w(() => {
+    f.current && x !== void 0 && (f.current.loading = x);
   }, [x]), w(() => {
-    const c = u.current;
-    if (!c) return;
-    const d = Z();
-    c.__frameworkAdapter = d, Oe(c), Be(c, d);
+    const s = f.current;
+    if (!s) return;
+    const l = X();
+    s.__frameworkAdapter = l, We(s), $e(s, l);
     let y = !1;
-    const C = requestAnimationFrame(() => {
-      y || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
+    const R = requestAnimationFrame(() => {
+      y || (typeof s.refreshColumns == "function" && s.refreshColumns(), typeof s.refreshShellHeader == "function" && s.refreshShellHeader());
     });
     return () => {
-      y = !0, cancelAnimationFrame(C);
+      y = !0, cancelAnimationFrame(R);
     };
   }, []), w(() => {
-    if (!u.current || !b) return;
-    const c = u.current, d = "react-custom-styles";
+    if (!f.current || !A) return;
+    const s = f.current, l = "react-custom-styles";
     let y = !0;
-    return c.ready?.().then(() => {
-      y && b && (c.registerStyles?.(d, b), V.current = d);
+    return s.ready?.().then(() => {
+      y && A && (s.registerStyles?.(l, A), I.current = l);
     }), () => {
-      y = !1, V.current && (c.unregisterStyles?.(V.current), V.current = null);
+      y = !1, I.current && (s.unregisterStyles?.(I.current), I.current = null);
     };
-  }, [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]);
+  }, [A]), w(() => {
+    const s = f.current;
+    if (!s) return;
+    const l = [];
+    if (m) {
+      const y = ((R) => m(R.detail.rows));
+      s.addEventListener("rows-change", y), l.push(["rows-change", y]);
     }
     return () => {
-      d.forEach(([y, C]) => {
-        c.removeEventListener(y, C);
+      l.forEach(([y, R]) => {
+        s.removeEventListener(y, R);
       });
     };
-  }, [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];
+  }, [m]);
+  const se = D(() => Object.keys(W).filter((s) => typeof h[s] == "function").sort().join("|"), [h]), ce = G({});
+  for (const s of Object.keys(W))
+    ce.current[s] = h[s];
   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);
+    const s = f.current;
+    if (!s) return;
+    const l = [];
+    for (const [y, R] of Object.entries(W))
+      if (se.includes(y)) {
+        const H = ((L) => {
+          ce.current[y]?.(L.detail, L);
         });
-        c.addEventListener(C, j), d.push([C, j]);
+        s.addEventListener(R, H), l.push([R, H]);
       }
     return () => {
-      d.forEach(([y, C]) => {
-        c.removeEventListener(y, C);
+      l.forEach(([y, R]) => {
+        s.removeEventListener(y, R);
       });
     };
-  }, [ne]), pe(
+  }, [se]), we(
     e,
     () => ({
       get element() {
-        return u.current;
+        return f.current;
       },
       async getConfig() {
-        return u.current?.getConfig?.() ?? {};
+        return f.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return u.current?.ready?.();
+        return f.current?.ready?.();
       },
       async forceLayout() {
-        return u.current?.forceLayout?.();
+        return f.current?.forceLayout?.();
+      },
+      async toggleGroup(s) {
+        return f.current?.toggleGroup?.(s);
       },
-      async toggleGroup(c) {
-        return u.current?.toggleGroup?.(c);
+      registerStyles(s, l) {
+        f.current?.registerStyles?.(s, l);
       },
-      registerStyles(c, d) {
-        u.current?.registerStyles?.(c, d);
+      unregisterStyles(s) {
+        f.current?.unregisterStyles?.(s);
       },
-      unregisterStyles(c) {
-        u.current?.unregisterStyles?.(c);
+      setRowLoading(s, l) {
+        f.current?.setRowLoading?.(s, l);
+      },
+      setCellLoading(s, l, y) {
+        f.current?.setCellLoading?.(s, l, y);
+      },
+      isRowLoading(s) {
+        return f.current?.isRowLoading?.(s) ?? !1;
+      },
+      isCellLoading(s, l) {
+        return f.current?.isCellLoading?.(s, l) ?? !1;
+      },
+      clearAllLoading() {
+        f.current?.clearAllLoading?.();
       }
     }),
     []
-  ), /* @__PURE__ */ I(
+  ), /* @__PURE__ */ E(
     "tbw-grid",
     {
-      ref: (c) => {
-        if (u.current = c, c) {
-          const d = c;
-          B && (d.gridConfig = B), n && (d.rows = n), O && (d.columns = O);
+      ref: (s) => {
+        if (f.current = s, s) {
+          const l = s;
+          B && (l.gridConfig = B), r && (l.rows = r), O && (l.columns = O);
         }
       },
-      class: M,
-      style: T,
-      children: A
+      class: k,
+      style: F,
+      children: T
     }
   );
 });
-function Qe(r) {
+function it(n) {
   const {
     field: t,
     header: e,
-    type: n,
+    type: r,
     editable: o,
     sortable: a,
     resizable: i,
-    width: s,
-    minWidth: l,
-    hidden: m,
-    lockVisible: v,
+    width: c,
+    minWidth: d,
+    hidden: p,
+    lockVisible: C,
     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));
+    editor: P,
+    options: A,
+    multi: k,
+    format: F
+  } = n, T = G(null), u = v(
+    (h) => {
+      T.current = h, h && (x && Me(h, x), P && Oe(h, P));
     },
-    [x, b, t]
-  ), p = typeof s == "number" ? `${s}px` : s, g = {
+    [x, P, t]
+  ), g = typeof c == "number" ? `${c}px` : c, m = {
     field: t,
-    ref: f
+    ref: u
   };
-  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 });
+  return e !== void 0 && (m.header = e), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), a !== void 0 && (m.sortable = a), i !== void 0 && (m.resizable = i), g !== void 0 && (m.width = g), d !== void 0 && (m["min-width"] = d), p !== void 0 && (m.hidden = p), C !== void 0 && (m["lock-visible"] = C), k !== void 0 && (m.multi = k), F && (m["data-has-format"] = "true"), A && (m["data-has-options"] = "true"), /* @__PURE__ */ E("tbw-grid-column", { ...m });
 }
-function Xe({ children: r }) {
-  return /* @__PURE__ */ I("tbw-grid-tool-buttons", { children: r });
+function st({ children: n }) {
+  return /* @__PURE__ */ E("tbw-grid-tool-buttons", { children: n });
 }
-function et() {
-  const r = P(null), [t, e] = ie(!1), [n, o] = ie(null);
+const ct = ({ icons: n, defaults: t, children: e }) => {
+  let r = e;
+  return t && (r = /* @__PURE__ */ E(Ae, { defaults: t, children: r })), n && (r = /* @__PURE__ */ E(Pe, { icons: n, children: r })), /* @__PURE__ */ E(me, { children: r });
+};
+function at() {
+  const n = G(null), [t, e] = ae(!1), [r, o] = ae(null);
   w(() => {
-    const f = r.current;
-    if (!f) return;
-    let p = !0;
+    const u = n.current;
+    if (!u) return;
+    let g = !0;
     return (async () => {
       try {
-        if (await f.ready?.(), p) {
+        if (await u.ready?.(), g) {
           e(!0);
-          const u = await f.getConfig?.();
-          p && u && o(u);
+          const h = await u.getConfig?.();
+          g && h && o(h);
         }
       } catch {
       }
     })(), () => {
-      p = !1;
+      g = !1;
     };
   }, []);
-  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) {
+  const a = v(async () => {
+    const u = n.current;
+    return u ? await u.getConfig?.() ?? null : null;
+  }, []), i = v(async () => {
+    const u = n.current;
+    u && await u.forceLayout?.();
+  }, []), c = v(async (u) => {
+    const g = n.current;
+    g && await g.toggleGroup?.(u);
+  }, []), d = v((u, g) => {
+    n.current?.registerStyles?.(u, g);
+  }, []), p = v((u) => {
+    n.current?.unregisterStyles?.(u);
+  }, []), C = v(() => r?.columns ? r.columns.filter((u) => !u.hidden) : [], [r]), x = v(() => {
+    const u = n.current?.element, g = u?.getPluginByName?.("selection");
+    if (!g) {
       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?.();
+    if (g.config?.mode === "row") {
+      const m = u?.rows ?? [], h = new Set(m.map((f, I) => I));
+      g.selected = h, g.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) {
+  }, []), P = v(() => {
+    const g = n.current?.element?.getPluginByName?.("selection");
+    g && g.clearSelection?.();
+  }, []), A = v(() => {
+    const g = n.current?.element?.getPluginByName?.("selection");
+    return g ? new Set(g.selected ?? []) : /* @__PURE__ */ new Set();
+  }, []), k = v(() => {
+    const u = n.current?.element, g = u?.getPluginByName?.("selection");
+    if (!g) return [];
+    const m = u?.rows ?? [], h = g.selected ?? /* @__PURE__ */ new Set();
+    return m.filter((f, I) => h.has(I));
+  }, []), F = v((u) => {
+    const m = n.current?.element?.getPluginByName?.("export");
+    if (!m) {
       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) {
+    m.exportCsv?.({ filename: u ?? "export.csv" });
+  }, []), T = v((u) => {
+    const m = n.current?.element?.getPluginByName?.("export");
+    if (!m) {
       console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
       return;
     }
-    g.exportJson?.({ filename: f ?? "export.json" });
+    m.exportJson?.({ filename: u ?? "export.json" });
   }, []);
   return {
-    ref: r,
-    element: r.current?.element ?? null,
+    ref: n,
+    element: n.current?.element ?? null,
     isReady: t,
-    config: n,
+    config: r,
     getConfig: a,
     forceLayout: i,
-    toggleGroup: s,
-    registerStyles: l,
-    unregisterStyles: m,
-    getVisibleColumns: v,
+    toggleGroup: c,
+    registerStyles: d,
+    unregisterStyles: p,
+    getVisibleColumns: C,
     // Selection methods
     selectAll: x,
-    clearSelection: b,
-    getSelectedIndices: M,
-    getSelectedRows: T,
+    clearSelection: P,
+    getSelectedIndices: A,
+    getSelectedRows: k,
     // Export methods
-    exportToCsv: A,
-    exportToJson: E
+    exportToCsv: F,
+    exportToJson: T
   };
 }
-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(
+let ue = !1;
+function lt(n, t, e, r = []) {
+  !ue && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (ue = !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);
+  const o = G(e);
   w(() => {
     o.current = e;
-  }, [e, ...n]), w(() => {
-    const a = r.current, i = a && "element" in a ? a.element : a;
+  }, [e, ...r]), w(() => {
+    const a = n.current, i = a && "element" in a ? a.element : a;
     if (!i) return;
-    const s = ((l) => {
-      o.current(l);
+    const c = ((d) => {
+      o.current(d);
     });
-    return i.addEventListener(t, s), () => {
-      i.removeEventListener(t, s);
+    return i.addEventListener(t, c), () => {
+      i.removeEventListener(t, c);
     };
-  }, [r, t]);
+  }, [n, t]);
 }
 export {
-  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
+  ot as DataGrid,
+  it as GridColumn,
+  Le as GridDetailPanel,
+  Pe as GridIconProvider,
+  ct as GridProvider,
+  Ge as GridResponsiveCard,
+  st as GridToolButtons,
+  nt as GridToolPanel,
+  Ae as GridTypeProvider,
+  He as ReactGridAdapter,
+  at as useGrid,
+  lt as useGridEvent,
+  et as useGridIcons,
+  tt as useGridTypeDefaults,
+  rt as useTypeDefault
 };