@toolbox-web/grid-react 1.6.1 → 1.8.0

package/index.js

@@ -1,51 +1,69 @@
-import { jsx as S, Fragment as V, jsxs as fe } from "react/jsx-runtime";
-import { DataGridElement as de } from "@toolbox-web/grid";
-import { createContext as ie, useContext as A, forwardRef as se, useRef as h, useReducer as ge, useImperativeHandle as ce, useLayoutEffect as ue, Component as pe, useMemo as D, useEffect as P, Children as me, isValidElement as Ce, useCallback as x, useState as X } from "react";
-import { g as ye } from "./chunks/grid-responsive-card-BB28Zl2O.js";
-import { G as ar } from "./chunks/grid-responsive-card-BB28Zl2O.js";
-import { s as ee } from "./chunks/portal-bridge-BydpO5wl.js";
-import { flushSync as re, createPortal as he } from "react-dom";
-import { p as ve } from "./chunks/react-column-config-Dz234dN8.js";
-import { G as Re, c as we, d as be } from "./chunks/react-grid-adapter-KD5roD6F.js";
-import { e as fr } from "./chunks/react-grid-adapter-KD5roD6F.js";
-import { createPluginsFromFeatures as Pe } from "@toolbox-web/grid/features/registry";
-import { G as ae } from "./chunks/grid-element-context-BU3WvNtM.js";
-import { G as gr } from "./chunks/grid-detail-panel-CR7YUhdN.js";
-function Se(r) {
-  return r.charAt(0).toUpperCase() + r.slice(1);
+import { jsx as S, Fragment as U, jsxs as he } from "react/jsx-runtime";
+import { DataGridElement as ue } from "@toolbox-web/grid";
+import { Children as ve, isValidElement as we, createContext as ae, useContext as T, forwardRef as le, useRef as P, useReducer as Re, useImperativeHandle as fe, useLayoutEffect as de, Component as be, useMemo as F, useEffect as b, createElement as Pe, useCallback as D, useId as ge, useState as O } from "react";
+import { g as te, G as Ge, c as Se, d as xe } from "./chunks/react-grid-adapter-LBf2Mqhn.js";
+import { e as hr, f as vr } from "./chunks/react-grid-adapter-LBf2Mqhn.js";
+import { s as ne, r as pe, a as me } from "./chunks/portal-bridge-CvxNt40O.js";
+import { flushSync as oe, createPortal as Ee } from "react-dom";
+import { n as De } from "./chunks/post-mount-refresh-hooks-Dt7mPoZC.js";
+import { r as Rr } from "./chunks/post-mount-refresh-hooks-Dt7mPoZC.js";
+import { p as Fe } from "./chunks/react-column-config-BOe_PgL1.js";
+import { r as Pr } from "./chunks/react-column-config-BOe_PgL1.js";
+import { createPluginsFromFeatures as Te } from "@toolbox-web/grid/features/registry";
+import { G as N } from "./chunks/grid-element-context-BU3WvNtM.js";
+import { G as Sr } from "./chunks/grid-detail-panel-BZFcujsZ.js";
+import { G as Er } from "./chunks/grid-responsive-card-CSZhDCoN.js";
+const q = /* @__PURE__ */ new Map();
+function Ce(t, r) {
+  q.set(t, r);
 }
-function te(r) {
-  return r.toLowerCase() === "id" ? "ID" : r.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Se).join(" ");
+function ke(t) {
+  const r = {};
+  return q.size === 0 || ve.forEach(t, (l) => {
+    if (!we(l)) return;
+    const n = l.type?.displayName;
+    if (typeof n != "string") return;
+    const c = q.get(n);
+    if (!c) return;
+    const f = c(l);
+    f && Object.assign(r, f);
+  }), r;
 }
-const Ge = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function xe(r) {
-  const t = r.lastIndexOf(":");
-  if (t > 0) {
-    const s = r.slice(t + 1).toLowerCase();
-    if (Ge.has(s)) {
-      const i = r.slice(0, t);
+function Ie(t) {
+  return t.charAt(0).toUpperCase() + t.slice(1);
+}
+function ie(t) {
+  return t.toLowerCase() === "id" ? "ID" : t.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Ie).join(" ");
+}
+const Le = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Ae(t) {
+  const r = t.lastIndexOf(":");
+  if (r > 0) {
+    const l = t.slice(r + 1).toLowerCase();
+    if (Le.has(l)) {
+      const n = t.slice(0, r);
       return {
-        field: i,
-        header: te(i),
-        type: s
+        field: n,
+        header: ie(n),
+        type: l
       };
     }
   }
   return {
-    field: r,
-    header: te(r)
+    field: t,
+    header: ie(t)
   };
 }
-function De(r) {
-  return r.map((t) => typeof t == "string" ? xe(t) : t);
+function Me(t) {
+  return t.map((r) => typeof r == "string" ? Ae(r) : r);
 }
-function Ee(r, t) {
-  return t ? r.map((s) => ({ ...t, ...s })) : r;
+function Oe(t, r) {
+  return r ? t.map((l) => ({ ...r, ...l })) : t;
 }
-function Ze(r) {
-  return r.some((t) => typeof t == "string");
+function or(t) {
+  return t.some((r) => typeof r == "string");
 }
-const $ = {
+const B = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -86,529 +104,570 @@ const $ = {
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete",
-  onTbwScroll: "tbw-scroll"
-}, H = ie(null), Fe = ({ icons: r, children: t }) => /* @__PURE__ */ S(H.Provider, { value: r, children: t });
-function Qe() {
-  return A(H);
+  onTbwScroll: "tbw-scroll",
+  onRender: "render"
+}, W = ae(null), Ne = ({ icons: t, children: r }) => /* @__PURE__ */ S(W.Provider, { value: t, children: r });
+function ir() {
+  return T(W);
 }
-const Ae = H, N = ie(null), Le = ({ defaults: r, children: t }) => /* @__PURE__ */ S(N.Provider, { value: r, children: t });
-function Xe() {
-  return A(N);
+const $e = W, $ = ae(null), je = ({ defaults: t, children: r }) => /* @__PURE__ */ S($.Provider, { value: t, children: r });
+function sr() {
+  return T($);
 }
-function er(r) {
-  return A(N)?.[r];
+function cr(t) {
+  return T($)?.[t];
 }
-const ke = N;
-class Ie extends pe {
+const ze = $;
+class He extends be {
   state = { failed: !1 };
   static getDerivedStateFromError() {
     return { failed: !0 };
   }
-  componentDidCatch(t) {
-    this.props.onError(this.props.portalKey, t);
+  componentDidCatch(r) {
+    this.props.onError(this.props.portalKey, r);
   }
   render() {
     return this.state.failed ? null : this.props.children;
   }
 }
-const Te = se(function(t, s) {
-  const i = h(/* @__PURE__ */ new Map()), [, f] = ge((p) => p + 1, 0), m = h(!1), d = h(0), a = h(0), v = h(!1), y = h(!1), R = () => {
-    m.current || (m.current = !0, queueMicrotask(() => {
-      m.current = !1, !y.current && (re(f), w());
+const Ke = le(function(r, l) {
+  const n = P(/* @__PURE__ */ new Map()), [, c] = Re((C) => C + 1, 0), f = P(!1), d = P(0), u = P(0), h = P(!1), g = P(!1), v = () => {
+    f.current || (f.current = !0, queueMicrotask(() => {
+      f.current = !1, !g.current && (oe(c), w());
     }));
   }, w = () => {
     d.current || (d.current = requestAnimationFrame(() => {
-      d.current = 0, !y.current && f();
+      d.current = 0, !g.current && c();
     }));
-  }, b = (p, n) => {
-    console.error(`[grid-react] Portal "${p}" crashed; dropping.`, n), i.current.delete(p), w();
+  }, R = (C, o) => {
+    console.error(`[grid-react] Portal "${C}" crashed; dropping.`, o), n.current.delete(C), w();
   };
-  ce(
-    s,
+  fe(
+    l,
     () => ({
-      renderPortal(p, n, g) {
-        y.current || (i.current.set(p, { container: n, element: g }), R());
+      renderPortal(C, o, m) {
+        g.current || (n.current.set(C, { container: o, element: m }), v());
       },
-      removePortal(p, n) {
-        if (y.current) {
-          i.current.delete(p);
+      removePortal(C, o) {
+        if (g.current) {
+          n.current.delete(C);
           return;
         }
-        i.current.delete(p) && (a.current > 0 ? v.current = !0 : n ? re(f) : R());
+        n.current.delete(C) && (u.current > 0 ? h.current = !0 : o ? oe(c) : v());
       },
       beginBatch() {
-        a.current++;
+        u.current++;
       },
       endBatch() {
-        a.current !== 0 && (a.current--, a.current === 0 && v.current && (v.current = !1, f()));
+        u.current !== 0 && (u.current--, u.current === 0 && h.current && (h.current = !1, c()));
       },
       clear() {
-        if (y.current) {
-          i.current.clear();
+        if (g.current) {
+          n.current.clear();
           return;
         }
-        i.current.size > 0 && (i.current.clear(), d.current && (cancelAnimationFrame(d.current), d.current = 0), R());
+        n.current.size > 0 && (n.current.clear(), d.current && (cancelAnimationFrame(d.current), d.current = 0), v());
       }
     }),
     // forceRender is stable (useReducer dispatch), refs are stable
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
-  ), ue(() => {
-    y.current = !1;
-    const p = i.current;
+  ), de(() => {
+    g.current = !1;
+    const C = n.current;
     return () => {
-      y.current = !0, d.current && (cancelAnimationFrame(d.current), d.current = 0), p.clear();
+      g.current = !0, d.current && (cancelAnimationFrame(d.current), d.current = 0), C.clear();
     };
   }, []);
-  const E = [];
-  let G = null;
-  for (const [p, { container: n, element: g }] of i.current) {
-    if (!n.isConnected) {
-      (G ??= []).push(p);
+  const G = [];
+  let x = null;
+  for (const [C, { container: o, element: m }] of n.current) {
+    if (!o.isConnected) {
+      (x ??= []).push(C);
       continue;
     }
-    E.push(
-      he(
-        /* @__PURE__ */ S(Ie, { portalKey: p, onError: b, children: g }),
-        n,
-        p
+    G.push(
+      Ee(
+        /* @__PURE__ */ S(He, { portalKey: C, onError: R, children: m }),
+        o,
+        C
       )
     );
   }
-  if (G) {
-    const p = G;
+  if (x) {
+    const C = x;
     queueMicrotask(() => {
-      for (const n of p) i.current.delete(n);
+      for (const o of C) n.current.delete(o);
     });
   }
-  return /* @__PURE__ */ S(V, { children: E });
-}), Me = {
+  return /* @__PURE__ */ S(U, { children: G });
+}), Be = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function Ne(r) {
-  const t = new Set(r);
-  for (const s of r) {
-    const i = Me[s];
-    if (i)
-      for (const f of i)
-        t.has(f) || console.warn(
-          `[DataGrid] Feature "${s}" requires "${f}" to be enabled. Add the "${f}" prop to your DataGrid.`
+function _e(t) {
+  const r = new Set(t);
+  for (const l of t) {
+    const n = Be[l];
+    if (n)
+      for (const c of n)
+        r.has(c) || console.warn(
+          `[DataGrid] Feature "${l}" requires "${c}" to be enabled. Add the "${c}" prop to your DataGrid.`
         );
   }
 }
-function Oe(r) {
-  const t = [];
-  for (const [s, i] of Object.entries(r))
-    i === void 0 || i === !1 || t.push(s);
-  return Ne(t), Pe(r);
+function qe(t) {
+  const r = [];
+  for (const [l, n] of Object.entries(t))
+    n === void 0 || n === !1 || r.push(l);
+  return _e(r), Te(t);
 }
-let ne = !1, _ = null;
-const oe = [
-  "selection",
-  "editing",
-  "filtering",
-  "multiSort",
-  "clipboard",
-  "contextMenu",
-  "reorderColumns",
-  "reorderRows",
-  "rowDragDrop",
-  "visibility",
-  "undoRedo",
-  "tree",
-  "groupingRows",
-  "groupingColumns",
-  "pinnedColumns",
-  "pinnedRows",
-  "masterDetail",
-  "responsive",
-  "columnVirtualization",
-  "export",
-  "print",
-  "pivot",
-  "serverSide",
-  "tooltip"
-];
-function q() {
-  return ne || (_ = new Re(), de.registerAdapter(_), ne = !0), _;
+let se = !1, _ = null;
+function V() {
+  return se || (_ = new Ge(), ue.registerAdapter(_), se = !0), _;
 }
-q();
-function je(r) {
-  const s = r.getPluginByName?.("masterDetail");
-  s && typeof s.refreshDetailRenderer == "function" && s.refreshDetailRenderer();
+V();
+const ce = /* @__PURE__ */ new WeakMap();
+let Ve = 0;
+function Ue(t) {
+  let r = ce.get(t);
+  return r === void 0 && (r = ++Ve, ce.set(t, r)), r;
 }
-function ze(r, t) {
-  const s = r;
-  if (!r.querySelector("tbw-grid-responsive-card") || !ye(r)) return;
-  const m = s.getPluginByName?.("responsive");
-  if (m && typeof m.setCardRenderer == "function") {
-    const d = t.createResponsiveCardRenderer(r);
-    d && m.setCardRenderer(d);
-  }
-}
-function Be(r) {
-  const t = {};
-  return me.forEach(r, (s) => {
-    if (Ce(s)) {
-      if (s.type && s.type.displayName === "GridDetailPanel") {
-        const i = s.props;
-        t.masterDetail = {
-          // Use props from the child component for configuration
-          showExpandColumn: i.showExpandColumn ?? !0,
-          animation: i.animation ?? "slide"
-          // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
-        };
-      }
-      s.type && s.type.displayName === "GridResponsiveCard" && (t.responsive = !0);
+Ce("GridDetailPanel", (t) => {
+  const r = t.props;
+  return {
+    masterDetail: {
+      showExpandColumn: r.showExpandColumn ?? !0,
+      animation: r.animation ?? "slide"
+      // detailRenderer is wired up by the masterDetail post-mount refresh hook.
     }
-  }), t;
-}
-const rr = se(function(t, s) {
+  };
+});
+Ce("GridResponsiveCard", () => ({
+  // GridResponsiveCard only carries cardRowHeight; breakpoint is set via the
+  // responsive prop. Enable the plugin with defaults — user can override.
+  responsive: !0
+}));
+const ur = le(function(r, l) {
   const {
     // Core props
-    rows: i,
-    gridConfig: f,
-    columns: m,
+    rows: n,
+    gridConfig: c,
+    columns: f,
     columnDefaults: d,
-    fitMode: a,
-    sortable: v,
-    filterable: y,
-    selectable: R,
+    fitMode: u,
+    sortable: h,
+    filterable: g,
+    selectable: v,
     loading: w,
-    customStyles: b,
-    className: E,
-    style: G,
-    children: p,
+    customStyles: R,
+    className: G,
+    style: x,
+    children: C,
     // Plugin props
-    plugins: n,
+    plugins: o,
     // SSR mode (deprecated - see SSRProps)
-    ssr: g,
+    ssr: m,
     // Legacy event handlers
-    onRowsChange: C,
+    onRowsChange: y,
     // Feature props and event props are in ...rest
-    ...l
-  } = t, c = h(null), M = h(null), K = h(!1), U = A(ke), O = A(Ae), le = D(() => oe.map((e) => {
-    const o = l[e];
-    return o !== void 0 ? `${e}:${JSON.stringify(o)}` : "";
-  }).filter(Boolean).join("|"), [l]), Y = D(() => {
-    const e = {};
-    for (const o of oe)
-      o in l && l[o] !== void 0 && (e[o] = l[o]);
+    ...p
+  } = r, a = P(null), M = P(null), J = P(!1), Y = T(ze), j = T($e), ye = F(() => te().map((e) => {
+    const i = p[e];
+    if (i === void 0) return "";
+    let s;
+    try {
+      s = JSON.stringify(i) ?? "undefined";
+    } catch {
+      s = typeof i == "object" && i !== null ? `ref#${Ue(i)}` : `prim:${String(i)}`;
+    }
+    return `${e}:${s}`;
+  }).filter(Boolean).join("|"), [p]), Z = F(() => {
+    const e = {}, i = p;
+    for (const s of te()) {
+      const E = i[s];
+      E !== void 0 && (e[s] = E);
+    }
     return e;
-  }, [le]), J = D(() => Be(p), [p]), W = D(() => {
-    const e = f?.features, o = {};
-    for (const [u, F] of Object.entries(J))
-      e && u in e && e[u] !== void 0 && e[u] !== !1 || (o[u] = F);
-    return { ...o, ...Y };
-  }, [Y, J, f]), j = D(() => n || g ? [] : Oe(W), [W, n, g]), L = D(() => {
-    if (n) {
-      const e = new Set(n.map((u) => u.name)), o = j.filter((u) => !e.has(u.name));
-      return [...n, ...o];
+  }, [ye]), Q = F(() => ke(C), [C]), X = F(() => {
+    const e = c?.features, i = {};
+    for (const [s, E] of Object.entries(Q))
+      e && s in e && e[s] !== void 0 && e[s] !== !1 || (i[s] = E);
+    return { ...i, ...Z };
+  }, [Z, Q, c]), z = F(() => o || m ? [] : qe(X), [X, o, m]), k = F(() => {
+    if (o) {
+      const e = new Set(o.map((s) => s.name)), i = z.filter((s) => !e.has(s.name));
+      return [...o, ...i];
     }
-    return j;
-  }, [n, j]), k = D(() => m && Ee(De(m), d), [m, d]), I = D(() => {
-    const e = ve(f), o = {};
-    if (v !== void 0 && (o.sortable = v), y !== void 0 && (o.filterable = y), R !== void 0 && (o.selectable = R), O) {
-      const u = e?.icons || f?.icons || {};
-      o.icons = { ...O, ...u };
+    return z;
+  }, [o, z]), I = F(() => f && Oe(Me(f), d), [f, d]), L = F(() => {
+    const e = Fe(c), i = {};
+    if (h !== void 0 && (i.sortable = h), g !== void 0 && (i.filterable = g), v !== void 0 && (i.selectable = v), j) {
+      const s = e?.icons || c?.icons || {};
+      i.icons = { ...j, ...s };
     }
-    if (L.length > 0 && e) {
-      const u = e.plugins || [], F = new Set(u.map((T) => T.name)), B = L.filter((T) => !F.has(T.name));
+    if (k.length > 0 && e) {
+      const s = e.plugins || [], E = new Set(s.map((A) => A.name)), K = k.filter((A) => !E.has(A.name));
       return {
         ...e,
-        ...o,
-        plugins: [...u, ...B]
+        ...i,
+        plugins: [...s, ...K]
       };
     }
-    return L.length > 0 && !e ? { ...o, plugins: L } : Object.keys(o).length > 0 ? { ...e, ...o } : e;
-  }, [f, L, v, y, R, O]);
-  P(() => {
-    q().setTypeDefaults(U);
-  }, [U]), P(() => {
-    c.current && (c.current.rows = i);
-  }, [i]), P(() => {
-    c.current && I && (c.current.gridConfig = I);
-  }, [I]), P(() => {
-    c.current && k && (c.current.columns = k);
-  }, [k]), P(() => {
-    c.current && a !== void 0 && (c.current.fitMode = a);
-  }, [a]), P(() => {
-    c.current && w !== void 0 && (c.current.loading = w);
-  }, [w]), P(() => {
-    const e = c.current;
+    return k.length > 0 && !e ? { ...i, plugins: k } : Object.keys(i).length > 0 ? { ...e, ...i } : e;
+  }, [c, k, h, g, v, j]);
+  b(() => {
+    V().setTypeDefaults(Y);
+  }, [Y]), b(() => {
+    a.current && (a.current.rows = n);
+  }, [n]), b(() => {
+    a.current && L && (a.current.gridConfig = L);
+  }, [L]), b(() => {
+    a.current && I && (a.current.columns = I);
+  }, [I]), b(() => {
+    a.current && u !== void 0 && (a.current.fitMode = u);
+  }, [u]), b(() => {
+    a.current && w !== void 0 && (a.current.loading = w);
+  }, [w]), b(() => {
+    const e = a.current;
     if (!e) return;
-    const o = q();
-    e.__frameworkAdapter = o, je(e), ze(e, o);
-    let u = !1;
-    const F = requestAnimationFrame(() => {
-      u || (typeof e.refreshColumns == "function" && e.refreshColumns(), typeof e.refreshShellHeader == "function" && e.refreshShellHeader());
+    const i = V();
+    e.__frameworkAdapter = i, De(e);
+    let s = !1;
+    const E = requestAnimationFrame(() => {
+      s || (typeof e.refreshColumns == "function" && e.refreshColumns(), typeof e.refreshShellHeader == "function" && e.refreshShellHeader());
     });
     return () => {
-      u = !0, cancelAnimationFrame(F);
+      s = !0, cancelAnimationFrame(E);
     };
-  }, []), P(() => {
-    if (!c.current || !b) return;
-    const e = c.current, o = "react-custom-styles";
-    let u = !0;
+  }, []), b(() => {
+    if (!a.current || !R) return;
+    const e = a.current, i = "react-custom-styles";
+    let s = !0;
     return e.ready?.().then(() => {
-      u && b && (e.registerStyles?.(o, b), M.current = o);
+      s && R && (e.registerStyles?.(i, R), M.current = i);
     }), () => {
-      u = !1, M.current && (e.unregisterStyles?.(M.current), M.current = null);
+      s = !1, M.current && (e.unregisterStyles?.(M.current), M.current = null);
     };
-  }, [b]), P(() => {
-    const e = c.current;
+  }, [R]), b(() => {
+    const e = a.current;
     if (!e) return;
-    const o = [];
-    return C && o.push(e.on("rows-change", (u) => C(u.rows))), () => {
-      o.forEach((u) => u());
+    const i = [];
+    return y && i.push(e.on("rows-change", (s) => y(s.rows))), () => {
+      i.forEach((s) => s());
     };
-  }, [C]);
-  const Z = D(() => Object.keys($).filter((e) => typeof l[e] == "function").sort().join("|"), [l]), Q = h({});
-  for (const e of Object.keys($))
-    Q.current[e] = l[e];
-  P(() => {
-    const e = c.current;
+  }, [y]);
+  const ee = F(() => Object.keys(B).filter((e) => typeof p[e] == "function").sort().join("|"), [p]), re = P({});
+  for (const e of Object.keys(B))
+    re.current[e] = p[e];
+  b(() => {
+    const e = a.current;
     if (!e) return;
-    const o = [];
-    for (const [u, F] of Object.entries($))
-      Z.includes(u) && o.push(
-        e.on(F, (B, T) => {
-          Q.current[u]?.(B, T);
+    const i = [];
+    for (const [s, E] of Object.entries(B))
+      ee.includes(s) && i.push(
+        e.on(E, (K, A) => {
+          re.current[s]?.(K, A);
         })
       );
     return () => {
-      o.forEach((u) => u());
+      i.forEach((s) => s());
     };
-  }, [Z]), ce(
-    s,
+  }, [ee]), fe(
+    l,
     () => ({
       get element() {
-        return c.current;
+        return a.current;
       },
       async getConfig() {
-        return c.current?.getConfig?.() ?? {};
+        return a.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return c.current?.ready?.();
+        return a.current?.ready?.();
       },
       async forceLayout() {
-        return c.current?.forceLayout?.();
+        return a.current?.forceLayout?.();
       },
       async toggleGroup(e) {
-        return c.current?.toggleGroup?.(e);
+        return a.current?.toggleGroup?.(e);
       },
-      registerStyles(e, o) {
-        c.current?.registerStyles?.(e, o);
+      registerStyles(e, i) {
+        a.current?.registerStyles?.(e, i);
       },
       unregisterStyles(e) {
-        c.current?.unregisterStyles?.(e);
+        a.current?.unregisterStyles?.(e);
       },
-      setRowLoading(e, o) {
-        c.current?.setRowLoading?.(e, o);
+      setRowLoading(e, i) {
+        a.current?.setRowLoading?.(e, i);
       },
-      setCellLoading(e, o, u) {
-        c.current?.setCellLoading?.(e, o, u);
+      setCellLoading(e, i, s) {
+        a.current?.setCellLoading?.(e, i, s);
       },
       isRowLoading(e) {
-        return c.current?.isRowLoading?.(e) ?? !1;
+        return a.current?.isRowLoading?.(e) ?? !1;
       },
-      isCellLoading(e, o) {
-        return c.current?.isCellLoading?.(e, o) ?? !1;
+      isCellLoading(e, i) {
+        return a.current?.isCellLoading?.(e, i) ?? !1;
       },
       clearAllLoading() {
-        c.current?.clearAllLoading?.();
+        a.current?.clearAllLoading?.();
       }
     }),
     []
   );
-  const z = h(null);
-  return ue(() => {
-    const e = c.current;
-    return e && z.current && ee(e, z.current), () => {
-      e && ee(e, null);
+  const H = P(null);
+  return de(() => {
+    const e = a.current;
+    return e && H.current && ne(e, H.current), () => {
+      e && ne(e, null);
     };
-  }, []), /* @__PURE__ */ fe(V, { children: [
-    /* @__PURE__ */ S(Te, { ref: z }),
-    /* @__PURE__ */ S(
-      "tbw-grid",
+  }, []), /* @__PURE__ */ he(U, { children: [
+    /* @__PURE__ */ S(Ke, { ref: H }),
+    Pe(
+      ue.activeTag,
       {
         ref: (e) => {
-          if (c.current = e, e && !K.current) {
-            K.current = !0;
-            const o = e;
-            I && (o.gridConfig = I), i && (o.rows = i), k && (o.columns = k);
+          if (a.current = e, e && !J.current) {
+            J.current = !0;
+            const i = e;
+            L && (i.gridConfig = L), n && (i.rows = n), I && (i.columns = I);
           }
         },
-        class: E,
-        style: G,
-        children: /* @__PURE__ */ S(ae.Provider, { value: c, children: p })
-      }
+        class: G,
+        style: x
+      },
+      /* @__PURE__ */ S(N.Provider, { value: a, children: C })
     )
   ] });
 });
-function tr(r) {
+function ar(t) {
   const {
-    field: t,
-    header: s,
-    type: i,
-    editable: f,
-    sortable: m,
+    field: r,
+    header: l,
+    type: n,
+    editable: c,
+    sortable: f,
     resizable: d,
-    width: a,
-    minWidth: v,
-    hidden: y,
-    lockVisible: R,
+    width: u,
+    minWidth: h,
+    hidden: g,
+    lockVisible: v,
     children: w,
-    editor: b,
-    options: E,
-    multi: G,
-    format: p
-  } = r, n = h(null), g = x(
-    (c) => {
-      n.current = c, c && (w && we(c, w), b && be(c, b));
+    editor: R,
+    options: G,
+    multi: x,
+    format: C
+  } = t, o = P(null), m = D(
+    (a) => {
+      o.current = a, a && (w && Se(a, w), R && xe(a, R));
     },
-    [w, b]
-  ), C = typeof a == "number" ? `${a}px` : a, l = {
-    field: t,
-    ref: g
+    [w, R]
+  ), y = typeof u == "number" ? `${u}px` : u, p = {
+    field: r,
+    ref: m
   };
-  return s !== void 0 && (l.header = s), i !== void 0 && (l.type = i), f !== void 0 && (l.editable = f), m !== void 0 && (l.sortable = m), d !== void 0 && (l.resizable = d), C !== void 0 && (l.width = C), v !== void 0 && (l["min-width"] = v), y !== void 0 && (l.hidden = y), R !== void 0 && (l["lock-visible"] = R), G !== void 0 && (l.multi = G), p && (l["data-has-format"] = "true"), E && (l["data-has-options"] = "true"), /* @__PURE__ */ S("tbw-grid-column", { ...l });
+  return l !== void 0 && (p.header = l), n !== void 0 && (p.type = n), c !== void 0 && (p.editable = c), f !== void 0 && (p.sortable = f), d !== void 0 && (p.resizable = d), y !== void 0 && (p.width = y), h !== void 0 && (p["min-width"] = h), g !== void 0 && (p.hidden = g), v !== void 0 && (p["lock-visible"] = v), x !== void 0 && (p.multi = x), C && (p["data-has-format"] = "true"), G && (p["data-has-options"] = "true"), /* @__PURE__ */ S("tbw-grid-column", { ...p });
+}
+function lr({ id: t, order: r = 100, children: l }) {
+  const n = ge(), c = t ?? `tbw-header-content-${n}`, f = T(N), [d, u] = O(null), h = P(null);
+  return b(() => {
+    const g = f?.current;
+    if (!g) return;
+    const v = h;
+    let w = !1;
+    return (async () => {
+      try {
+        await g.ready?.();
+      } catch {
+        return;
+      }
+      if (w) return;
+      const R = {
+        id: c,
+        order: r,
+        render: (G) => (u(G), () => {
+        })
+      };
+      g.registerHeaderContent?.(R);
+    })(), () => {
+      w = !0, g.unregisterHeaderContent?.(c), v.current && (pe(v.current, { sync: !0 }), v.current = null), u(null);
+    };
+  }, [f, c, r]), b(() => {
+    if (!d) return;
+    const g = f?.current ?? void 0;
+    h.current = me(d, l, h.current ?? void 0, g);
+  }, [l, d, f]), null;
+}
+function fr({ children: t }) {
+  return /* @__PURE__ */ S("tbw-grid-tool-buttons", { children: t });
 }
-function nr({ children: r }) {
-  return /* @__PURE__ */ S("tbw-grid-tool-buttons", { children: r });
+function dr({ id: t, order: r = 100, children: l }) {
+  const n = ge(), c = t ?? `tbw-toolbar-content-${n}`, f = T(N), [d, u] = O(null), h = P(null);
+  return b(() => {
+    const g = f?.current;
+    if (!g) return;
+    const v = h;
+    let w = !1;
+    return (async () => {
+      try {
+        await g.ready?.();
+      } catch {
+        return;
+      }
+      if (w) return;
+      const R = {
+        id: c,
+        order: r,
+        render: (G) => (u(G), () => {
+        })
+      };
+      g.registerToolbarContent?.(R);
+    })(), () => {
+      w = !0, g.unregisterToolbarContent?.(c), v.current && (pe(v.current, { sync: !0 }), v.current = null), u(null);
+    };
+  }, [f, c, r]), b(() => {
+    if (!d) return;
+    const g = f?.current ?? void 0;
+    h.current = me(d, l, h.current ?? void 0, g);
+  }, [l, d, f]), null;
 }
-const or = ({ icons: r, defaults: t, children: s }) => {
-  let i = s;
-  return t && (i = /* @__PURE__ */ S(Le, { defaults: t, children: i })), r && (i = /* @__PURE__ */ S(Fe, { icons: r, children: i })), /* @__PURE__ */ S(V, { children: i });
+const gr = ({ icons: t, defaults: r, children: l }) => {
+  let n = l;
+  return r && (n = /* @__PURE__ */ S(je, { defaults: r, children: n })), t && (n = /* @__PURE__ */ S(Ne, { icons: t, children: n })), /* @__PURE__ */ S(U, { children: n });
 };
-function ir(r) {
-  const t = h(null), [s, i] = X(!1), [f, m] = X(null), d = h(null), a = x(() => r ? (d.current ??= document.querySelector(r), d.current) : t.current?.element ?? null, [r]);
-  P(() => {
-    let n = !0;
+function pr(t) {
+  const r = P(null), [l, n] = O(!1), [c, f] = O(null), d = P(null), u = D(() => t ? (d.current ??= document.querySelector(t), d.current) : r.current?.element ?? null, [t]);
+  b(() => {
+    let o = !0;
     return (async () => {
       try {
-        if (r) {
-          const C = document.querySelector(r);
-          if (!C) return;
-          if (d.current = C, await C.ready?.(), n) {
-            i(!0);
-            const l = await C.getConfig?.();
-            n && l && m(l);
+        if (t) {
+          const y = document.querySelector(t);
+          if (!y) return;
+          if (d.current = y, await y.ready?.(), o) {
+            n(!0);
+            const p = await y.getConfig?.();
+            o && p && f(p);
           }
         } else {
-          const C = t.current;
-          if (!C) return;
-          if (await C.ready?.(), n) {
-            i(!0);
-            const l = await C.getConfig?.();
-            n && l && m(l);
+          const y = r.current;
+          if (!y) return;
+          if (await y.ready?.(), o) {
+            n(!0);
+            const p = await y.getConfig?.();
+            o && p && f(p);
           }
         }
       } catch {
       }
     })(), () => {
-      n = !1;
+      o = !1;
     };
-  }, [r]);
-  const v = x(async () => {
-    const n = a();
-    if (n)
-      return await n.getConfig?.() ?? null;
-    const g = t.current;
-    return g ? await g.getConfig?.() ?? null : null;
-  }, [a]), y = x(async () => {
-    const n = a();
-    if (n) {
-      await n.forceLayout?.();
+  }, [t]);
+  const h = D(async () => {
+    const o = u();
+    if (o)
+      return await o.getConfig?.() ?? null;
+    const m = r.current;
+    return m ? await m.getConfig?.() ?? null : null;
+  }, [u]), g = D(async () => {
+    const o = u();
+    if (o) {
+      await o.forceLayout?.();
       return;
     }
-    const g = t.current;
-    g && await g.forceLayout?.();
-  }, [a]), R = x(
-    async (n) => {
-      const g = a();
-      if (g) {
-        await g.toggleGroup?.(n);
+    const m = r.current;
+    m && await m.forceLayout?.();
+  }, [u]), v = D(
+    async (o) => {
+      const m = u();
+      if (m) {
+        await m.toggleGroup?.(o);
         return;
       }
-      const C = t.current;
-      C && await C.toggleGroup?.(n);
+      const y = r.current;
+      y && await y.toggleGroup?.(o);
     },
-    [a]
-  ), w = x(
-    (n) => a()?.getPlugin?.(n),
-    [a]
-  ), b = x(
-    ((n) => a()?.getPluginByName?.(n)),
-    [a]
-  ), E = x(
-    (n, g) => {
-      const C = a();
-      if (C) {
-        C.registerStyles?.(n, g);
+    [u]
+  ), w = D(
+    (o) => u()?.getPlugin?.(o),
+    [u]
+  ), R = D(
+    ((o) => u()?.getPluginByName?.(o)),
+    [u]
+  ), G = D(
+    (o, m) => {
+      const y = u();
+      if (y) {
+        y.registerStyles?.(o, m);
         return;
       }
-      t.current?.registerStyles?.(n, g);
+      r.current?.registerStyles?.(o, m);
     },
-    [a]
-  ), G = x(
-    (n) => {
-      const g = a();
-      if (g) {
-        g.unregisterStyles?.(n);
+    [u]
+  ), x = D(
+    (o) => {
+      const m = u();
+      if (m) {
+        m.unregisterStyles?.(o);
         return;
       }
-      t.current?.unregisterStyles?.(n);
+      r.current?.unregisterStyles?.(o);
     },
-    [a]
-  ), p = x(() => f?.columns ? f.columns.filter((n) => !n.hidden) : [], [f]);
+    [u]
+  ), C = D(() => c?.columns ? c.columns.filter((o) => !o.hidden) : [], [c]);
   return {
-    ref: t,
-    element: a(),
-    isReady: s,
-    config: f,
-    getConfig: v,
-    forceLayout: y,
-    toggleGroup: R,
+    ref: r,
+    element: u(),
+    isReady: l,
+    config: c,
+    getConfig: h,
+    forceLayout: g,
+    toggleGroup: v,
     getPlugin: w,
-    getPluginByName: b,
-    registerStyles: E,
-    unregisterStyles: G,
-    getVisibleColumns: p
+    getPluginByName: R,
+    registerStyles: G,
+    unregisterStyles: x,
+    getVisibleColumns: C
   };
 }
-function sr(r, t = {}) {
-  const { open: s = !0, gridElement: i } = t, f = A(ae);
-  P(() => {
-    if (!s) return;
-    const m = r.current;
-    if (!m) return;
-    const d = i ?? m.closest("tbw-grid") ?? f?.current ?? null;
+function mr(t, r = {}) {
+  const { open: l = !0, gridElement: n } = r, c = T(N);
+  b(() => {
+    if (!l) return;
+    const f = t.current;
+    if (!f) return;
+    const d = n ?? f.closest("tbw-grid, [data-tbw-grid]") ?? c?.current ?? null;
     if (d)
-      return d.registerExternalFocusContainer?.(m), () => {
-        d.unregisterExternalFocusContainer?.(m);
+      return d.registerExternalFocusContainer?.(f), () => {
+        d.unregisterExternalFocusContainer?.(f);
       };
-  }, [s, i, f, r]);
+  }, [l, n, c, t]);
 }
 export {
-  rr as DataGrid,
-  Re as GridAdapter,
-  tr as GridColumn,
-  gr as GridDetailPanel,
-  Fe as GridIconProvider,
-  or as GridProvider,
-  ar as GridResponsiveCard,
-  nr as GridToolButtons,
-  fr as GridToolPanel,
-  Le as GridTypeProvider,
-  Ee as applyColumnDefaults,
-  Ze as hasColumnShorthands,
-  De as normalizeColumns,
-  xe as parseColumnShorthand,
-  ir as useGrid,
-  Qe as useGridIcons,
-  sr as useGridOverlay,
-  Xe as useGridTypeDefaults,
-  er as useTypeDefault
+  ur as DataGrid,
+  Ge as GridAdapter,
+  ar as GridColumn,
+  Sr as GridDetailPanel,
+  lr as GridHeaderContent,
+  Ne as GridIconProvider,
+  gr as GridProvider,
+  Er as GridResponsiveCard,
+  fr as GridToolButtons,
+  hr as GridToolPanel,
+  dr as GridToolbarContent,
+  je as GridTypeProvider,
+  Oe as applyColumnDefaults,
+  or as hasColumnShorthands,
+  Me as normalizeColumns,
+  Ae as parseColumnShorthand,
+  Ce as registerChildFeatureDetector,
+  Pr as registerEditorMountHook,
+  vr as registerFeaturePropKey,
+  Rr as registerPostMountRefresh,
+  pr as useGrid,
+  ir as useGridIcons,
+  mr as useGridOverlay,
+  sr as useGridTypeDefaults,
+  cr as useTypeDefault
 };