@toolbox-web/grid-react 1.3.0 → 1.5.0

package/index.js

@@ -1,49 +1,68 @@
-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 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 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) {
-  return n.charAt(0).toUpperCase() + n.slice(1);
-}
-function pe(n) {
-  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(xe).join(" ");
-}
-const Ke = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function Ne(n) {
-  const e = n.lastIndexOf(":");
-  if (e > 0) {
-    const t = n.slice(e + 1).toLowerCase();
-    if (Ke.has(t)) {
-      const r = n.slice(0, e);
+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 F, 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-DLA6Zs11.js";
+import { flushSync as re, createPortal as he } from "react-dom";
+import { p as ve } from "./chunks/react-column-config-Sb-U7Bq3.js";
+import { G as we, c as Re, d as Pe } from "./chunks/react-grid-adapter-CzByOnua.js";
+import { e as fr } from "./chunks/react-grid-adapter-CzByOnua.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) {
+  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(" ");
+}
+const Ge = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function xe(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);
       return {
-        field: r,
-        header: pe(r),
-        type: t
+        field: o,
+        header: te(o),
+        type: i
       };
     }
   }
   return {
-    field: n,
-    header: pe(n)
+    field: r,
+    header: te(r)
   };
 }
-function Fe(n) {
-  return n.map((e) => typeof e == "string" ? Ne(e) : e);
+function Ee(r) {
+  return r.map((t) => typeof t == "string" ? xe(t) : t);
+}
+function De(r, t) {
+  return t ? r.map((i) => ({ ...t, ...i })) : r;
+}
+function Ze(r) {
+  return r.some((t) => typeof t == "string");
 }
-const W = {
+const B = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
   onCellChange: "cell-change",
   onCellCommit: "cell-commit",
+  onCellCancel: "cell-cancel",
   onRowCommit: "row-commit",
   onChangedRowsReset: "changed-rows-reset",
+  onEditOpen: "edit-open",
+  onBeforeEditClose: "before-edit-close",
+  onEditClose: "edit-close",
+  onDirtyChange: "dirty-change",
+  onDataChange: "data-change",
   onSortChange: "sort-change",
   onFilterChange: "filter-change",
   onColumnResize: "column-resize",
+  onColumnResizeReset: "column-resize-reset",
   onColumnMove: "column-move",
   onColumnVisibility: "column-visibility",
   onColumnStateChange: "column-state-change",
@@ -54,993 +73,517 @@ const W = {
   onRowDrop: "row-drop",
   onRowTransfer: "row-transfer",
   onGroupToggle: "group-toggle",
+  onGroupExpand: "group-expand",
+  onGroupCollapse: "group-collapse",
   onTreeExpand: "tree-expand",
   onDetailExpand: "detail-expand",
   onResponsiveChange: "responsive-change",
+  onContextMenuOpen: "context-menu-open",
   onCopy: "copy",
   onPaste: "paste",
-  onUndoRedo: "undo-redo",
+  onUndo: "undo",
+  onRedo: "redo",
   onExportComplete: "export-complete",
   onPrintStart: "print-start",
   onPrintComplete: "print-complete",
   onTbwScroll: "tbw-scroll"
-}, 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 ve(n) {
-  const e = n.querySelector("tbw-grid-responsive-card");
-  if (e) {
-    const r = Y.get(e);
-    if (r) return r;
+}, H = ie(null), Fe = ({ icons: r, children: t }) => /* @__PURE__ */ w(H.Provider, { value: r, children: t });
+function Qe() {
+  return F(H);
+}
+const Le = H, N = ie(null), Ae = ({ defaults: r, children: t }) => /* @__PURE__ */ w(N.Provider, { value: r, children: t });
+function Xe() {
+  return F(N);
+}
+function er(r) {
+  return F(N)?.[r];
+}
+const ke = N;
+class Ie extends ge {
+  state = { failed: !1 };
+  static getDerivedStateFromError() {
+    return { failed: !0 };
+  }
+  componentDidCatch(t) {
+    this.props.onError(this.props.portalKey, t);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
   }
-  const t = n.id || n.getAttribute("data-grid-id");
-  if (t)
-    return Z.get(t);
-}
-function Me(n) {
-  const { children: e, cardRowHeight: t = "auto" } = n, r = k(null), o = E(
-    (c) => {
-      if (r.current = c, !c) return;
-      Y.set(c, e);
-      const s = c.closest("tbw-grid");
-      if (s) {
-        const g = s.id || s.getAttribute("data-grid-id");
-        g && Z.set(g, e);
-      }
-    },
-    [e]
-  );
-  P(() => () => {
-    const c = r.current;
-    if (c) {
-      Y.delete(c);
-      const s = c.closest("tbw-grid");
-      if (s) {
-        const g = s.id || s.getAttribute("data-grid-id");
-        g && Z.delete(g);
-      }
-    }
-  }, []);
-  const a = t === "auto" ? "auto" : String(t);
-  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: a });
-}
-Me.displayName = "GridResponsiveCard";
-const z = ye(null), He = ({ defaults: n, children: e }) => /* @__PURE__ */ b(z.Provider, { value: n, children: e });
-function mt() {
-  return O(z);
-}
-function yt(n) {
-  return O(z)?.[n];
 }
-const Oe = z, je = he(function(e, t) {
-  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();
+const Te = se(function(t, i) {
+  const o = b(/* @__PURE__ */ new Map()), [, d] = de((l) => l + 1, 0), g = b(!1), p = b(0), u = () => {
+    g.current || (g.current = !0, queueMicrotask(() => {
+      g.current = !1, re(d), R();
     }));
-  }, g = () => {
-    c.current || (c.current = requestAnimationFrame(() => {
-      c.current = 0;
-      let p = !1;
-      for (const [v, C] of r.current)
-        C.container.isConnected || (r.current.delete(v), p = !0);
-      p && V(o);
+  }, R = () => {
+    p.current || (p.current = requestAnimationFrame(() => {
+      p.current = 0, d();
     }));
+  }, S = (l, y) => {
+    console.error(`[grid-react] Portal "${l}" crashed; dropping.`, y), o.current.delete(l), R();
   };
-  Re(
-    t,
+  ce(
+    i,
     () => ({
-      renderPortal(p, v, C) {
-        r.current.set(p, { container: v, element: C }), s();
+      renderPortal(l, y, G) {
+        o.current.set(l, { container: y, element: G }), u();
       },
-      removePortal(p, v) {
-        r.current.delete(p) && (v ? V(o) : s());
+      removePortal(l, y) {
+        o.current.delete(l) && (y ? re(d) : u());
       },
       clear() {
-        r.current.size > 0 && (r.current.clear(), c.current && (cancelAnimationFrame(c.current), c.current = 0), s());
+        o.current.size > 0 && (o.current.clear(), p.current && (cancelAnimationFrame(p.current), p.current = 0), u());
       }
     }),
     // forceRender is stable (useReducer dispatch), refs are stable
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const d = [];
-  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"), D = [];
-function ze(n) {
-  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) {
-  const e = /* @__PURE__ */ new WeakMap();
-  return (t) => {
-    const r = t.cellEl;
-    if (r) {
-      const c = e.get(r);
-      if (c)
-        return w(c.container, n(t), c.portalKey), c.container;
+  const P = [];
+  let h = null;
+  for (const [l, { container: y, element: G }] of o.current) {
+    if (!y.isConnected) {
+      (h ??= []).push(l);
+      continue;
     }
-    const o = document.createElement("div");
-    o.className = "react-cell-renderer", o.style.display = "contents";
-    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) {
-  return (e) => {
-    const t = document.createElement("div");
-    t.className = "react-cell-editor", t.style.display = "contents";
-    const r = w(t, n(e));
-    return D.push({ key: r, container: t }), t;
-  };
-}
-function $e(n) {
-  return (e) => {
-    const t = document.createElement("div");
-    t.className = "react-header-renderer", t.style.display = "contents";
-    const r = w(t, n(e));
-    return D.push({ key: r, container: t }), t;
-  };
-}
-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 D.push({ key: r, container: t }), t;
-  };
-}
-function Ve(n) {
-  return (e) => {
-    const t = n(e);
-    if (t instanceof HTMLElement || typeof t == "string")
-      return t;
-    const r = document.createElement("div");
-    r.className = "react-loading-renderer", r.style.display = "contents";
-    const o = w(r, t);
-    return D.push({ key: o, container: r }), r;
-  };
-}
-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: Ve(r)
-    };
-  }
-  if (!n.columns) {
-    const r = n;
-    return r[U] = !0, r;
-  }
-  const e = n.columns.map((r) => {
-    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
-  };
-  return t[U] = !0, t;
-}
-const Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
-function We(n) {
-  const e = n.querySelector("tbw-grid-detail");
-  if (e) {
-    const r = Q.get(e);
-    if (r) return r;
-  }
-  const t = n.id || n.getAttribute("data-grid-id");
-  if (t)
-    return X.get(t);
-}
-function Ue(n) {
-  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 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 = s.parentNode;
-      d && d.contains(s);
-    }
-  }, []), /* @__PURE__ */ b(
-    "tbw-grid-detail",
-    {
-      ref: a,
-      showExpandColumn: t ? void 0 : "false",
-      animation: r === !1 ? "false" : r
-    }
-  );
-}
-Ue.displayName = "GridDetailPanel";
-const ee = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new Map();
-function Je(n) {
-  const e = ee.get(n);
-  if (e) return e;
-  const t = n.id;
-  if (t)
-    return te.get(t);
-}
-function ht(n) {
-  const { id: e, title: t, icon: r, tooltip: o, order: a = 100, children: c } = n, s = k(null), g = E(
-    (d) => {
-      s.current = d, d && (ee.set(d, c), e && te.set(e, c));
-    },
-    [c, e]
-  );
-  return P(() => () => {
-    const d = s.current;
-    d && (ee.delete(d), e && te.delete(e));
-  }, [e]), /* @__PURE__ */ b(
-    "tbw-grid-tool-panel",
-    {
-      ref: g,
-      id: e,
-      title: t,
-      icon: r,
-      tooltip: o,
-      order: a?.toString()
-    }
-  );
-}
-const G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
-function Ye(n, e) {
-  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 = 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 = G.get(n)?.renderer;
-  if (!e) {
-    const t = n.getAttribute("field");
-    t && (e = A.get(t)?.renderer);
-  }
-  return e;
-}
-function Xe(n) {
-  let e = G.get(n)?.editor;
-  if (!e) {
-    const t = n.getAttribute("field");
-    t && (e = A.get(t)?.editor);
-  }
-  return e;
-}
-class et {
-  /** Portal keys for all managed portals (for cleanup on destroy). */
-  allPortalKeys = /* @__PURE__ */ new Set();
-  /** Portal keys for editor-specific portals (for per-cell cleanup via releaseCell). */
-  editorPortalKeys = /* @__PURE__ */ new Set();
-  /** Maps portal keys to their containers (for container-based lookups in releaseCell/unmount). */
-  keyToContainer = /* @__PURE__ */ new Map();
-  typeDefaults = null;
-  /**
-   * Sets the type defaults map for this adapter.
-   * Called by DataGrid when it receives type defaults from context.
-   *
-   * @internal
-   */
-  setTypeDefaults(e) {
-    this.typeDefaults = e;
+    P.push(
+      he(
+        /* @__PURE__ */ w(Ie, { portalKey: l, onError: S, children: G }),
+        y,
+        l
+      )
+    );
   }
-  /**
-   * FrameworkAdapter.processConfig implementation.
-   * Called automatically by the grid's `set gridConfig` setter.
-   * Converts React renderer/editor functions to DOM-returning functions.
-   */
-  processConfig(e) {
-    return Ce(e) ?? e;
-  }
-  /**
-   * Determines if this adapter can handle the given element.
-   * Checks if a renderer or editor is registered for this element.
-   */
-  canHandle(e) {
-    const t = e.getAttribute("field");
-    let r = G.get(e);
-    if (!r && t) {
-      const c = A.get(t);
-      c && (c.renderer || c.editor) && (r = c, G.set(e, r));
-    }
-    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
-   * and returns its container DOM element.
-   *
-   * Uses a cell cache to reuse portals for performance - instead of
-   * creating new portals on each render, we reuse existing ones and
-   * update their content.
-   *
-   * Returns undefined if no renderer is registered for this element,
-   * allowing the grid to use its default rendering.
-   */
-  createRenderer(e) {
-    const t = Qe(e);
-    if (!t)
-      return;
-    const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
-    return (a) => {
-      const c = a.cellEl;
-      if (c) {
-        const d = o.get(c);
-        if (d)
-          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: v, container: p }), this.trackPortal(v, p, !1), p;
-      }
-      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(g, s, !1), s;
-    };
-  }
-  /**
-   * Creates an editor spec that renders a React component
-   * with commit/cancel callbacks passed as props.
-   */
-  createEditor(e) {
-    const t = Xe(e);
-    if (!t)
-      return () => document.createElement("div");
-    const r = e.closest("tbw-grid") ?? void 0;
-    return (o) => {
-      const a = document.createElement("div");
-      a.className = "react-cell-editor", a.style.display = "contents";
-      const c = w(
-        a,
-        t(o),
-        void 0,
-        r
-      );
-      return this.trackPortal(c, a, !0), a;
-    };
-  }
-  /**
-   * Creates a detail renderer function for MasterDetailPlugin.
-   * Renders React components for expandable detail rows.
-   */
-  createDetailRenderer(e) {
-    const t = We(e);
-    if (t)
-      return (r, o) => {
-        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(s, a, !1), a;
-      };
-  }
-  /**
-   * Framework adapter hook called by MasterDetailPlugin during attach().
-   * Parses the <tbw-grid-detail> element and returns a React-based renderer.
-   */
-  parseDetailElement(e) {
-    const t = e.closest("tbw-grid");
-    if (t)
-      return this.createDetailRenderer(t);
-  }
-  /**
-   * Creates a responsive card renderer function for ResponsivePlugin.
-   * Renders React components for card layout in responsive mode.
-   */
-  createResponsiveCardRenderer(e) {
-    const t = ve(e);
-    if (t)
-      return (r, o) => {
-        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(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.
-   */
-  createToolPanelRenderer(e) {
-    const t = Je(e);
-    if (!t)
-      return;
-    const r = e.closest("tbw-grid");
-    return (o) => {
-      const c = w(o, t({
-        grid: r ?? o
-      }), void 0, r ?? void 0);
-      return this.trackPortal(c, o, !1), () => {
-        H(c, { sync: !0 }), this.untrackPortal(c);
-      };
-    };
-  }
-  /**
-   * Gets type-level defaults from the type defaults map.
-   *
-   * This enables application-wide type defaults configured via GridTypeProvider.
-   * The returned TypeDefault contains renderer/editor functions that render
-   * React components into the grid's cells.
-   *
-   * @example
-   * ```tsx
-   * // App.tsx
-   * const typeDefaults = {
-   *   country: {
-   *     renderer: (ctx) => <CountryBadge code={ctx.value} />,
-   *     editor: (ctx) => <CountrySelect value={ctx.value} onCommit={ctx.commit} />
-   *   }
-   * };
-   *
-   * <GridTypeProvider defaults={typeDefaults}>
-   *   <App />
-   * </GridTypeProvider>
-   *
-   * // Any grid with type: 'country' columns will use these components
-   * ```
-   */
-  getTypeDefault(e, t) {
-    if (!this.typeDefaults)
-      return;
-    const r = this.typeDefaults[e];
-    if (!r)
-      return;
-    const o = {
-      editorParams: r.editorParams
-    };
-    return r.renderer && (o.renderer = this.createTypeRenderer(r.renderer, t)), r.editor && (o.editor = this.createTypeEditor(r.editor, t)), r.filterPanelRenderer && (o.filterPanelRenderer = this.createFilterPanelRenderer(r.filterPanelRenderer, t)), o;
-  }
-  /**
-   * Creates a renderer function from a React render function for type defaults.
-   * @internal
-   */
-  createTypeRenderer(e, t) {
-    return (r) => {
-      const o = document.createElement("span");
-      o.style.display = "contents";
-      const a = r.cellEl?.closest("tbw-grid") ?? t, c = w(o, e(r), void 0, a);
-      return this.trackPortal(c, o, !1), o;
-    };
-  }
-  /**
-   * Creates an editor function from a React render function for type defaults.
-   * @internal
-   */
-  createTypeEditor(e, t) {
-    return (r) => {
-      const o = document.createElement("span");
-      o.style.display = "contents";
-      const a = w(o, e(r), void 0, t);
-      return this.trackPortal(a, o, !0), o;
-    };
-  }
-  /**
-   * Creates a filter panel renderer that mounts React content into the filter panel container.
-   * @internal
-   */
-  createFilterPanelRenderer(e, t) {
-    return (r, o) => {
-      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
-  /** Register a portal key for lifecycle tracking. */
-  trackPortal(e, t, r) {
-    this.allPortalKeys.add(e), this.keyToContainer.set(e, t), r && this.editorPortalKeys.add(e);
-  }
-  /** Unregister a portal key from all tracking sets. */
-  untrackPortal(e) {
-    this.allPortalKeys.delete(e), this.editorPortalKeys.delete(e), this.keyToContainer.delete(e);
-  }
-  // #endregion
-  /**
-   * Clean up all mounted portals.
-   * Call this when the grid is unmounted.
-   */
-  destroy() {
-    for (const e of this.allPortalKeys)
-      H(e);
-    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), A.clear();
-  }
-  /**
-   * Called when a cell's content is about to be wiped.
-   * Destroys editor portals whose container is inside the cell.
-   * Also cleans up config-based editor roots (from processGridConfig/wrapReactEditor)
-   * that bypass the adapter's tracking.
-   */
-  releaseCell(e) {
-    for (const t of this.editorPortalKeys) {
-      const r = this.keyToContainer.get(t);
-      r && e.contains(r) && (H(t), this.untrackPortal(t));
-    }
-    ze(e);
-  }
-  /**
-   * Unmount a specific container (called when cell is recycled).
-   */
-  unmount(e) {
-    for (const [t, r] of this.keyToContainer)
-      if (r === e) {
-        H(t), this.untrackPortal(t);
-        return;
-      }
+  if (h) {
+    const l = h;
+    queueMicrotask(() => {
+      for (const y of l) o.current.delete(y);
+    });
   }
-}
-const tt = {
+  return /* @__PURE__ */ w(V, { children: P });
+}), Me = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function rt(n) {
-  const e = new Set(n);
-  for (const t of n) {
-    const r = tt[t];
-    if (r)
-      for (const o of r)
-        e.has(o) || console.warn(
-          `[DataGrid] Feature "${t}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
+function Ne(r) {
+  const t = new Set(r);
+  for (const i of r) {
+    const o = Me[i];
+    if (o)
+      for (const d of o)
+        t.has(d) || console.warn(
+          `[DataGrid] Feature "${i}" requires "${d}" to be enabled. Add the "${d}" prop to your DataGrid.`
         );
   }
 }
-function nt(n) {
-  const e = [];
-  for (const [t, r] of Object.entries(n))
-    r === void 0 || r === !1 || e.push(t);
-  return rt(e), Ae(n);
-}
-let me = !1, J = null;
-function re() {
-  return me || (J = new et(), be.registerAdapter(J), me = !0), J;
-}
-re();
-function ot(n) {
-  const t = n.getPluginByName?.("masterDetail");
-  t && typeof t.refreshDetailRenderer == "function" && t.refreshDetailRenderer();
-}
-function it(n, e) {
-  const t = n;
-  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 && a.setCardRenderer(c);
+function Oe(r) {
+  const t = [];
+  for (const [i, o] of Object.entries(r))
+    o === void 0 || o === !1 || t.push(i);
+  return Ne(t), be(r);
+}
+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 we(), fe.registerAdapter(_), ne = !0), _;
+}
+q();
+function ze(r) {
+  const i = r.getPluginByName?.("masterDetail");
+  i && typeof i.refreshDetailRenderer == "function" && i.refreshDetailRenderer();
+}
+function je(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 st(n) {
-  const e = {};
-  return Se.forEach(n, (t) => {
-    if (De(t)) {
-      if (t.type && t.type.displayName === "GridDetailPanel") {
-        const r = t.props;
-        e.masterDetail = {
+function $e(r) {
+  const t = {};
+  return me.forEach(r, (i) => {
+    if (Ce(i)) {
+      if (i.type && i.type.displayName === "GridDetailPanel") {
+        const o = i.props;
+        t.masterDetail = {
           // Use props from the child component for configuration
-          showExpandColumn: r.showExpandColumn ?? !0,
-          animation: r.animation ?? "slide"
+          showExpandColumn: o.showExpandColumn ?? !0,
+          animation: o.animation ?? "slide"
           // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
         };
       }
-      t.type && t.type.displayName === "GridResponsiveCard" && (e.responsive = !0);
+      i.type && i.type.displayName === "GridResponsiveCard" && (t.responsive = !0);
     }
-  }), e;
+  }), t;
 }
-const Rt = he(function(e, t) {
+const rr = se(function(t, i) {
   const {
     // Core props
-    rows: r,
-    gridConfig: o,
-    columns: a,
-    columnDefaults: c,
-    fitMode: s,
-    sortable: g,
-    filterable: d,
-    selectable: p,
-    loading: v,
-    customStyles: C,
-    className: K,
-    style: x,
-    children: T,
+    rows: o,
+    gridConfig: d,
+    columns: g,
+    columnDefaults: p,
+    fitMode: u,
+    sortable: R,
+    filterable: S,
+    selectable: P,
+    loading: h,
+    customStyles: l,
+    className: y,
+    style: G,
+    children: D,
     // Plugin props
-    plugins: u,
-    // SSR mode
-    ssr: h,
+    plugins: s,
+    // SSR mode (deprecated - see SSRProps)
+    ssr: m,
     // Legacy event handlers
-    onRowsChange: R,
+    onRowsChange: C,
     // Feature props and event props are in ...rest
-    ...m
-  } = e, f = k(null), j = k(null), ie = O(Oe), q = O(Le), se = [
-    "selection",
-    "editing",
-    "filtering",
-    "multiSort",
-    "clipboard",
-    "contextMenu",
-    "reorderColumns",
-    "reorderRows",
-    "rowDragDrop",
-    "visibility",
-    "undoRedo",
-    "tree",
-    "groupingRows",
-    "groupingColumns",
-    "pinnedColumns",
-    "pinnedRows",
-    "masterDetail",
-    "responsive",
-    "columnVirtualization",
-    "export",
-    "print",
-    "pivot",
-    "serverSide",
-    "tooltip"
-  ], we = S(() => se.map((i) => {
-    const l = m[i];
-    return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
-  }).filter(Boolean).join("|"), [m]), ae = S(() => {
-    const i = {};
-    for (const l of se)
-      l in m && m[l] !== void 0 && (i[l] = m[l]);
-    return i;
-  }, [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];
+    ...a
+  } = t, c = b(null), M = b(null), K = b(!1), U = F(ke), O = F(Le), ue = E(() => oe.map((e) => {
+    const n = a[e];
+    return n !== void 0 ? `${e}:${JSON.stringify(n)}` : "";
+  }).filter(Boolean).join("|"), [a]), Y = E(() => {
+    const e = {};
+    for (const n of oe)
+      n in a && a[n] !== void 0 && (e[n] = a[n]);
+    return e;
+  }, [ue]), J = E(() => $e(D), [D]), W = E(() => ({ ...J, ...Y }), [Y, J]), z = E(() => s || m ? [] : Oe(W), [W, s, m]), L = E(() => {
+    if (s) {
+      const e = new Set(s.map((f) => f.name)), n = z.filter((f) => !e.has(f.name));
+      return [...s, ...n];
     }
-    return _;
-  }, [u, _]), F = S(() => {
-    if (!a) return a;
-    const i = Fe(a);
-    return c ? i.map((l) => ({
-      ...c,
-      ...l
-      // Individual column props override defaults
-    })) : i;
-  }, [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 };
+    return z;
+  }, [s, z]), A = E(() => g && De(Ee(g), p), [g, p]), k = E(() => {
+    const e = ve(d), n = {};
+    if (R !== void 0 && (n.sortable = R), S !== void 0 && (n.filterable = S), P !== void 0 && (n.selectable = P), O) {
+      const f = e?.icons || d?.icons || {};
+      n.icons = { ...O, ...f };
     }
-    if (N.length > 0 && i) {
-      const y = i.plugins || [], L = new Set(y.map((M) => M.name)), B = N.filter((M) => !L.has(M.name));
+    if (L.length > 0 && e) {
+      const f = e.plugins || [], I = new Set(f.map((T) => T.name)), $ = L.filter((T) => !I.has(T.name));
       return {
-        ...i,
-        ...l,
-        plugins: [...y, ...B]
+        ...e,
+        ...n,
+        plugins: [...f, ...$]
       };
     }
-    return N.length > 0 && !i ? { ...l, plugins: N } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
-  }, [o, N, g, d, p, q]);
-  P(() => {
-    re().setTypeDefaults(ie);
-  }, [ie]), P(() => {
-    f.current && (f.current.rows = r);
-  }, [r]), P(() => {
-    f.current && I && (f.current.gridConfig = I);
-  }, [I]), P(() => {
-    f.current && F && (f.current.columns = F);
-  }, [F]), P(() => {
-    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);
-    let y = !1;
-    const L = requestAnimationFrame(() => {
-      y || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+    return L.length > 0 && !e ? { ...n, plugins: L } : Object.keys(n).length > 0 ? { ...e, ...n } : e;
+  }, [d, L, R, S, P, O]);
+  v(() => {
+    q().setTypeDefaults(U);
+  }, [U]), v(() => {
+    c.current && (c.current.rows = o);
+  }, [o]), v(() => {
+    c.current && k && (c.current.gridConfig = k);
+  }, [k]), v(() => {
+    c.current && A && (c.current.columns = A);
+  }, [A]), v(() => {
+    c.current && u !== void 0 && (c.current.fitMode = u);
+  }, [u]), v(() => {
+    c.current && h !== void 0 && (c.current.loading = h);
+  }, [h]), v(() => {
+    const e = c.current;
+    if (!e) return;
+    const n = q();
+    e.__frameworkAdapter = n, ze(e), je(e, n);
+    let f = !1;
+    const I = requestAnimationFrame(() => {
+      f || (typeof e.refreshColumns == "function" && e.refreshColumns(), typeof e.refreshShellHeader == "function" && e.refreshShellHeader());
     });
     return () => {
-      y = !0, cancelAnimationFrame(L);
+      f = !0, cancelAnimationFrame(I);
     };
-  }, []), P(() => {
-    if (!f.current || !C) return;
-    const i = f.current, l = "react-custom-styles";
-    let y = !0;
-    return i.ready?.().then(() => {
-      y && C && (i.registerStyles?.(l, C), j.current = l);
+  }, []), v(() => {
+    if (!c.current || !l) return;
+    const e = c.current, n = "react-custom-styles";
+    let f = !0;
+    return e.ready?.().then(() => {
+      f && l && (e.registerStyles?.(n, l), M.current = n);
     }), () => {
-      y = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
+      f = !1, M.current && (e.unregisterStyles?.(M.current), M.current = null);
     };
-  }, [C]), P(() => {
-    const i = f.current;
-    if (!i) return;
-    const l = [];
-    return R && l.push(i.on("rows-change", (y) => R(y.rows))), () => {
-      l.forEach((y) => y());
+  }, [l]), v(() => {
+    const e = c.current;
+    if (!e) return;
+    const n = [];
+    return C && n.push(e.on("rows-change", (f) => C(f.rows))), () => {
+      n.forEach((f) => f());
     };
-  }, [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 = f.current;
-    if (!i) return;
-    const l = [];
-    for (const [y, L] of Object.entries(W))
-      de.includes(y) && l.push(
-        i.on(L, (B, M) => {
-          ue.current[y]?.(B, M);
+  }, [C]);
+  const Z = E(() => Object.keys(B).filter((e) => typeof a[e] == "function").sort().join("|"), [a]), Q = b({});
+  for (const e of Object.keys(B))
+    Q.current[e] = a[e];
+  v(() => {
+    const e = c.current;
+    if (!e) return;
+    const n = [];
+    for (const [f, I] of Object.entries(B))
+      Z.includes(f) && n.push(
+        e.on(I, ($, T) => {
+          Q.current[f]?.($, T);
         })
       );
     return () => {
-      l.forEach((y) => y());
+      n.forEach((f) => f());
     };
-  }, [de]), Re(
-    t,
+  }, [Z]), ce(
+    i,
     () => ({
       get element() {
-        return f.current;
+        return c.current;
       },
       async getConfig() {
-        return f.current?.getConfig?.() ?? {};
+        return c.current?.getConfig?.() ?? {};
       },
       async ready() {
-        return f.current?.ready?.();
+        return c.current?.ready?.();
       },
       async forceLayout() {
-        return f.current?.forceLayout?.();
+        return c.current?.forceLayout?.();
       },
-      async toggleGroup(i) {
-        return f.current?.toggleGroup?.(i);
+      async toggleGroup(e) {
+        return c.current?.toggleGroup?.(e);
       },
-      registerStyles(i, l) {
-        f.current?.registerStyles?.(i, l);
+      registerStyles(e, n) {
+        c.current?.registerStyles?.(e, n);
       },
-      unregisterStyles(i) {
-        f.current?.unregisterStyles?.(i);
+      unregisterStyles(e) {
+        c.current?.unregisterStyles?.(e);
       },
-      setRowLoading(i, l) {
-        f.current?.setRowLoading?.(i, l);
+      setRowLoading(e, n) {
+        c.current?.setRowLoading?.(e, n);
       },
-      setCellLoading(i, l, y) {
-        f.current?.setCellLoading?.(i, l, y);
+      setCellLoading(e, n, f) {
+        c.current?.setCellLoading?.(e, n, f);
       },
-      isRowLoading(i) {
-        return f.current?.isRowLoading?.(i) ?? !1;
+      isRowLoading(e) {
+        return c.current?.isRowLoading?.(e) ?? !1;
       },
-      isCellLoading(i, l) {
-        return f.current?.isCellLoading?.(i, l) ?? !1;
+      isCellLoading(e, n) {
+        return c.current?.isCellLoading?.(e, n) ?? !1;
       },
       clearAllLoading() {
-        f.current?.clearAllLoading?.();
+        c.current?.clearAllLoading?.();
       }
     }),
     []
   );
-  const $ = k(null);
-  return ke(() => {
-    const i = f.current;
-    return i && $.current && ge(i, $.current), () => {
-      i && ge(i, null);
+  const j = b(null);
+  return pe(() => {
+    const e = c.current;
+    return e && j.current && ee(e, j.current), () => {
+      e && ee(e, null);
     };
-  }, []), /* @__PURE__ */ Pe(ne, { children: [
-    /* @__PURE__ */ b(je, { ref: $ }),
-    /* @__PURE__ */ b(
+  }, []), /* @__PURE__ */ le(V, { children: [
+    /* @__PURE__ */ w(Te, { ref: j }),
+    /* @__PURE__ */ w(
       "tbw-grid",
       {
-        ref: (i) => {
-          if (f.current = i, i) {
-            const l = i;
-            I && (l.gridConfig = I), r && (l.rows = r), F && (l.columns = F);
+        ref: (e) => {
+          if (c.current = e, e && !K.current) {
+            K.current = !0;
+            const n = e;
+            k && (n.gridConfig = k), o && (n.rows = o), A && (n.columns = A);
           }
         },
-        class: K,
-        style: x,
-        children: /* @__PURE__ */ b(Te.Provider, { value: f, children: T })
+        class: y,
+        style: G,
+        children: /* @__PURE__ */ w(ae.Provider, { value: c, children: D })
       }
     )
   ] });
 });
-function vt(n) {
+function tr(r) {
   const {
-    field: e,
-    header: t,
-    type: r,
-    editable: o,
-    sortable: a,
-    resizable: c,
-    width: s,
-    minWidth: g,
-    hidden: d,
-    lockVisible: p,
-    children: v,
-    editor: C,
-    options: K,
-    multi: x,
-    format: T
-  } = n, u = k(null), h = E(
-    (f) => {
-      u.current = f, f && (v && Ye(f, v), C && Ze(f, C));
+    field: t,
+    header: i,
+    type: o,
+    editable: d,
+    sortable: g,
+    resizable: p,
+    width: u,
+    minWidth: R,
+    hidden: S,
+    lockVisible: P,
+    children: h,
+    editor: l,
+    options: y,
+    multi: G,
+    format: D
+  } = r, s = b(null), m = x(
+    (c) => {
+      s.current = c, c && (h && Re(c, h), l && Pe(c, l));
     },
-    [v, C, e]
-  ), R = typeof s == "number" ? `${s}px` : s, m = {
-    field: e,
-    ref: h
+    [h, l, t]
+  ), C = typeof u == "number" ? `${u}px` : u, a = {
+    field: t,
+    ref: m
   };
-  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 });
+  return i !== void 0 && (a.header = i), o !== void 0 && (a.type = o), d !== void 0 && (a.editable = d), g !== void 0 && (a.sortable = g), p !== void 0 && (a.resizable = p), C !== void 0 && (a.width = C), R !== void 0 && (a["min-width"] = R), S !== void 0 && (a.hidden = S), P !== void 0 && (a["lock-visible"] = P), G !== void 0 && (a.multi = G), D && (a["data-has-format"] = "true"), y && (a["data-has-options"] = "true"), /* @__PURE__ */ w("tbw-grid-column", { ...a });
 }
-function Ct({ children: n }) {
-  return /* @__PURE__ */ b("tbw-grid-tool-buttons", { children: n });
+function nr({ children: r }) {
+  return /* @__PURE__ */ w("tbw-grid-tool-buttons", { children: r });
 }
-const wt = ({ icons: n, defaults: e, children: t }) => {
-  let r = 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 });
+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 });
 };
-function Pt(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 u = !0;
+function ir(r) {
+  const t = b(null), [i, o] = X(!1), [d, g] = X(null), p = b(null), u = x(() => r ? (p.current ??= document.querySelector(r), p.current) : t.current?.element ?? null, [r]);
+  v(() => {
+    let s = !0;
     return (async () => {
       try {
-        if (n) {
-          const R = document.querySelector(n);
-          if (!R) return;
-          if (c.current = R, await R.ready?.(), u) {
-            r(!0);
-            const m = await R.getConfig?.();
-            u && m && a(m);
+        if (r) {
+          const C = document.querySelector(r);
+          if (!C) return;
+          if (p.current = C, await C.ready?.(), s) {
+            o(!0);
+            const a = await C.getConfig?.();
+            s && a && g(a);
           }
         } else {
-          const R = e.current;
-          if (!R) return;
-          if (await R.ready?.(), u) {
-            r(!0);
-            const m = await R.getConfig?.();
-            u && m && a(m);
+          const C = t.current;
+          if (!C) return;
+          if (await C.ready?.(), s) {
+            o(!0);
+            const a = await C.getConfig?.();
+            s && a && g(a);
           }
         }
       } catch {
       }
     })(), () => {
-      u = !1;
+      s = !1;
     };
-  }, [n]);
-  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?.();
+  }, [r]);
+  const R = x(async () => {
+    const s = u();
+    if (s)
+      return await s.getConfig?.() ?? null;
+    const m = t.current;
+    return m ? await m.getConfig?.() ?? null : null;
+  }, [u]), S = x(async () => {
+    const s = u();
+    if (s) {
+      await s.forceLayout?.();
       return;
     }
-    const h = e.current;
-    h && await h.forceLayout?.();
-  }, [s]), p = E(
-    async (u) => {
-      const h = s();
-      if (h) {
-        await h.toggleGroup?.(u);
+    const m = t.current;
+    m && await m.forceLayout?.();
+  }, [u]), P = x(
+    async (s) => {
+      const m = u();
+      if (m) {
+        await m.toggleGroup?.(s);
         return;
       }
-      const R = e.current;
-      R && await R.toggleGroup?.(u);
+      const C = t.current;
+      C && await C.toggleGroup?.(s);
     },
-    [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);
+    [u]
+  ), h = x(
+    (s) => u()?.getPlugin?.(s),
+    [u]
+  ), l = x(
+    ((s) => u()?.getPluginByName?.(s)),
+    [u]
+  ), y = x(
+    (s, m) => {
+      const C = u();
+      if (C) {
+        C.registerStyles?.(s, m);
         return;
       }
-      e.current?.registerStyles?.(u, h);
+      t.current?.registerStyles?.(s, m);
     },
-    [s]
-  ), x = E(
-    (u) => {
-      const h = s();
-      if (h) {
-        h.unregisterStyles?.(u);
+    [u]
+  ), G = x(
+    (s) => {
+      const m = u();
+      if (m) {
+        m.unregisterStyles?.(s);
         return;
       }
-      e.current?.unregisterStyles?.(u);
+      t.current?.unregisterStyles?.(s);
     },
-    [s]
-  ), T = E(() => o?.columns ? o.columns.filter((u) => !u.hidden) : [], [o]);
+    [u]
+  ), D = x(() => d?.columns ? d.columns.filter((s) => !s.hidden) : [], [d]);
   return {
-    ref: e,
-    element: s(),
-    isReady: t,
-    config: o,
-    getConfig: g,
-    forceLayout: d,
-    toggleGroup: p,
-    getPlugin: v,
-    getPluginByName: C,
-    registerStyles: K,
-    unregisterStyles: x,
-    getVisibleColumns: T
+    ref: t,
+    element: u(),
+    isReady: i,
+    config: d,
+    getConfig: R,
+    forceLayout: S,
+    toggleGroup: P,
+    getPlugin: h,
+    getPluginByName: l,
+    registerStyles: y,
+    unregisterStyles: G,
+    getVisibleColumns: D
   };
 }
+function sr(r, t = {}) {
+  const { open: i = !0, gridElement: o } = t, d = F(ae);
+  v(() => {
+    if (!i) return;
+    const g = r.current;
+    if (!g) return;
+    const p = o ?? g.closest("tbw-grid") ?? d?.current ?? null;
+    if (p)
+      return p.registerExternalFocusContainer?.(g), () => {
+        p.unregisterExternalFocusContainer?.(g);
+      };
+  }, [i, o, d, r]);
+}
 export {
-  Rt as DataGrid,
-  et as GridAdapter,
-  vt as GridColumn,
-  Ue as GridDetailPanel,
-  Ie as GridIconProvider,
-  wt as GridProvider,
-  Me as GridResponsiveCard,
-  Ct as GridToolButtons,
-  ht as GridToolPanel,
-  He as GridTypeProvider,
-  Pt as useGrid,
-  pt as useGridIcons,
-  mt as useGridTypeDefaults,
-  yt as useTypeDefault
+  rr 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
 };