@toolbox-web/grid-react 1.6.0 → 1.7.0

package/index.js

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