@toolbox-web/grid-react 1.1.1 → 1.3.0

package/index.js

@@ -1,8 +1,8 @@
 import { jsx as b, Fragment as ne, jsxs as Pe } from "react/jsx-runtime";
 import { DataGridElement as be } from "@toolbox-web/grid";
-import { createContext as me, useContext as O, useRef as E, useCallback as S, useEffect as P, forwardRef as he, useReducer as Ee, useImperativeHandle as ve, useMemo as D, useLayoutEffect as ke, Children as Se, isValidElement as De, useState as fe } from "react";
+import { createContext as ye, useContext as O, useRef as k, useCallback as E, useEffect as P, forwardRef as he, useReducer as Ee, useImperativeHandle as Re, useMemo as S, useLayoutEffect as ke, Children as Se, isValidElement as De, useState as fe } from "react";
 import { a as w, r as H, s as ge } from "./chunks/portal-bridge-DZ4yQkmm.js";
-import { flushSync as W, createPortal as Ge } from "react-dom";
+import { flushSync as V, createPortal as Ge } from "react-dom";
 import { createPluginsFromFeatures as Ae } from "@toolbox-web/grid/features/registry";
 import { G as Te } from "./chunks/grid-element-context-BU3WvNtM.js";
 function xe(n) {
@@ -33,7 +33,7 @@ function Ne(n) {
 function Fe(n) {
   return n.map((e) => typeof e == "string" ? Ne(e) : e);
 }
-const B = {
+const W = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -49,6 +49,10 @@ const B = {
   onColumnStateChange: "column-state-change",
   onSelectionChange: "selection-change",
   onRowMove: "row-move",
+  onRowDragStart: "row-drag-start",
+  onRowDragEnd: "row-drag-end",
+  onRowDrop: "row-drop",
+  onRowTransfer: "row-transfer",
   onGroupToggle: "group-toggle",
   onTreeExpand: "tree-expand",
   onDetailExpand: "detail-expand",
@@ -60,12 +64,12 @@ const B = {
   onPrintStart: "print-start",
   onPrintComplete: "print-complete",
   onTbwScroll: "tbw-scroll"
-}, oe = me(null), Ie = ({ icons: n, children: e }) => /* @__PURE__ */ b(oe.Provider, { value: n, children: e });
+}, oe = ye(null), Ie = ({ icons: n, children: e }) => /* @__PURE__ */ b(oe.Provider, { value: n, children: e });
 function pt() {
   return O(oe);
 }
 const Le = oe, Y = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new Map();
-function Ce(n) {
+function ve(n) {
   const e = n.querySelector("tbw-grid-responsive-card");
   if (e) {
     const r = Y.get(e);
@@ -76,14 +80,14 @@ function Ce(n) {
     return Z.get(t);
 }
 function Me(n) {
-  const { children: e, cardRowHeight: t = "auto" } = n, r = E(null), o = S(
+  const { children: e, cardRowHeight: t = "auto" } = n, r = k(null), o = E(
     (c) => {
       if (r.current = c, !c) return;
       Y.set(c, e);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const f = a.id || a.getAttribute("data-grid-id");
-        f && Z.set(f, e);
+      const s = c.closest("tbw-grid");
+      if (s) {
+        const g = s.id || s.getAttribute("data-grid-id");
+        g && Z.set(g, e);
       }
     },
     [e]
@@ -92,49 +96,49 @@ function Me(n) {
     const c = r.current;
     if (c) {
       Y.delete(c);
-      const a = c.closest("tbw-grid");
-      if (a) {
-        const f = a.id || a.getAttribute("data-grid-id");
-        f && Z.delete(f);
+      const s = c.closest("tbw-grid");
+      if (s) {
+        const g = s.id || s.getAttribute("data-grid-id");
+        g && Z.delete(g);
       }
     }
   }, []);
-  const s = t === "auto" ? "auto" : String(t);
-  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+  const a = t === "auto" ? "auto" : String(t);
+  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
 }
 Me.displayName = "GridResponsiveCard";
-const z = me(null), He = ({ defaults: n, children: e }) => /* @__PURE__ */ b(z.Provider, { value: n, children: e });
-function yt() {
+const z = ye(null), He = ({ defaults: n, children: e }) => /* @__PURE__ */ b(z.Provider, { value: n, children: e });
+function mt() {
   return O(z);
 }
-function mt(n) {
+function yt(n) {
   return O(z)?.[n];
 }
 const Oe = z, je = he(function(e, t) {
-  const r = E(/* @__PURE__ */ new Map()), [, o] = Ee((g) => g + 1, 0), s = E(!1), c = E(0), a = () => {
-    s.current || (s.current = !0, queueMicrotask(() => {
-      s.current = !1, W(o), f();
+  const r = k(/* @__PURE__ */ new Map()), [, o] = Ee((p) => p + 1, 0), a = k(!1), c = k(0), s = () => {
+    a.current || (a.current = !0, queueMicrotask(() => {
+      a.current = !1, V(o), g();
     }));
-  }, f = () => {
+  }, g = () => {
     c.current || (c.current = requestAnimationFrame(() => {
       c.current = 0;
-      let g = !1;
-      for (const [C, R] of r.current)
-        R.container.isConnected || (r.current.delete(C), g = !0);
-      g && W(o);
+      let p = !1;
+      for (const [v, C] of r.current)
+        C.container.isConnected || (r.current.delete(v), p = !0);
+      p && V(o);
     }));
   };
-  ve(
+  Re(
     t,
     () => ({
-      renderPortal(g, C, R) {
-        r.current.set(g, { container: C, element: R }), a();
+      renderPortal(p, v, C) {
+        r.current.set(p, { container: v, element: C }), s();
       },
-      removePortal(g, C) {
-        r.current.delete(g) && (C ? W(o) : a());
+      removePortal(p, v) {
+        r.current.delete(p) && (v ? V(o) : s());
       },
       clear() {
-        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), a());
+        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), s());
       }
     }),
     // forceRender is stable (useReducer dispatch), refs are stable
@@ -142,14 +146,14 @@ const Oe = z, je = he(function(e, t) {
     []
   );
   const d = [];
-  for (const [g, { container: C, element: R }] of r.current)
-    d.push(Ge(R, C, g));
+  for (const [p, { container: v, element: C }] of r.current)
+    d.push(Ge(C, v, p));
   return /* @__PURE__ */ b(ne, { children: d });
-}), U = /* @__PURE__ */ Symbol("reactProcessed"), G = [];
+}), U = /* @__PURE__ */ Symbol("reactProcessed"), D = [];
 function ze(n) {
-  for (let e = G.length - 1; e >= 0; e--) {
-    const t = G[e];
-    n.contains(t.container) && t.container.classList.contains("react-cell-editor") && (H(t.key), G.splice(e, 1));
+  for (let e = D.length - 1; e >= 0; e--) {
+    const t = D[e];
+    n.contains(t.container) && t.container.classList.contains("react-cell-editor") && (H(t.key), D.splice(e, 1));
   }
 }
 function qe(n) {
@@ -163,8 +167,8 @@ function qe(n) {
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const s = w(o, n(t));
-    return r && e.set(r, { portalKey: s, container: o }), G.push({ key: s, container: o }), o;
+    const a = w(o, n(t));
+    return r && e.set(r, { portalKey: a, container: o }), D.push({ key: a, container: o }), o;
   };
 }
 function _e(n) {
@@ -172,7 +176,7 @@ function _e(n) {
     const t = document.createElement("div");
     t.className = "react-cell-editor", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
 function $e(n) {
@@ -180,18 +184,18 @@ function $e(n) {
     const t = document.createElement("div");
     t.className = "react-header-renderer", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
-function Ve(n) {
+function Be(n) {
   return (e) => {
     const t = document.createElement("div");
     t.className = "react-header-label-renderer", t.style.display = "contents";
     const r = w(t, n(e));
-    return G.push({ key: r, container: t }), t;
+    return D.push({ key: r, container: t }), t;
   };
 }
-function We(n) {
+function Ve(n) {
   return (e) => {
     const t = n(e);
     if (t instanceof HTMLElement || typeof t == "string")
@@ -199,17 +203,17 @@ function We(n) {
     const r = document.createElement("div");
     r.className = "react-loading-renderer", r.style.display = "contents";
     const o = w(r, t);
-    return G.push({ key: o, container: r }), r;
+    return D.push({ key: o, container: r }), r;
   };
 }
-function Re(n) {
+function Ce(n) {
   if (!n) return;
   if (n[U]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
       ...n,
-      loadingRenderer: We(r)
+      loadingRenderer: Ve(r)
     };
   }
   if (!n.columns) {
@@ -217,8 +221,8 @@ function Re(n) {
     return r[U] = !0, r;
   }
   const e = n.columns.map((r) => {
-    const { renderer: o, editor: s, headerRenderer: c, headerLabelRenderer: a, ...f } = r, d = { ...f };
-    return o && (d.renderer = qe(o)), s && (d.editor = _e(s)), c && (d.headerRenderer = $e(c)), a && (d.headerLabelRenderer = Ve(a)), d;
+    const { renderer: o, editor: a, headerRenderer: c, headerLabelRenderer: s, ...g } = r, d = { ...g };
+    return o && (d.renderer = qe(o)), a && (d.editor = _e(a)), c && (d.headerRenderer = $e(c)), s && (d.headerLabelRenderer = Be(s)), d;
   }), t = {
     ...n,
     columns: e
@@ -226,7 +230,7 @@ function Re(n) {
   return t[U] = !0, t;
 }
 const Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
-function Be(n) {
+function We(n) {
   const e = n.querySelector("tbw-grid-detail");
   if (e) {
     const r = Q.get(e);
@@ -237,34 +241,34 @@ function Be(n) {
     return X.get(t);
 }
 function Ue(n) {
-  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = E(null), s = S(
-    (a) => {
-      if (o.current = a, !a) return;
-      Q.set(a, e);
-      const f = a.closest("tbw-grid");
-      if (f) {
-        const d = f.id || f.getAttribute("data-grid-id");
+  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = k(null), a = E(
+    (s) => {
+      if (o.current = s, !s) return;
+      Q.set(s, e);
+      const g = s.closest("tbw-grid");
+      if (g) {
+        const d = g.id || g.getAttribute("data-grid-id");
         d && X.set(d, e);
       }
     },
     [e]
   );
   return P(() => () => {
-    const a = o.current;
-    if (a) {
-      Q.delete(a);
-      const f = a.closest("tbw-grid");
-      if (f) {
-        const g = f.id || f.getAttribute("data-grid-id");
-        g && X.delete(g);
+    const s = o.current;
+    if (s) {
+      Q.delete(s);
+      const g = s.closest("tbw-grid");
+      if (g) {
+        const p = g.id || g.getAttribute("data-grid-id");
+        p && X.delete(p);
       }
-      const d = a.parentNode;
-      d && d.contains(a);
+      const d = s.parentNode;
+      d && d.contains(s);
     }
   }, []), /* @__PURE__ */ b(
     "tbw-grid-detail",
     {
-      ref: s,
+      ref: a,
       showExpandColumn: t ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
@@ -280,55 +284,55 @@ function Je(n) {
     return te.get(t);
 }
 function ht(n) {
-  const { id: e, title: t, icon: r, tooltip: o, order: s = 100, children: c } = n, a = E(null), f = S(
+  const { id: e, title: t, icon: r, tooltip: o, order: a = 100, children: c } = n, s = k(null), g = E(
     (d) => {
-      a.current = d, d && (ee.set(d, c), e && te.set(e, c));
+      s.current = d, d && (ee.set(d, c), e && te.set(e, c));
     },
     [c, e]
   );
   return P(() => () => {
-    const d = a.current;
+    const d = s.current;
     d && (ee.delete(d), e && te.delete(e));
   }, [e]), /* @__PURE__ */ b(
     "tbw-grid-tool-panel",
     {
-      ref: f,
+      ref: g,
       id: e,
       title: t,
       icon: r,
       tooltip: o,
-      order: s?.toString()
+      order: a?.toString()
     }
   );
 }
-const A = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+const G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
 function Ye(n, e) {
-  const t = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.renderer = e, A.set(n, r), t) {
-    const o = T.get(t) ?? {};
-    o.renderer = e, T.set(t, o);
+  const t = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.renderer = e, G.set(n, r), t) {
+    const o = A.get(t) ?? {};
+    o.renderer = e, A.set(t, o);
   }
 }
 function Ze(n, e) {
-  const t = n.getAttribute("field"), r = A.get(n) ?? {};
-  if (r.editor = e, A.set(n, r), t) {
-    const o = T.get(t) ?? {};
-    o.editor = e, T.set(t, o);
+  const t = n.getAttribute("field"), r = G.get(n) ?? {};
+  if (r.editor = e, G.set(n, r), t) {
+    const o = A.get(t) ?? {};
+    o.editor = e, A.set(t, o);
   }
 }
 function Qe(n) {
-  let e = A.get(n)?.renderer;
+  let e = G.get(n)?.renderer;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = T.get(t)?.renderer);
+    t && (e = A.get(t)?.renderer);
   }
   return e;
 }
 function Xe(n) {
-  let e = A.get(n)?.editor;
+  let e = G.get(n)?.editor;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = T.get(t)?.editor);
+    t && (e = A.get(t)?.editor);
   }
   return e;
 }
@@ -355,7 +359,7 @@ class et {
    * Converts React renderer/editor functions to DOM-returning functions.
    */
   processConfig(e) {
-    return Re(e) ?? e;
+    return Ce(e) ?? e;
   }
   /**
    * Determines if this adapter can handle the given element.
@@ -363,13 +367,13 @@ class et {
    */
   canHandle(e) {
     const t = e.getAttribute("field");
-    let r = A.get(e);
+    let r = G.get(e);
     if (!r && t) {
-      const c = T.get(t);
-      c && (c.renderer || c.editor) && (r = c, A.set(e, r));
+      const c = A.get(t);
+      c && (c.renderer || c.editor) && (r = c, G.set(e, r));
     }
-    const o = r?.renderer !== void 0, s = r?.editor !== void 0;
-    return r !== void 0 && (o || s);
+    const o = r?.renderer !== void 0, a = r?.editor !== void 0;
+    return r !== void 0 && (o || a);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -387,31 +391,31 @@ class et {
     if (!t)
       return;
     const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
-    return (s) => {
-      const c = s.cellEl;
+    return (a) => {
+      const c = a.cellEl;
       if (c) {
         const d = o.get(c);
         if (d)
-          return w(d.container, t(s), d.portalKey), d.container;
-        const g = document.createElement("div");
-        g.className = "react-cell-renderer", g.style.display = "contents";
-        const C = w(
-          g,
-          t(s),
+          return w(d.container, t(a), d.portalKey), d.container;
+        const p = document.createElement("div");
+        p.className = "react-cell-renderer", p.style.display = "contents";
+        const v = w(
+          p,
+          t(a),
           void 0,
           r ?? void 0
         );
-        return o.set(c, { portalKey: C, container: g }), this.trackPortal(C, g, !1), g;
+        return o.set(c, { portalKey: v, container: p }), this.trackPortal(v, p, !1), p;
       }
-      const a = document.createElement("div");
-      a.className = "react-cell-renderer", a.style.display = "contents";
-      const f = w(
-        a,
-        t(s),
+      const s = document.createElement("div");
+      s.className = "react-cell-renderer", s.style.display = "contents";
+      const g = w(
+        s,
+        t(a),
         void 0,
         r ?? void 0
       );
-      return this.trackPortal(f, a, !1), a;
+      return this.trackPortal(g, s, !1), s;
     };
   }
   /**
@@ -424,15 +428,15 @@ class et {
       return () => document.createElement("div");
     const r = e.closest("tbw-grid") ?? void 0;
     return (o) => {
-      const s = document.createElement("div");
-      s.className = "react-cell-editor", s.style.display = "contents";
+      const a = document.createElement("div");
+      a.className = "react-cell-editor", a.style.display = "contents";
       const c = w(
-        s,
+        a,
         t(o),
         void 0,
         r
       );
-      return this.trackPortal(c, s, !0), s;
+      return this.trackPortal(c, a, !0), a;
     };
   }
   /**
@@ -440,18 +444,18 @@ class et {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = Be(e);
+    const t = We(e);
     if (t)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-detail-panel";
-        const a = w(
-          s,
+        const a = document.createElement("div");
+        a.className = "react-detail-panel";
+        const s = w(
+          a,
           t({ row: r, rowIndex: o }),
           void 0,
           e
         );
-        return this.trackPortal(a, s, !1), s;
+        return this.trackPortal(s, a, !1), a;
       };
   }
   /**
@@ -468,20 +472,33 @@ class et {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(e) {
-    const t = Ce(e);
+    const t = ve(e);
     if (t)
       return (r, o) => {
-        const s = document.createElement("div");
-        s.className = "react-responsive-card";
-        const a = w(
-          s,
+        const a = document.createElement("div");
+        a.className = "react-responsive-card";
+        const s = w(
+          a,
           t({ row: r, index: o }),
           void 0,
           e
         );
-        return this.trackPortal(a, s, !1), s;
+        return this.trackPortal(s, a, !1), a;
       };
   }
+  /**
+   * FrameworkAdapter hook called by ResponsivePlugin during attach().
+   * Parses the `<tbw-grid-responsive-card>` element and delegates to
+   * {@link createResponsiveCardRenderer}. Needed for parity with the Vue
+   * and Angular adapters so ResponsivePlugin's standard lookup path works
+   * for React users as well, not just via the imperative
+   * `refreshResponsiveCardRenderer` hook in DataGrid.
+   */
+  parseResponsiveCardElement(e) {
+    const t = e.closest("tbw-grid");
+    if (t)
+      return this.createResponsiveCardRenderer(t);
+  }
   /**
    * Creates a tool panel renderer from a light DOM element.
    * Renders React components into tool panel containers.
@@ -543,7 +560,7 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const s = r.cellEl?.closest("tbw-grid") ?? t, c = w(o, e(r), void 0, s);
+      const a = r.cellEl?.closest("tbw-grid") ?? t, c = w(o, e(r), void 0, a);
       return this.trackPortal(c, o, !1), o;
     };
   }
@@ -555,8 +572,8 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const s = w(o, e(r), void 0, t);
-      return this.trackPortal(s, o, !0), o;
+      const a = w(o, e(r), void 0, t);
+      return this.trackPortal(a, o, !0), o;
     };
   }
   /**
@@ -565,10 +582,10 @@ class et {
    */
   createFilterPanelRenderer(e, t) {
     return (r, o) => {
-      const s = document.createElement("div");
-      s.style.display = "contents";
-      const c = r.closest("tbw-grid") ?? t, a = w(s, e(o), void 0, c);
-      this.trackPortal(a, s, !1), r.appendChild(s);
+      const a = document.createElement("div");
+      a.style.display = "contents";
+      const c = r.closest("tbw-grid") ?? t, s = w(a, e(o), void 0, c);
+      this.trackPortal(s, a, !1), r.appendChild(a);
     };
   }
   // #region Portal tracking helpers
@@ -588,7 +605,7 @@ class et {
   destroy() {
     for (const e of this.allPortalKeys)
       H(e);
-    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), T.clear();
+    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), A.clear();
   }
   /**
    * Called when a cell's content is about to be wiped.
@@ -635,9 +652,9 @@ function nt(n) {
     r === void 0 || r === !1 || e.push(t);
   return rt(e), Ae(n);
 }
-let ye = !1, J = null;
+let me = !1, J = null;
 function re() {
-  return ye || (J = new et(), be.registerAdapter(J), ye = !0), J;
+  return me || (J = new et(), be.registerAdapter(J), me = !0), J;
 }
 re();
 function ot(n) {
@@ -646,11 +663,11 @@ function ot(n) {
 }
 function it(n, e) {
   const t = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !Ce(n)) return;
-  const s = t.getPluginByName?.("responsive");
-  if (s && typeof s.setCardRenderer == "function") {
+  if (!n.querySelector("tbw-grid-responsive-card") || !ve(n)) return;
+  const a = t.getPluginByName?.("responsive");
+  if (a && typeof a.setCardRenderer == "function") {
     const c = e.createResponsiveCardRenderer(n);
-    c && s.setCardRenderer(c);
+    c && a.setCardRenderer(c);
   }
 }
 function st(n) {
@@ -670,31 +687,31 @@ function st(n) {
     }
   }), e;
 }
-const vt = he(function(e, t) {
+const Rt = he(function(e, t) {
   const {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: s,
+    columns: a,
     columnDefaults: c,
-    fitMode: a,
-    sortable: f,
+    fitMode: s,
+    sortable: g,
     filterable: d,
-    selectable: g,
-    loading: C,
-    customStyles: R,
+    selectable: p,
+    loading: v,
+    customStyles: C,
     className: K,
-    style: p,
-    children: v,
+    style: x,
+    children: T,
     // Plugin props
-    plugins: m,
+    plugins: u,
     // SSR mode
-    ssr: k,
+    ssr: h,
     // Legacy event handlers
-    onRowsChange: x,
+    onRowsChange: R,
     // Feature props and event props are in ...rest
-    ...h
-  } = e, u = E(null), j = E(null), ie = O(Oe), q = O(Le), se = [
+    ...m
+  } = e, f = k(null), j = k(null), ie = O(Oe), q = O(Le), se = [
     "selection",
     "editing",
     "filtering",
@@ -703,6 +720,7 @@ const vt = he(function(e, t) {
     "contextMenu",
     "reorderColumns",
     "reorderRows",
+    "rowDragDrop",
     "visibility",
     "undoRedo",
     "tree",
@@ -718,58 +736,58 @@ const vt = he(function(e, t) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], we = D(() => se.map((i) => {
-    const l = h[i];
+  ], we = S(() => se.map((i) => {
+    const l = m[i];
     return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
-  }).filter(Boolean).join("|"), [h]), ce = D(() => {
+  }).filter(Boolean).join("|"), [m]), ae = S(() => {
     const i = {};
     for (const l of se)
-      l in h && h[l] !== void 0 && (i[l] = h[l]);
+      l in m && m[l] !== void 0 && (i[l] = m[l]);
     return i;
-  }, [we]), ae = D(() => st(v), [v]), le = D(() => ({ ...ae, ...ce }), [ce, ae]), _ = D(() => m || k ? [] : nt(le), [le, m, k]), N = D(() => {
-    if (m) {
-      const i = new Set(m.map((y) => y.name)), l = _.filter((y) => !i.has(y.name));
-      return [...m, ...l];
+  }, [we]), ce = S(() => st(T), [T]), le = S(() => ({ ...ce, ...ae }), [ae, ce]), _ = S(() => u || h ? [] : nt(le), [le, u, h]), N = S(() => {
+    if (u) {
+      const i = new Set(u.map((y) => y.name)), l = _.filter((y) => !i.has(y.name));
+      return [...u, ...l];
     }
     return _;
-  }, [m, _]), F = D(() => {
-    if (!s) return s;
-    const i = Fe(s);
+  }, [u, _]), F = S(() => {
+    if (!a) return a;
+    const i = Fe(a);
     return c ? i.map((l) => ({
       ...c,
       ...l
       // Individual column props override defaults
     })) : i;
-  }, [s, c]), I = D(() => {
-    const i = Re(o), l = {};
-    if (f !== void 0 && (l.sortable = f), d !== void 0 && (l.filterable = d), g !== void 0 && (l.selectable = g), q) {
+  }, [a, c]), I = S(() => {
+    const i = Ce(o), l = {};
+    if (g !== void 0 && (l.sortable = g), d !== void 0 && (l.filterable = d), p !== void 0 && (l.selectable = p), q) {
       const y = i?.icons || o?.icons || {};
       l.icons = { ...q, ...y };
     }
     if (N.length > 0 && i) {
-      const y = i.plugins || [], L = new Set(y.map((M) => M.name)), V = N.filter((M) => !L.has(M.name));
+      const y = i.plugins || [], L = new Set(y.map((M) => M.name)), B = N.filter((M) => !L.has(M.name));
       return {
         ...i,
         ...l,
-        plugins: [...y, ...V]
+        plugins: [...y, ...B]
       };
     }
     return N.length > 0 && !i ? { ...l, plugins: N } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
-  }, [o, N, f, d, g, q]);
+  }, [o, N, g, d, p, q]);
   P(() => {
     re().setTypeDefaults(ie);
   }, [ie]), P(() => {
-    u.current && (u.current.rows = r);
+    f.current && (f.current.rows = r);
   }, [r]), P(() => {
-    u.current && I && (u.current.gridConfig = I);
+    f.current && I && (f.current.gridConfig = I);
   }, [I]), P(() => {
-    u.current && F && (u.current.columns = F);
+    f.current && F && (f.current.columns = F);
   }, [F]), P(() => {
-    u.current && a !== void 0 && (u.current.fitMode = a);
-  }, [a]), P(() => {
-    u.current && C !== void 0 && (u.current.loading = C);
-  }, [C]), P(() => {
-    const i = u.current;
+    f.current && s !== void 0 && (f.current.fitMode = s);
+  }, [s]), P(() => {
+    f.current && v !== void 0 && (f.current.loading = v);
+  }, [v]), P(() => {
+    const i = f.current;
     if (!i) return;
     const l = re();
     i.__frameworkAdapter = l, ot(i), it(i, l);
@@ -781,83 +799,83 @@ const vt = he(function(e, t) {
       y = !0, cancelAnimationFrame(L);
     };
   }, []), P(() => {
-    if (!u.current || !R) return;
-    const i = u.current, l = "react-custom-styles";
+    if (!f.current || !C) return;
+    const i = f.current, l = "react-custom-styles";
     let y = !0;
     return i.ready?.().then(() => {
-      y && R && (i.registerStyles?.(l, R), j.current = l);
+      y && C && (i.registerStyles?.(l, C), j.current = l);
     }), () => {
       y = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
     };
-  }, [R]), P(() => {
-    const i = u.current;
+  }, [C]), P(() => {
+    const i = f.current;
     if (!i) return;
     const l = [];
-    return x && l.push(i.on("rows-change", (y) => x(y.rows))), () => {
+    return R && l.push(i.on("rows-change", (y) => R(y.rows))), () => {
       l.forEach((y) => y());
     };
-  }, [x]);
-  const de = D(() => Object.keys(B).filter((i) => typeof h[i] == "function").sort().join("|"), [h]), ue = E({});
-  for (const i of Object.keys(B))
-    ue.current[i] = h[i];
+  }, [R]);
+  const de = S(() => Object.keys(W).filter((i) => typeof m[i] == "function").sort().join("|"), [m]), ue = k({});
+  for (const i of Object.keys(W))
+    ue.current[i] = m[i];
   P(() => {
-    const i = u.current;
+    const i = f.current;
     if (!i) return;
     const l = [];
-    for (const [y, L] of Object.entries(B))
+    for (const [y, L] of Object.entries(W))
       de.includes(y) && l.push(
-        i.on(L, (V, M) => {
-          ue.current[y]?.(V, M);
+        i.on(L, (B, M) => {
+          ue.current[y]?.(B, M);
         })
       );
     return () => {
       l.forEach((y) => y());
     };
-  }, [de]), ve(
+  }, [de]), Re(
     t,
     () => ({
       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(i) {
-        return u.current?.toggleGroup?.(i);
+        return f.current?.toggleGroup?.(i);
       },
       registerStyles(i, l) {
-        u.current?.registerStyles?.(i, l);
+        f.current?.registerStyles?.(i, l);
       },
       unregisterStyles(i) {
-        u.current?.unregisterStyles?.(i);
+        f.current?.unregisterStyles?.(i);
       },
       setRowLoading(i, l) {
-        u.current?.setRowLoading?.(i, l);
+        f.current?.setRowLoading?.(i, l);
       },
       setCellLoading(i, l, y) {
-        u.current?.setCellLoading?.(i, l, y);
+        f.current?.setCellLoading?.(i, l, y);
       },
       isRowLoading(i) {
-        return u.current?.isRowLoading?.(i) ?? !1;
+        return f.current?.isRowLoading?.(i) ?? !1;
       },
       isCellLoading(i, l) {
-        return u.current?.isCellLoading?.(i, l) ?? !1;
+        return f.current?.isCellLoading?.(i, l) ?? !1;
       },
       clearAllLoading() {
-        u.current?.clearAllLoading?.();
+        f.current?.clearAllLoading?.();
       }
     }),
     []
   );
-  const $ = E(null);
+  const $ = k(null);
   return ke(() => {
-    const i = u.current;
+    const i = f.current;
     return i && $.current && ge(i, $.current), () => {
       i && ge(i, null);
     };
@@ -867,47 +885,47 @@ const vt = he(function(e, t) {
       "tbw-grid",
       {
         ref: (i) => {
-          if (u.current = i, i) {
+          if (f.current = i, i) {
             const l = i;
             I && (l.gridConfig = I), r && (l.rows = r), F && (l.columns = F);
           }
         },
         class: K,
-        style: p,
-        children: /* @__PURE__ */ b(Te.Provider, { value: u, children: v })
+        style: x,
+        children: /* @__PURE__ */ b(Te.Provider, { value: f, children: T })
       }
     )
   ] });
 });
-function Ct(n) {
+function vt(n) {
   const {
     field: e,
     header: t,
     type: r,
     editable: o,
-    sortable: s,
+    sortable: a,
     resizable: c,
-    width: a,
-    minWidth: f,
+    width: s,
+    minWidth: g,
     hidden: d,
-    lockVisible: g,
-    children: C,
-    editor: R,
+    lockVisible: p,
+    children: v,
+    editor: C,
     options: K,
-    multi: p,
-    format: v
-  } = n, m = E(null), k = S(
-    (u) => {
-      m.current = u, u && (C && Ye(u, C), R && Ze(u, R));
+    multi: x,
+    format: T
+  } = n, u = k(null), h = E(
+    (f) => {
+      u.current = f, f && (v && Ye(f, v), C && Ze(f, C));
     },
-    [C, R, e]
-  ), x = typeof a == "number" ? `${a}px` : a, h = {
+    [v, C, e]
+  ), R = typeof s == "number" ? `${s}px` : s, m = {
     field: e,
-    ref: k
+    ref: h
   };
-  return t !== void 0 && (h.header = t), r !== void 0 && (h.type = r), o !== void 0 && (h.editable = o), s !== void 0 && (h.sortable = s), c !== void 0 && (h.resizable = c), x !== void 0 && (h.width = x), f !== void 0 && (h["min-width"] = f), d !== void 0 && (h.hidden = d), g !== void 0 && (h["lock-visible"] = g), p !== void 0 && (h.multi = p), v && (h["data-has-format"] = "true"), K && (h["data-has-options"] = "true"), /* @__PURE__ */ b("tbw-grid-column", { ...h });
+  return t !== void 0 && (m.header = t), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), a !== void 0 && (m.sortable = a), c !== void 0 && (m.resizable = c), R !== void 0 && (m.width = R), g !== void 0 && (m["min-width"] = g), d !== void 0 && (m.hidden = d), p !== void 0 && (m["lock-visible"] = p), x !== void 0 && (m.multi = x), T && (m["data-has-format"] = "true"), K && (m["data-has-options"] = "true"), /* @__PURE__ */ b("tbw-grid-column", { ...m });
 }
-function Rt({ children: n }) {
+function Ct({ children: n }) {
   return /* @__PURE__ */ b("tbw-grid-tool-buttons", { children: n });
 }
 const wt = ({ icons: n, defaults: e, children: t }) => {
@@ -915,106 +933,114 @@ const wt = ({ icons: n, defaults: e, children: t }) => {
   return e && (r = /* @__PURE__ */ b(He, { defaults: e, children: r })), n && (r = /* @__PURE__ */ b(Ie, { icons: n, children: r })), /* @__PURE__ */ b(ne, { children: r });
 };
 function Pt(n) {
-  const e = E(null), [t, r] = fe(!1), [o, s] = fe(null), c = E(null), a = S(() => n ? (c.current ??= document.querySelector(n), c.current) : e.current?.element ?? null, [n]);
+  const e = k(null), [t, r] = fe(!1), [o, a] = fe(null), c = k(null), s = E(() => n ? (c.current ??= document.querySelector(n), c.current) : e.current?.element ?? null, [n]);
   P(() => {
-    let p = !0;
+    let u = !0;
     return (async () => {
       try {
         if (n) {
-          const m = document.querySelector(n);
-          if (!m) return;
-          if (c.current = m, await m.ready?.(), p) {
+          const R = document.querySelector(n);
+          if (!R) return;
+          if (c.current = R, await R.ready?.(), u) {
             r(!0);
-            const k = await m.getConfig?.();
-            p && k && s(k);
+            const m = await R.getConfig?.();
+            u && m && a(m);
           }
         } else {
-          const m = e.current;
-          if (!m) return;
-          if (await m.ready?.(), p) {
+          const R = e.current;
+          if (!R) return;
+          if (await R.ready?.(), u) {
             r(!0);
-            const k = await m.getConfig?.();
-            p && k && s(k);
+            const m = await R.getConfig?.();
+            u && m && a(m);
           }
         }
       } catch {
       }
     })(), () => {
-      p = !1;
+      u = !1;
     };
   }, [n]);
-  const f = S(async () => {
-    const p = a();
-    if (p)
-      return await p.getConfig?.() ?? null;
-    const v = e.current;
-    return v ? await v.getConfig?.() ?? null : null;
-  }, [a]), d = S(async () => {
-    const p = a();
-    if (p) {
-      await p.forceLayout?.();
+  const g = E(async () => {
+    const u = s();
+    if (u)
+      return await u.getConfig?.() ?? null;
+    const h = e.current;
+    return h ? await h.getConfig?.() ?? null : null;
+  }, [s]), d = E(async () => {
+    const u = s();
+    if (u) {
+      await u.forceLayout?.();
       return;
     }
-    const v = e.current;
-    v && await v.forceLayout?.();
-  }, [a]), g = S(
-    async (p) => {
-      const v = a();
-      if (v) {
-        await v.toggleGroup?.(p);
+    const h = e.current;
+    h && await h.forceLayout?.();
+  }, [s]), p = E(
+    async (u) => {
+      const h = s();
+      if (h) {
+        await h.toggleGroup?.(u);
         return;
       }
-      const m = e.current;
-      m && await m.toggleGroup?.(p);
+      const R = e.current;
+      R && await R.toggleGroup?.(u);
     },
-    [a]
-  ), C = S(
-    (p, v) => {
-      const m = a();
-      if (m) {
-        m.registerStyles?.(p, v);
+    [s]
+  ), v = E(
+    (u) => s()?.getPlugin?.(u),
+    [s]
+  ), C = E(
+    ((u) => s()?.getPluginByName?.(u)),
+    [s]
+  ), K = E(
+    (u, h) => {
+      const R = s();
+      if (R) {
+        R.registerStyles?.(u, h);
         return;
       }
-      e.current?.registerStyles?.(p, v);
+      e.current?.registerStyles?.(u, h);
     },
-    [a]
-  ), R = S(
-    (p) => {
-      const v = a();
-      if (v) {
-        v.unregisterStyles?.(p);
+    [s]
+  ), x = E(
+    (u) => {
+      const h = s();
+      if (h) {
+        h.unregisterStyles?.(u);
         return;
       }
-      e.current?.unregisterStyles?.(p);
+      e.current?.unregisterStyles?.(u);
     },
-    [a]
-  ), K = S(() => o?.columns ? o.columns.filter((p) => !p.hidden) : [], [o]);
+    [s]
+  ), T = E(() => o?.columns ? o.columns.filter((u) => !u.hidden) : [], [o]);
   return {
     ref: e,
-    element: a(),
+    element: s(),
     isReady: t,
     config: o,
-    getConfig: f,
+    getConfig: g,
     forceLayout: d,
-    toggleGroup: g,
-    registerStyles: C,
-    unregisterStyles: R,
-    getVisibleColumns: K
+    toggleGroup: p,
+    getPlugin: v,
+    getPluginByName: C,
+    registerStyles: K,
+    unregisterStyles: x,
+    getVisibleColumns: T
   };
 }
 export {
-  vt as DataGrid,
+  Rt as DataGrid,
   et as GridAdapter,
-  Ct as GridColumn,
+  vt as GridColumn,
   Ue as GridDetailPanel,
   Ie as GridIconProvider,
   wt as GridProvider,
   Me as GridResponsiveCard,
-  Rt as GridToolButtons,
+  Ct as GridToolButtons,
   ht as GridToolPanel,
   He as GridTypeProvider,
   Pt as useGrid,
   pt as useGridIcons,
-  yt as useGridTypeDefaults,
-  mt as useTypeDefault
+  mt as useGridTypeDefaults,
+  yt as useTypeDefault
 };