@toolbox-web/grid-react 1.2.0 → 1.4.0

package/index.js

@@ -1,22 +1,22 @@
-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 ve, 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) {
+import { jsx as E, Fragment as re, jsxs as Pe } from "react/jsx-runtime";
+import { DataGridElement as Ee } from "@toolbox-web/grid";
+import { createContext as ye, useContext as L, useRef as k, useCallback as S, useEffect as P, forwardRef as he, useReducer as Se, useImperativeHandle as ve, Component as ke, useMemo as T, useLayoutEffect as De, Children as Te, isValidElement as Ge, useState as ue } from "react";
+import { a as b, r as A, s as fe } from "./chunks/portal-bridge-DZ4yQkmm.js";
+import { flushSync as ge, createPortal as Ke } from "react-dom";
+import { createPluginsFromFeatures as xe } from "@toolbox-web/grid/features/registry";
+import { G as Ce } from "./chunks/grid-element-context-BU3WvNtM.js";
+function Ae(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(" ");
+  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(Ae).join(" ");
 }
-const Ke = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
-function Ne(n) {
+const Me = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Le(n) {
   const e = n.lastIndexOf(":");
   if (e > 0) {
     const t = n.slice(e + 1).toLowerCase();
-    if (Ke.has(t)) {
+    if (Me.has(t)) {
       const r = n.slice(0, e);
       return {
         field: r,
@@ -31,9 +31,9 @@ function Ne(n) {
   };
 }
 function Fe(n) {
-  return n.map((e) => typeof e == "string" ? Ne(e) : e);
+  return n.map((e) => typeof e == "string" ? Le(e) : e);
 }
-const W = {
+const _ = {
   onCellClick: "cell-click",
   onRowClick: "row-click",
   onCellActivate: "cell-activate",
@@ -49,6 +49,10 @@ const W = {
   onColumnStateChange: "column-state-change",
   onSelectionChange: "selection-change",
   onRowMove: "row-move",
+  onRowDragStart: "row-drag-start",
+  onRowDragEnd: "row-drag-end",
+  onRowDrop: "row-drop",
+  onRowTransfer: "row-transfer",
   onGroupToggle: "group-toggle",
   onTreeExpand: "tree-expand",
   onDetailExpand: "detail-expand",
@@ -60,135 +64,178 @@ const W = {
   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);
+}, ne = ye(null), Ne = ({ icons: n, children: e }) => /* @__PURE__ */ E(ne.Provider, { value: n, children: e });
+function yt() {
+  return L(ne);
 }
-const Le = oe, Y = /* @__PURE__ */ new WeakMap(), Z = /* @__PURE__ */ new Map();
-function Ce(n) {
+const Ie = ne, J = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+function Re(n) {
   const e = n.querySelector("tbw-grid-responsive-card");
   if (e) {
-    const r = Y.get(e);
+    const r = J.get(e);
     if (r) return r;
   }
   const t = n.id || n.getAttribute("data-grid-id");
   if (t)
-    return Z.get(t);
+    return Y.get(t);
 }
-function Me(n) {
-  const { children: e, cardRowHeight: t = "auto" } = n, r = k(null), o = E(
-    (a) => {
-      if (r.current = a, !a) return;
-      Y.set(a, e);
-      const s = a.closest("tbw-grid");
-      if (s) {
-        const g = s.id || s.getAttribute("data-grid-id");
-        g && Z.set(g, e);
+function He(n) {
+  const { children: e, cardRowHeight: t = "auto" } = n, r = k(null), o = S(
+    (i) => {
+      if (r.current = i, !i) return;
+      J.set(i, e);
+      const c = i.closest("tbw-grid");
+      if (c) {
+        const g = c.id || c.getAttribute("data-grid-id");
+        g && Y.set(g, e);
       }
     },
     [e]
   );
   P(() => () => {
-    const a = r.current;
-    if (a) {
-      Y.delete(a);
-      const s = a.closest("tbw-grid");
-      if (s) {
-        const g = s.id || s.getAttribute("data-grid-id");
-        g && Z.delete(g);
+    const i = r.current;
+    if (i) {
+      J.delete(i);
+      const c = i.closest("tbw-grid");
+      if (c) {
+        const g = c.id || c.getAttribute("data-grid-id");
+        g && Y.delete(g);
       }
     }
   }, []);
-  const c = t === "auto" ? "auto" : String(t);
-  return /* @__PURE__ */ b("tbw-grid-responsive-card", { ref: o, cardRowHeight: c });
+  const s = t === "auto" ? "auto" : String(t);
+  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+}
+He.displayName = "GridResponsiveCard";
+const O = ye(null), Be = ({ defaults: n, children: e }) => /* @__PURE__ */ E(O.Provider, { value: n, children: e });
+function ht() {
+  return L(O);
 }
-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 vt(n) {
+  return L(O)?.[n];
 }
-function yt(n) {
-  return O(z)?.[n];
+const qe = O;
+class Oe extends ke {
+  state = { failed: !1 };
+  static getDerivedStateFromError() {
+    return { failed: !0 };
+  }
+  componentDidCatch(e) {
+    this.props.onError(this.props.portalKey, e);
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
 }
-const Oe = z, je = he(function(e, t) {
-  const r = k(/* @__PURE__ */ new Map()), [, o] = Ee((p) => p + 1, 0), c = k(!1), a = k(0), s = () => {
-    c.current || (c.current = !0, queueMicrotask(() => {
-      c.current = !1, V(o), g();
+const je = he(function(e, t) {
+  const r = k(/* @__PURE__ */ new Map()), [, o] = Se((m) => m + 1, 0), s = k(!1), i = k(0), c = () => {
+    s.current || (s.current = !0, queueMicrotask(() => {
+      s.current = !1, ge(o), g();
     }));
   }, g = () => {
-    a.current || (a.current = requestAnimationFrame(() => {
-      a.current = 0;
-      let p = !1;
-      for (const [C, R] of r.current)
-        R.container.isConnected || (r.current.delete(C), p = !0);
-      p && V(o);
+    i.current || (i.current = requestAnimationFrame(() => {
+      i.current = 0, o();
     }));
+  }, l = (m, w) => {
+    console.error(`[grid-react] Portal "${m}" crashed; dropping.`, w), r.current.delete(m), g();
   };
   ve(
     t,
     () => ({
-      renderPortal(p, C, R) {
-        r.current.set(p, { container: C, element: R }), s();
+      renderPortal(m, w, D) {
+        r.current.set(m, { container: w, element: D }), c();
       },
-      removePortal(p, C) {
-        r.current.delete(p) && (C ? V(o) : s());
+      removePortal(m, w) {
+        r.current.delete(m) && (w ? ge(o) : c());
       },
       clear() {
-        r.current.size > 0 && (r.current.clear(), a.current && (cancelAnimationFrame(a.current), a.current = 0), s());
+        r.current.size > 0 && (r.current.clear(), i.current && (cancelAnimationFrame(i.current), i.current = 0), c());
       }
     }),
     // forceRender is stable (useReducer dispatch), refs are stable
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const d = [];
-  for (const [p, { container: C, element: R }] of r.current)
-    d.push(Ge(R, C, p));
-  return /* @__PURE__ */ b(ne, { children: d });
-}), U = /* @__PURE__ */ Symbol("reactProcessed"), D = [];
+  const C = [];
+  let R = null;
+  for (const [m, { container: w, element: D }] of r.current) {
+    if (!w.isConnected) {
+      (R ??= []).push(m);
+      continue;
+    }
+    C.push(
+      Ke(
+        /* @__PURE__ */ E(Oe, { portalKey: m, onError: l, children: D }),
+        w,
+        m
+      )
+    );
+  }
+  if (R) {
+    const m = R;
+    queueMicrotask(() => {
+      for (const w of m) r.current.delete(w);
+    });
+  }
+  return /* @__PURE__ */ E(re, { children: C });
+}), W = /* @__PURE__ */ Symbol("reactProcessed"), M = /* @__PURE__ */ new Map();
 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));
+  const e = n.querySelectorAll(".react-cell-editor, .react-cell-renderer");
+  for (const t of e) {
+    const r = M.get(t);
+    r && (r.unsub?.(), A(r.key, { sync: !0 }), M.delete(t));
   }
 }
-function qe(n) {
+function $e(n) {
   const e = /* @__PURE__ */ new WeakMap();
   return (t) => {
     const r = t.cellEl;
     if (r) {
-      const a = e.get(r);
-      if (a)
-        return w(a.container, n(t), a.portalKey), a.container;
+      const i = e.get(r);
+      if (i) {
+        if (r.contains(i.container))
+          return b(i.container, n(t), i.portalKey), i.container;
+        A(i.portalKey, { sync: !0 }), e.delete(r);
+      }
     }
     const o = document.createElement("div");
     o.className = "react-cell-renderer", o.style.display = "contents";
-    const c = w(o, n(t));
-    return r && e.set(r, { portalKey: c, container: o }), D.push({ key: c, container: o }), o;
+    const s = b(o, n(t));
+    return r && e.set(r, { portalKey: s, container: o }), M.set(o, { key: s }), o;
   };
 }
-function _e(n) {
+function Ue(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;
+    const o = { key: b(t, n(e)) };
+    return M.set(t, o), queueMicrotask(() => {
+      const s = t.closest("tbw-grid");
+      if (!s) return;
+      const i = () => {
+        const c = t.ownerDocument.activeElement;
+        c && t.contains(c) && (c instanceof HTMLInputElement || c instanceof HTMLTextAreaElement || c instanceof HTMLSelectElement) && c.blur();
+      };
+      s.addEventListener("before-edit-close", i), o.unsub = () => {
+        s.removeEventListener("before-edit-close", i);
+      };
+    }), t;
   };
 }
-function $e(n) {
+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;
+    const r = b(t, n(e));
+    return M.set(t, { key: r }), t;
   };
 }
-function Be(n) {
+function We(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;
+    const r = b(t, n(e));
+    return M.set(t, { key: r }), t;
   };
 }
 function Ve(n) {
@@ -198,13 +245,13 @@ function Ve(n) {
       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;
+    const o = b(r, t);
+    return M.set(r, { key: o }), r;
   };
 }
-function Re(n) {
+function we(n) {
   if (!n) return;
-  if (n[U]) return n;
+  if (n[W]) return n;
   if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
     const r = n.loadingRenderer;
     n = {
@@ -214,82 +261,82 @@ function Re(n) {
   }
   if (!n.columns) {
     const r = n;
-    return r[U] = !0, r;
+    return r[W] = !0, r;
   }
   const e = n.columns.map((r) => {
-    const { renderer: o, editor: c, headerRenderer: a, headerLabelRenderer: s, ...g } = r, d = { ...g };
-    return o && (d.renderer = qe(o)), c && (d.editor = _e(c)), a && (d.headerRenderer = $e(a)), s && (d.headerLabelRenderer = Be(s)), d;
+    const { renderer: o, editor: s, headerRenderer: i, headerLabelRenderer: c, ...g } = r, l = { ...g };
+    return o && (l.renderer = $e(o)), s && (l.editor = Ue(s)), i && (l.headerRenderer = _e(i)), c && (l.headerLabelRenderer = We(c)), l;
   }), t = {
     ...n,
     columns: e
   };
-  return t[U] = !0, t;
+  return t[W] = !0, t;
 }
-const Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new Map();
-function We(n) {
+const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
+function Je(n) {
   const e = n.querySelector("tbw-grid-detail");
   if (e) {
-    const r = Q.get(e);
+    const r = Z.get(e);
     if (r) return r;
   }
   const t = n.id || n.getAttribute("data-grid-id");
   if (t)
-    return X.get(t);
+    return Q.get(t);
 }
-function Ue(n) {
-  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = k(null), c = E(
-    (s) => {
-      if (o.current = s, !s) return;
-      Q.set(s, e);
-      const g = s.closest("tbw-grid");
+function Ye(n) {
+  const { children: e, showExpandColumn: t = !0, animation: r = "slide" } = n, o = k(null), s = S(
+    (c) => {
+      if (o.current = c, !c) return;
+      Z.set(c, e);
+      const g = c.closest("tbw-grid");
       if (g) {
-        const d = g.id || g.getAttribute("data-grid-id");
-        d && X.set(d, e);
+        const l = g.id || g.getAttribute("data-grid-id");
+        l && Q.set(l, e);
       }
     },
     [e]
   );
   return P(() => () => {
-    const s = o.current;
-    if (s) {
-      Q.delete(s);
-      const g = s.closest("tbw-grid");
+    const c = o.current;
+    if (c) {
+      Z.delete(c);
+      const g = c.closest("tbw-grid");
       if (g) {
-        const p = g.id || g.getAttribute("data-grid-id");
-        p && X.delete(p);
+        const C = g.id || g.getAttribute("data-grid-id");
+        C && Q.delete(C);
       }
-      const d = s.parentNode;
-      d && d.contains(s);
+      const l = c.parentNode;
+      l && l.contains(c);
     }
-  }, []), /* @__PURE__ */ b(
+  }, []), /* @__PURE__ */ E(
     "tbw-grid-detail",
     {
-      ref: c,
+      ref: s,
       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);
+Ye.displayName = "GridDetailPanel";
+const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+function Ze(n) {
+  const e = X.get(n);
   if (e) return e;
   const t = n.id;
   if (t)
-    return te.get(t);
+    return ee.get(t);
 }
-function ht(n) {
-  const { id: e, title: t, icon: r, tooltip: o, order: c = 100, children: a } = n, s = k(null), g = E(
-    (d) => {
-      s.current = d, d && (ee.set(d, a), e && te.set(e, a));
+function Ct(n) {
+  const { id: e, title: t, icon: r, tooltip: o, order: s = 100, children: i } = n, c = k(null), g = S(
+    (l) => {
+      c.current = l, l && (X.set(l, i), e && ee.set(e, i));
     },
-    [a, e]
+    [i, e]
   );
   return P(() => () => {
-    const d = s.current;
-    d && (ee.delete(d), e && te.delete(e));
-  }, [e]), /* @__PURE__ */ b(
+    const l = c.current;
+    l && (X.delete(l), e && ee.delete(e));
+  }, [e]), /* @__PURE__ */ E(
     "tbw-grid-tool-panel",
     {
       ref: g,
@@ -297,48 +344,80 @@ function ht(n) {
       title: t,
       icon: r,
       tooltip: o,
-      order: c?.toString()
+      order: s?.toString()
     }
   );
 }
-const G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
-function Ye(n, e) {
+const G = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new Map();
+function Qe(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);
+    const o = K.get(t) ?? {};
+    o.renderer = e, K.set(t, o);
   }
 }
-function Ze(n, e) {
+function Xe(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);
+    const o = K.get(t) ?? {};
+    o.editor = e, K.set(t, o);
   }
 }
-function Qe(n) {
+function et(n) {
   let e = G.get(n)?.renderer;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = A.get(t)?.renderer);
+    t && (e = K.get(t)?.renderer);
   }
   return e;
 }
-function Xe(n) {
+function tt(n) {
   let e = G.get(n)?.editor;
   if (!e) {
     const t = n.getAttribute("field");
-    t && (e = A.get(t)?.editor);
+    t && (e = K.get(t)?.editor);
   }
   return e;
 }
-class et {
+class rt {
   /** 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();
+  /**
+   * Reverse index: container element → portal key. Maintained alongside
+   * `keyToContainer` so `releaseCell` can resolve only the containers
+   * actually inside the released cell (via `cellEl.querySelectorAll`)
+   * instead of scanning every tracked portal — important for grids with
+   * many cells, where `releaseCell` runs on every cell teardown.
+   */
+  containerToKey = /* @__PURE__ */ new WeakMap();
+  /**
+   * Per-editor `before-edit-close` listener teardown functions, keyed by portal key.
+   *
+   * The grid's editing plugin emits `before-edit-close` on the host `<tbw-grid>`
+   * before tearing down a row's managed editors. React editors commonly write
+   * `onBlur={commit}` to flush local state on click-away, but Tab / programmatic
+   * row exit rebuilds the cell DOM synchronously without giving the focused
+   * input a chance to fire `blur` first.
+   *
+   * To bridge that gap we call `.blur()` on the focused input inside the editor
+   * container as soon as `before-edit-close` fires. The native `.blur()` method
+   * is what React's event system actually observes — React 17+ delegates focus
+   * events at the root by listening to `focusout` (bubbling) and mapping it to
+   * `onBlur`. A bare `dispatchEvent(new FocusEvent('blur'))` would be ignored
+   * by React because `blur` does not bubble. Calling the native `.blur()`
+   * dispatches the full focus-loss chain (`blur` + `focusout`) and also moves
+   * focus off the input — both desirable here since the editor DOM is about to
+   * be torn down anyway.
+   *
+   * Mirrors the Angular adapter's `BaseGridEditor.onBeforeEditClose()` hook.
+   * Requires zero per-editor code: any editor with `onBlur={commit}` is
+   * automatically covered for Tab commits and programmatic row exit.
+   */
+  editorBeforeCloseUnsubs = /* @__PURE__ */ new Map();
   typeDefaults = null;
   /**
    * Sets the type defaults map for this adapter.
@@ -355,7 +434,7 @@ class et {
    * Converts React renderer/editor functions to DOM-returning functions.
    */
   processConfig(e) {
-    return Re(e) ?? e;
+    return we(e) ?? e;
   }
   /**
    * Determines if this adapter can handle the given element.
@@ -365,11 +444,11 @@ class et {
     const t = e.getAttribute("field");
     let r = G.get(e);
     if (!r && t) {
-      const a = A.get(t);
-      a && (a.renderer || a.editor) && (r = a, G.set(e, r));
+      const i = K.get(t);
+      i && (i.renderer || i.editor) && (r = i, G.set(e, r));
     }
-    const o = r?.renderer !== void 0, c = r?.editor !== void 0;
-    return r !== void 0 && (o || c);
+    const o = r?.renderer !== void 0, s = r?.editor !== void 0;
+    return r !== void 0 && (o || s);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -383,35 +462,38 @@ class et {
    * allowing the grid to use its default rendering.
    */
   createRenderer(e) {
-    const t = Qe(e);
+    const t = et(e);
     if (!t)
       return;
     const r = e.closest("tbw-grid"), o = /* @__PURE__ */ new WeakMap();
-    return (c) => {
-      const a = c.cellEl;
-      if (a) {
-        const d = o.get(a);
-        if (d)
-          return w(d.container, t(c), d.portalKey), d.container;
-        const p = document.createElement("div");
-        p.className = "react-cell-renderer", p.style.display = "contents";
-        const C = w(
-          p,
-          t(c),
+    return (s) => {
+      const i = s.cellEl;
+      if (i) {
+        const l = o.get(i);
+        if (l) {
+          if (i.contains(l.container))
+            return b(l.container, t(s), l.portalKey), l.container;
+          A(l.portalKey, { sync: !0 }), this.untrackPortal(l.portalKey), o.delete(i);
+        }
+        const C = document.createElement("div");
+        C.className = "react-cell-renderer", C.style.display = "contents";
+        const R = b(
+          C,
+          t(s),
           void 0,
           r ?? void 0
         );
-        return o.set(a, { portalKey: C, container: p }), this.trackPortal(C, p, !1), p;
+        return o.set(i, { portalKey: R, container: C }), this.trackPortal(R, C, !1), C;
       }
-      const s = document.createElement("div");
-      s.className = "react-cell-renderer", s.style.display = "contents";
-      const g = w(
-        s,
-        t(c),
+      const c = document.createElement("div");
+      c.className = "react-cell-renderer", c.style.display = "contents";
+      const g = b(
+        c,
+        t(s),
         void 0,
         r ?? void 0
       );
-      return this.trackPortal(g, s, !1), s;
+      return this.trackPortal(g, c, !1), c;
     };
   }
   /**
@@ -419,20 +501,29 @@ class et {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(e) {
-    const t = Xe(e);
+    const t = tt(e);
     if (!t)
       return () => document.createElement("div");
     const r = e.closest("tbw-grid") ?? void 0;
     return (o) => {
-      const c = document.createElement("div");
-      c.className = "react-cell-editor", c.style.display = "contents";
-      const a = w(
-        c,
+      const s = document.createElement("div");
+      s.className = "react-cell-editor", s.style.display = "contents";
+      const i = b(
+        s,
         t(o),
         void 0,
         r
       );
-      return this.trackPortal(a, c, !0), c;
+      if (this.trackPortal(i, s, !0), r) {
+        const c = () => {
+          const l = s.ownerDocument.activeElement;
+          l && s.contains(l) && (l instanceof HTMLInputElement || l instanceof HTMLTextAreaElement || l instanceof HTMLSelectElement) && l.blur();
+        };
+        r.addEventListener("before-edit-close", c), this.editorBeforeCloseUnsubs.set(i, () => {
+          r.removeEventListener("before-edit-close", c);
+        });
+      }
+      return s;
     };
   }
   /**
@@ -440,18 +531,18 @@ class et {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(e) {
-    const t = We(e);
+    const t = Je(e);
     if (t)
       return (r, o) => {
-        const c = document.createElement("div");
-        c.className = "react-detail-panel";
-        const s = w(
-          c,
+        const s = document.createElement("div");
+        s.className = "react-detail-panel";
+        const c = b(
+          s,
           t({ row: r, rowIndex: o }),
           void 0,
           e
         );
-        return this.trackPortal(s, c, !1), c;
+        return this.trackPortal(c, s, !1), s;
       };
   }
   /**
@@ -468,18 +559,18 @@ class et {
    * Renders React components for card layout in responsive mode.
    */
   createResponsiveCardRenderer(e) {
-    const t = Ce(e);
+    const t = Re(e);
     if (t)
       return (r, o) => {
-        const c = document.createElement("div");
-        c.className = "react-responsive-card";
-        const s = w(
-          c,
+        const s = document.createElement("div");
+        s.className = "react-responsive-card";
+        const c = b(
+          s,
           t({ row: r, index: o }),
           void 0,
           e
         );
-        return this.trackPortal(s, c, !1), c;
+        return this.trackPortal(c, s, !1), s;
       };
   }
   /**
@@ -500,16 +591,16 @@ class et {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(e) {
-    const t = Je(e);
+    const t = Ze(e);
     if (!t)
       return;
     const r = e.closest("tbw-grid");
     return (o) => {
-      const a = w(o, t({
+      const i = b(o, t({
         grid: r ?? o
       }), void 0, r ?? void 0);
-      return this.trackPortal(a, o, !1), () => {
-        H(a, { sync: !0 }), this.untrackPortal(a);
+      return this.trackPortal(i, o, !1), () => {
+        A(i, { sync: !0 }), this.untrackPortal(i);
       };
     };
   }
@@ -556,8 +647,8 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const c = r.cellEl?.closest("tbw-grid") ?? t, a = w(o, e(r), void 0, c);
-      return this.trackPortal(a, o, !1), o;
+      const s = r.cellEl?.closest("tbw-grid") ?? t, i = b(o, e(r), void 0, s);
+      return this.trackPortal(i, o, !1), o;
     };
   }
   /**
@@ -568,8 +659,8 @@ class et {
     return (r) => {
       const o = document.createElement("span");
       o.style.display = "contents";
-      const c = w(o, e(r), void 0, t);
-      return this.trackPortal(c, o, !0), o;
+      const s = b(o, e(r), void 0, t);
+      return this.trackPortal(s, o, !0), o;
     };
   }
   /**
@@ -578,20 +669,24 @@ class et {
    */
   createFilterPanelRenderer(e, t) {
     return (r, o) => {
-      const c = document.createElement("div");
-      c.style.display = "contents";
-      const a = r.closest("tbw-grid") ?? t, s = w(c, e(o), void 0, a);
-      this.trackPortal(s, c, !1), r.appendChild(c);
+      const s = document.createElement("div");
+      s.style.display = "contents";
+      const i = r.closest("tbw-grid") ?? t, c = b(s, e(o), void 0, i);
+      this.trackPortal(c, s, !1), r.appendChild(s);
     };
   }
   // #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);
+    this.allPortalKeys.add(e), this.keyToContainer.set(e, t), this.containerToKey.set(t, e), 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);
+    this.allPortalKeys.delete(e), this.editorPortalKeys.delete(e);
+    const t = this.keyToContainer.get(e);
+    this.keyToContainer.delete(e), t && this.containerToKey.delete(t);
+    const r = this.editorBeforeCloseUnsubs.get(e);
+    r && (r(), this.editorBeforeCloseUnsubs.delete(e));
   }
   // #endregion
   /**
@@ -600,19 +695,38 @@ class et {
    */
   destroy() {
     for (const e of this.allPortalKeys)
-      H(e);
-    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear(), A.clear();
+      A(e);
+    this.allPortalKeys.clear(), this.editorPortalKeys.clear(), this.keyToContainer.clear();
+    for (const e of this.editorBeforeCloseUnsubs.values()) e();
+    this.editorBeforeCloseUnsubs.clear(), K.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.
+   *
+   * Destroys editor portals AND renderer portals whose container is inside
+   * the cell. Releasing renderers here is critical: the editing pipeline
+   * runs `cell.innerHTML = ''` immediately after this returns, which
+   * silently detaches React-managed renderer containers from the DOM.
+   * If we leave the React root mounted, its fiber tree still believes
+   * the now-orphaned children are present — a subsequent React commit
+   * (e.g. the user's `onCellCommit` → `setRows`) tries to `removeChild`
+   * those gone nodes and throws `NotFoundError` (issue #250).
+   *
+   * Calling this BEFORE the wipe lets React unmount cleanly while DOM
+   * still matches its fiber tree. The `wrapReactRenderer` cache will
+   * detect the missing entry on the next render and create a fresh
+   * container — see the cache-validation defense in `createRenderer`
+   * and `wrapReactRenderer` (`react-column-config.ts`).
+   *
+   * Also cleans up config-based editor and renderer roots
+   * (from processGridConfig/wrapReactEditor/wrapReactRenderer) that
+   * bypass the adapter's own portal tracking.
    */
   releaseCell(e) {
-    for (const t of this.editorPortalKeys) {
-      const r = this.keyToContainer.get(t);
-      r && e.contains(r) && (H(t), this.untrackPortal(t));
+    const t = e.querySelectorAll(".react-cell-renderer, .react-cell-editor");
+    for (const r of t) {
+      const o = this.containerToKey.get(r);
+      o && (A(o, { sync: !0 }), this.untrackPortal(o));
     }
     ze(e);
   }
@@ -620,21 +734,18 @@ class et {
    * 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;
-      }
+    const t = this.containerToKey.get(e);
+    t && (A(t), this.untrackPortal(t));
   }
 }
-const tt = {
+const nt = {
   undoRedo: ["editing"],
   clipboard: ["selection"]
 };
-function rt(n) {
+function ot(n) {
   const e = new Set(n);
   for (const t of n) {
-    const r = tt[t];
+    const r = nt[t];
     if (r)
       for (const o of r)
         e.has(o) || console.warn(
@@ -642,34 +753,34 @@ function rt(n) {
         );
   }
 }
-function nt(n) {
+function it(n) {
   const e = [];
   for (const [t, r] of Object.entries(n))
     r === void 0 || r === !1 || e.push(t);
-  return rt(e), Ae(n);
+  return ot(e), xe(n);
 }
-let me = !1, J = null;
-function re() {
-  return me || (J = new et(), be.registerAdapter(J), me = !0), J;
+let me = !1, V = null;
+function te() {
+  return me || (V = new rt(), Ee.registerAdapter(V), me = !0), V;
 }
-re();
-function ot(n) {
+te();
+function st(n) {
   const t = n.getPluginByName?.("masterDetail");
   t && typeof t.refreshDetailRenderer == "function" && t.refreshDetailRenderer();
 }
-function it(n, e) {
+function ct(n, e) {
   const t = n;
-  if (!n.querySelector("tbw-grid-responsive-card") || !Ce(n)) return;
-  const c = t.getPluginByName?.("responsive");
-  if (c && typeof c.setCardRenderer == "function") {
-    const a = e.createResponsiveCardRenderer(n);
-    a && c.setCardRenderer(a);
+  if (!n.querySelector("tbw-grid-responsive-card") || !Re(n)) return;
+  const s = t.getPluginByName?.("responsive");
+  if (s && typeof s.setCardRenderer == "function") {
+    const i = e.createResponsiveCardRenderer(n);
+    i && s.setCardRenderer(i);
   }
 }
-function st(n) {
+function at(n) {
   const e = {};
-  return Se.forEach(n, (t) => {
-    if (De(t)) {
+  return Te.forEach(n, (t) => {
+    if (Ge(t)) {
       if (t.type && t.type.displayName === "GridDetailPanel") {
         const r = t.props;
         e.masterDetail = {
@@ -683,22 +794,22 @@ function st(n) {
     }
   }), e;
 }
-const vt = he(function(e, t) {
+const Rt = he(function(e, t) {
   const {
     // Core props
     rows: r,
     gridConfig: o,
-    columns: c,
-    columnDefaults: a,
-    fitMode: s,
+    columns: s,
+    columnDefaults: i,
+    fitMode: c,
     sortable: g,
-    filterable: d,
-    selectable: p,
-    loading: C,
-    customStyles: R,
-    className: K,
-    style: x,
-    children: T,
+    filterable: l,
+    selectable: C,
+    loading: R,
+    customStyles: m,
+    className: w,
+    style: D,
+    children: x,
     // Plugin props
     plugins: u,
     // SSR mode
@@ -706,8 +817,8 @@ const vt = he(function(e, t) {
     // Legacy event handlers
     onRowsChange: v,
     // Feature props and event props are in ...rest
-    ...m
-  } = e, f = k(null), j = k(null), ie = O(Oe), q = O(Le), se = [
+    ...p
+  } = e, f = k(null), q = k(null), oe = L(qe), j = L(Ie), ie = [
     "selection",
     "editing",
     "filtering",
@@ -716,6 +827,7 @@ const vt = he(function(e, t) {
     "contextMenu",
     "reorderColumns",
     "reorderRows",
+    "rowDragDrop",
     "visibility",
     "undoRedo",
     "tree",
@@ -731,102 +843,102 @@ const vt = he(function(e, t) {
     "pivot",
     "serverSide",
     "tooltip"
-  ], we = S(() => se.map((i) => {
-    const l = m[i];
-    return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
-  }).filter(Boolean).join("|"), [m]), ce = S(() => {
-    const i = {};
-    for (const l of se)
-      l in m && m[l] !== void 0 && (i[l] = m[l]);
-    return i;
-  }, [we]), ae = S(() => st(T), [T]), le = S(() => ({ ...ae, ...ce }), [ce, ae]), _ = S(() => u || h ? [] : nt(le), [le, u, h]), N = S(() => {
+  ], be = T(() => ie.map((a) => {
+    const d = p[a];
+    return d !== void 0 ? `${a}:${JSON.stringify(d)}` : "";
+  }).filter(Boolean).join("|"), [p]), se = T(() => {
+    const a = {};
+    for (const d of ie)
+      d in p && p[d] !== void 0 && (a[d] = p[d]);
+    return a;
+  }, [be]), ce = T(() => at(x), [x]), ae = T(() => ({ ...ce, ...se }), [se, ce]), z = T(() => u || h ? [] : it(ae), [ae, u, h]), F = T(() => {
     if (u) {
-      const i = new Set(u.map((y) => y.name)), l = _.filter((y) => !i.has(y.name));
-      return [...u, ...l];
+      const a = new Set(u.map((y) => y.name)), d = z.filter((y) => !a.has(y.name));
+      return [...u, ...d];
     }
-    return _;
-  }, [u, _]), F = S(() => {
-    if (!c) return c;
-    const i = Fe(c);
-    return a ? i.map((l) => ({
-      ...a,
-      ...l
+    return z;
+  }, [u, z]), N = T(() => {
+    if (!s) return s;
+    const a = Fe(s);
+    return i ? a.map((d) => ({
+      ...i,
+      ...d
       // Individual column props override defaults
-    })) : i;
-  }, [c, a]), I = S(() => {
-    const i = Re(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 };
+    })) : a;
+  }, [s, i]), I = T(() => {
+    const a = we(o), d = {};
+    if (g !== void 0 && (d.sortable = g), l !== void 0 && (d.filterable = l), C !== void 0 && (d.selectable = C), j) {
+      const y = a?.icons || o?.icons || {};
+      d.icons = { ...j, ...y };
     }
-    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 (F.length > 0 && a) {
+      const y = a.plugins || [], H = new Set(y.map((B) => B.name)), U = F.filter((B) => !H.has(B.name));
       return {
-        ...i,
-        ...l,
-        plugins: [...y, ...B]
+        ...a,
+        ...d,
+        plugins: [...y, ...U]
       };
     }
-    return N.length > 0 && !i ? { ...l, plugins: N } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
-  }, [o, N, g, d, p, q]);
+    return F.length > 0 && !a ? { ...d, plugins: F } : Object.keys(d).length > 0 ? { ...a, ...d } : a;
+  }, [o, F, g, l, C, j]);
   P(() => {
-    re().setTypeDefaults(ie);
-  }, [ie]), P(() => {
+    te().setTypeDefaults(oe);
+  }, [oe]), 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 && C !== void 0 && (f.current.loading = C);
-  }, [C]), P(() => {
-    const i = f.current;
-    if (!i) return;
-    const l = re();
-    i.__frameworkAdapter = l, ot(i), it(i, l);
+    f.current && N && (f.current.columns = N);
+  }, [N]), P(() => {
+    f.current && c !== void 0 && (f.current.fitMode = c);
+  }, [c]), P(() => {
+    f.current && R !== void 0 && (f.current.loading = R);
+  }, [R]), P(() => {
+    const a = f.current;
+    if (!a) return;
+    const d = te();
+    a.__frameworkAdapter = d, st(a), ct(a, d);
     let y = !1;
-    const L = requestAnimationFrame(() => {
-      y || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+    const H = requestAnimationFrame(() => {
+      y || (typeof a.refreshColumns == "function" && a.refreshColumns(), typeof a.refreshShellHeader == "function" && a.refreshShellHeader());
     });
     return () => {
-      y = !0, cancelAnimationFrame(L);
+      y = !0, cancelAnimationFrame(H);
     };
   }, []), P(() => {
-    if (!f.current || !R) return;
-    const i = f.current, l = "react-custom-styles";
+    if (!f.current || !m) return;
+    const a = f.current, d = "react-custom-styles";
     let y = !0;
-    return i.ready?.().then(() => {
-      y && R && (i.registerStyles?.(l, R), j.current = l);
+    return a.ready?.().then(() => {
+      y && m && (a.registerStyles?.(d, m), q.current = d);
     }), () => {
-      y = !1, j.current && (i.unregisterStyles?.(j.current), j.current = null);
+      y = !1, q.current && (a.unregisterStyles?.(q.current), q.current = null);
     };
-  }, [R]), P(() => {
-    const i = f.current;
-    if (!i) return;
-    const l = [];
-    return v && l.push(i.on("rows-change", (y) => v(y.rows))), () => {
-      l.forEach((y) => y());
+  }, [m]), P(() => {
+    const a = f.current;
+    if (!a) return;
+    const d = [];
+    return v && d.push(a.on("rows-change", (y) => v(y.rows))), () => {
+      d.forEach((y) => y());
     };
   }, [v]);
-  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];
+  const le = T(() => Object.keys(_).filter((a) => typeof p[a] == "function").sort().join("|"), [p]), de = k({});
+  for (const a of Object.keys(_))
+    de.current[a] = p[a];
   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);
+    const a = f.current;
+    if (!a) return;
+    const d = [];
+    for (const [y, H] of Object.entries(_))
+      le.includes(y) && d.push(
+        a.on(H, (U, B) => {
+          de.current[y]?.(U, B);
         })
       );
     return () => {
-      l.forEach((y) => y());
+      d.forEach((y) => y());
     };
-  }, [de]), ve(
+  }, [le]), ve(
     t,
     () => ({
       get element() {
@@ -841,26 +953,26 @@ const vt = he(function(e, t) {
       async forceLayout() {
         return f.current?.forceLayout?.();
       },
-      async toggleGroup(i) {
-        return f.current?.toggleGroup?.(i);
+      async toggleGroup(a) {
+        return f.current?.toggleGroup?.(a);
       },
-      registerStyles(i, l) {
-        f.current?.registerStyles?.(i, l);
+      registerStyles(a, d) {
+        f.current?.registerStyles?.(a, d);
       },
-      unregisterStyles(i) {
-        f.current?.unregisterStyles?.(i);
+      unregisterStyles(a) {
+        f.current?.unregisterStyles?.(a);
       },
-      setRowLoading(i, l) {
-        f.current?.setRowLoading?.(i, l);
+      setRowLoading(a, d) {
+        f.current?.setRowLoading?.(a, d);
       },
-      setCellLoading(i, l, y) {
-        f.current?.setCellLoading?.(i, l, y);
+      setCellLoading(a, d, y) {
+        f.current?.setCellLoading?.(a, d, y);
       },
-      isRowLoading(i) {
-        return f.current?.isRowLoading?.(i) ?? !1;
+      isRowLoading(a) {
+        return f.current?.isRowLoading?.(a) ?? !1;
       },
-      isCellLoading(i, l) {
-        return f.current?.isCellLoading?.(i, l) ?? !1;
+      isCellLoading(a, d) {
+        return f.current?.isCellLoading?.(a, d) ?? !1;
       },
       clearAllLoading() {
         f.current?.clearAllLoading?.();
@@ -869,66 +981,66 @@ const vt = he(function(e, t) {
     []
   );
   const $ = k(null);
-  return ke(() => {
-    const i = f.current;
-    return i && $.current && ge(i, $.current), () => {
-      i && ge(i, null);
+  return De(() => {
+    const a = f.current;
+    return a && $.current && fe(a, $.current), () => {
+      a && fe(a, null);
     };
-  }, []), /* @__PURE__ */ Pe(ne, { children: [
-    /* @__PURE__ */ b(je, { ref: $ }),
-    /* @__PURE__ */ b(
+  }, []), /* @__PURE__ */ Pe(re, { children: [
+    /* @__PURE__ */ E(je, { ref: $ }),
+    /* @__PURE__ */ E(
       "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: (a) => {
+          if (f.current = a, a) {
+            const d = a;
+            I && (d.gridConfig = I), r && (d.rows = r), N && (d.columns = N);
           }
         },
-        class: K,
-        style: x,
-        children: /* @__PURE__ */ b(Te.Provider, { value: f, children: T })
+        class: w,
+        style: D,
+        children: /* @__PURE__ */ E(Ce.Provider, { value: f, children: x })
       }
     )
   ] });
 });
-function Ct(n) {
+function wt(n) {
   const {
     field: e,
     header: t,
     type: r,
     editable: o,
-    sortable: c,
-    resizable: a,
-    width: s,
+    sortable: s,
+    resizable: i,
+    width: c,
     minWidth: g,
-    hidden: d,
-    lockVisible: p,
-    children: C,
-    editor: R,
-    options: K,
-    multi: x,
-    format: T
-  } = n, u = k(null), h = E(
+    hidden: l,
+    lockVisible: C,
+    children: R,
+    editor: m,
+    options: w,
+    multi: D,
+    format: x
+  } = n, u = k(null), h = S(
     (f) => {
-      u.current = f, f && (C && Ye(f, C), R && Ze(f, R));
+      u.current = f, f && (R && Qe(f, R), m && Xe(f, m));
     },
-    [C, R, e]
-  ), v = typeof s == "number" ? `${s}px` : s, m = {
+    [R, m, e]
+  ), v = typeof c == "number" ? `${c}px` : c, p = {
     field: e,
     ref: h
   };
-  return t !== void 0 && (m.header = t), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), c !== void 0 && (m.sortable = c), a !== void 0 && (m.resizable = a), v !== void 0 && (m.width = v), 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 t !== void 0 && (p.header = t), r !== void 0 && (p.type = r), o !== void 0 && (p.editable = o), s !== void 0 && (p.sortable = s), i !== void 0 && (p.resizable = i), v !== void 0 && (p.width = v), g !== void 0 && (p["min-width"] = g), l !== void 0 && (p.hidden = l), C !== void 0 && (p["lock-visible"] = C), D !== void 0 && (p.multi = D), x && (p["data-has-format"] = "true"), w && (p["data-has-options"] = "true"), /* @__PURE__ */ E("tbw-grid-column", { ...p });
 }
-function Rt({ children: n }) {
-  return /* @__PURE__ */ b("tbw-grid-tool-buttons", { children: n });
+function bt({ children: n }) {
+  return /* @__PURE__ */ E("tbw-grid-tool-buttons", { children: n });
 }
-const wt = ({ icons: n, defaults: e, children: t }) => {
+const Pt = ({ 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 });
+  return e && (r = /* @__PURE__ */ E(Be, { defaults: e, children: r })), n && (r = /* @__PURE__ */ E(Ne, { icons: n, children: r })), /* @__PURE__ */ E(re, { children: r });
 };
-function Pt(n) {
-  const e = k(null), [t, r] = fe(!1), [o, c] = fe(null), a = k(null), s = E(() => n ? (a.current ??= document.querySelector(n), a.current) : e.current?.element ?? null, [n]);
+function Et(n) {
+  const e = k(null), [t, r] = ue(!1), [o, s] = ue(null), i = k(null), c = S(() => n ? (i.current ??= document.querySelector(n), i.current) : e.current?.element ?? null, [n]);
   P(() => {
     let u = !0;
     return (async () => {
@@ -936,18 +1048,18 @@ function Pt(n) {
         if (n) {
           const v = document.querySelector(n);
           if (!v) return;
-          if (a.current = v, await v.ready?.(), u) {
+          if (i.current = v, await v.ready?.(), u) {
             r(!0);
-            const m = await v.getConfig?.();
-            u && m && c(m);
+            const p = await v.getConfig?.();
+            u && p && s(p);
           }
         } else {
           const v = e.current;
           if (!v) return;
           if (await v.ready?.(), u) {
             r(!0);
-            const m = await v.getConfig?.();
-            u && m && c(m);
+            const p = await v.getConfig?.();
+            u && p && s(p);
           }
         }
       } catch {
@@ -956,23 +1068,23 @@ function Pt(n) {
       u = !1;
     };
   }, [n]);
-  const g = E(async () => {
-    const u = s();
+  const g = S(async () => {
+    const u = c();
     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();
+  }, [c]), l = S(async () => {
+    const u = c();
     if (u) {
       await u.forceLayout?.();
       return;
     }
     const h = e.current;
     h && await h.forceLayout?.();
-  }, [s]), p = E(
+  }, [c]), C = S(
     async (u) => {
-      const h = s();
+      const h = c();
       if (h) {
         await h.toggleGroup?.(u);
         return;
@@ -980,62 +1092,76 @@ function Pt(n) {
       const v = e.current;
       v && await v.toggleGroup?.(u);
     },
-    [s]
-  ), C = E(
-    (u) => s()?.getPlugin?.(u),
-    [s]
-  ), R = E(
-    ((u) => s()?.getPluginByName?.(u)),
-    [s]
-  ), K = E(
+    [c]
+  ), R = S(
+    (u) => c()?.getPlugin?.(u),
+    [c]
+  ), m = S(
+    ((u) => c()?.getPluginByName?.(u)),
+    [c]
+  ), w = S(
     (u, h) => {
-      const v = s();
+      const v = c();
       if (v) {
         v.registerStyles?.(u, h);
         return;
       }
       e.current?.registerStyles?.(u, h);
     },
-    [s]
-  ), x = E(
+    [c]
+  ), D = S(
     (u) => {
-      const h = s();
+      const h = c();
       if (h) {
         h.unregisterStyles?.(u);
         return;
       }
       e.current?.unregisterStyles?.(u);
     },
-    [s]
-  ), T = E(() => o?.columns ? o.columns.filter((u) => !u.hidden) : [], [o]);
+    [c]
+  ), x = S(() => o?.columns ? o.columns.filter((u) => !u.hidden) : [], [o]);
   return {
     ref: e,
-    element: s(),
+    element: c(),
     isReady: t,
     config: o,
     getConfig: g,
-    forceLayout: d,
-    toggleGroup: p,
-    getPlugin: C,
-    getPluginByName: R,
-    registerStyles: K,
-    unregisterStyles: x,
-    getVisibleColumns: T
+    forceLayout: l,
+    toggleGroup: C,
+    getPlugin: R,
+    getPluginByName: m,
+    registerStyles: w,
+    unregisterStyles: D,
+    getVisibleColumns: x
   };
 }
+function St(n, e = {}) {
+  const { open: t = !0, gridElement: r } = e, o = L(Ce);
+  P(() => {
+    if (!t) return;
+    const s = n.current;
+    if (!s) return;
+    const i = r ?? s.closest("tbw-grid") ?? o?.current ?? null;
+    if (i)
+      return i.registerExternalFocusContainer?.(s), () => {
+        i.unregisterExternalFocusContainer?.(s);
+      };
+  }, [t, r, o, n]);
+}
 export {
-  vt as DataGrid,
-  et as GridAdapter,
-  Ct as GridColumn,
-  Ue as GridDetailPanel,
-  Ie as GridIconProvider,
-  wt as GridProvider,
-  Me as GridResponsiveCard,
-  Rt as GridToolButtons,
-  ht as GridToolPanel,
-  He as GridTypeProvider,
-  Pt as useGrid,
-  pt as useGridIcons,
-  mt as useGridTypeDefaults,
-  yt as useTypeDefault
+  Rt as DataGrid,
+  rt as GridAdapter,
+  wt as GridColumn,
+  Ye as GridDetailPanel,
+  Ne as GridIconProvider,
+  Pt as GridProvider,
+  He as GridResponsiveCard,
+  bt as GridToolButtons,
+  Ct as GridToolPanel,
+  Be as GridTypeProvider,
+  Et as useGrid,
+  yt as useGridIcons,
+  St as useGridOverlay,
+  ht as useGridTypeDefaults,
+  vt as useTypeDefault
 };