@toolbox-web/grid-react 0.17.0 → 0.17.1

package/index.js

@@ -1,167 +1,1028 @@
-import { r as T, a as B, b as k, c as A } from "./chunks/data-grid-Cpa5kukM.js";
-import { D as H, i as U, d as $, e as K, f as M, R as O, h as Q, u as X, g as Y } from "./chunks/data-grid-Cpa5kukM.js";
-import { jsx as w, Fragment as I } from "react/jsx-runtime";
-import { useRef as R, useCallback as i, useState as P, useEffect as S } from "react";
-function J(n) {
+import { jsx as E, Fragment as Re } from "react/jsx-runtime";
+import { DataGridElement as ve } from "@toolbox-web/grid";
+import { createContext as pe, useContext as j, useRef as D, useCallback as R, useEffect as w, forwardRef as Ce, useMemo as x, useImperativeHandle as be, Children as Ee, isValidElement as Pe, useState as de } from "react";
+import { flushSync as v } from "react-dom";
+import { createRoot as b } from "react-dom/client";
+import { createPluginsFromFeatures as Se } from "@toolbox-web/grid/features/registry";
+import { G as xe } from "./chunks/grid-element-context-BU3WvNtM.js";
+function De(n) {
+  return n.charAt(0).toUpperCase() + n.slice(1);
+}
+function ue(n) {
+  return n.toLowerCase() === "id" ? "ID" : n.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").split(" ").filter(Boolean).map(De).join(" ");
+}
+const Ge = /* @__PURE__ */ new Set(["string", "number", "boolean", "date", "datetime", "currency"]);
+function Ae(n) {
+  const t = n.lastIndexOf(":");
+  if (t > 0) {
+    const e = n.slice(t + 1).toLowerCase();
+    if (Ge.has(e)) {
+      const r = n.slice(0, t);
+      return {
+        field: r,
+        header: ue(r),
+        type: e
+      };
+    }
+  }
+  return {
+    field: n,
+    header: ue(n)
+  };
+}
+function Ie(n) {
+  return n.map((t) => typeof t == "string" ? Ae(t) : t);
+}
+const W = {
+  onCellClick: "cell-click",
+  onRowClick: "row-click",
+  onCellActivate: "cell-activate",
+  onCellChange: "cell-change",
+  onCellCommit: "cell-commit",
+  onRowCommit: "row-commit",
+  onSortChange: "sort-change",
+  onFilterChange: "filter-change",
+  onColumnResize: "column-resize",
+  onColumnMove: "column-move",
+  onColumnVisibility: "column-visibility",
+  onColumnStateChange: "column-state-change",
+  onSelectionChange: "selection-change",
+  onRowMove: "row-move",
+  onGroupToggle: "group-toggle",
+  onTreeExpand: "tree-expand",
+  onDetailExpand: "detail-expand",
+  onResponsiveChange: "responsive-change",
+  onCopy: "copy",
+  onPaste: "paste",
+  onUndoRedo: "undo-redo",
+  onExportComplete: "export-complete",
+  onPrintStart: "print-start",
+  onPrintComplete: "print-complete"
+}, re = pe(null), Ve = ({ icons: n, children: t }) => /* @__PURE__ */ E(re.Provider, { value: n, children: t });
+function at() {
+  return j(re);
+}
+const Ne = re, K = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new Map();
+function me(n) {
+  const t = n.querySelector("tbw-grid-responsive-card");
+  if (t) {
+    const r = K.get(t);
+    if (r) return r;
+  }
+  const e = n.id || n.getAttribute("data-grid-id");
+  if (e)
+    return Y.get(e);
+}
+function Te(n) {
+  const { children: t, cardRowHeight: e = "auto" } = n, r = D(null), o = R(
+    (c) => {
+      if (r.current = c, !c) return;
+      K.set(c, t);
+      const a = c.closest("tbw-grid");
+      if (a) {
+        const u = a.id || a.getAttribute("data-grid-id");
+        u && Y.set(u, t);
+      }
+    },
+    [t]
+  );
+  w(() => () => {
+    const c = r.current;
+    if (c) {
+      K.delete(c);
+      const a = c.closest("tbw-grid");
+      if (a) {
+        const u = a.id || a.getAttribute("data-grid-id");
+        u && Y.delete(u);
+      }
+    }
+  }, []);
+  const s = e === "auto" ? "auto" : String(e);
+  return /* @__PURE__ */ E("tbw-grid-responsive-card", { ref: o, cardRowHeight: s });
+}
+Te.displayName = "GridResponsiveCard";
+const _ = pe(null), Le = ({ defaults: n, children: t }) => /* @__PURE__ */ E(_.Provider, { value: n, children: t });
+function lt() {
+  return j(_);
+}
+function dt(n) {
+  return j(_)?.[n];
+}
+const ke = _, J = /* @__PURE__ */ Symbol("reactProcessed"), I = [];
+function Fe(n) {
+  for (let t = I.length - 1; t >= 0; t--) {
+    const e = I[t];
+    if (n.contains(e.container) && e.container.classList.contains("react-cell-editor")) {
+      try {
+        e.root.unmount();
+      } catch {
+      }
+      I.splice(t, 1);
+    }
+  }
+}
+function Me(n) {
+  const t = /* @__PURE__ */ new WeakMap();
+  return (e) => {
+    const r = e.cellEl;
+    if (r) {
+      const c = t.get(r);
+      if (c)
+        return v(() => {
+          c.root.render(n(e));
+        }), c.container;
+    }
+    const o = document.createElement("div");
+    o.className = "react-cell-renderer", o.style.display = "contents";
+    const s = b(o);
+    return v(() => {
+      s.render(n(e));
+    }), r && t.set(r, { root: s, container: o }), I.push({ root: s, container: o }), o;
+  };
+}
+function He(n) {
+  return (t) => {
+    const e = document.createElement("div");
+    e.className = "react-cell-editor", e.style.display = "contents";
+    const r = b(e);
+    return v(() => {
+      r.render(n(t));
+    }), I.push({ root: r, container: e }), e;
+  };
+}
+function Oe(n) {
+  return (t) => {
+    const e = document.createElement("div");
+    e.className = "react-header-renderer", e.style.display = "contents";
+    const r = b(e);
+    return v(() => {
+      r.render(n(t));
+    }), I.push({ root: r, container: e }), e;
+  };
+}
+function Be(n) {
+  return (t) => {
+    const e = document.createElement("div");
+    e.className = "react-header-label-renderer", e.style.display = "contents";
+    const r = b(e);
+    return v(() => {
+      r.render(n(t));
+    }), I.push({ root: r, container: e }), e;
+  };
+}
+function je(n) {
+  return (t) => {
+    const e = n(t);
+    if (e instanceof HTMLElement || typeof e == "string")
+      return e;
+    const r = document.createElement("div");
+    r.className = "react-loading-renderer", r.style.display = "contents";
+    const o = b(r);
+    return v(() => {
+      o.render(e);
+    }), I.push({ root: o, container: r }), r;
+  };
+}
+function ye(n) {
+  if (!n) return;
+  if (n[J]) return n;
+  if (n.loadingRenderer && typeof n.loadingRenderer == "function") {
+    const r = n.loadingRenderer;
+    n = {
+      ...n,
+      loadingRenderer: je(r)
+    };
+  }
+  if (!n.columns) {
+    const r = n;
+    return r[J] = !0, r;
+  }
+  const t = n.columns.map((r) => {
+    const { renderer: o, editor: s, headerRenderer: c, headerLabelRenderer: a, ...u } = r, f = { ...u };
+    return o && (f.renderer = Me(o)), s && (f.editor = He(s)), c && (f.headerRenderer = Oe(c)), a && (f.headerLabelRenderer = Be(a)), f;
+  }), e = {
+    ...n,
+    columns: t
+  };
+  return e[J] = !0, e;
+}
+const Z = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new Map();
+function _e(n) {
+  const t = n.querySelector("tbw-grid-detail");
+  if (t) {
+    const r = Z.get(t);
+    if (r) return r;
+  }
+  const e = n.id || n.getAttribute("data-grid-id");
+  if (e)
+    return Q.get(e);
+}
+function qe(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, o = D(null), s = R(
+    (a) => {
+      if (o.current = a, !a) return;
+      Z.set(a, t);
+      const u = a.closest("tbw-grid");
+      if (u) {
+        const f = u.id || u.getAttribute("data-grid-id");
+        f && Q.set(f, t);
+      }
+    },
+    [t]
+  );
+  return w(() => () => {
+    const a = o.current;
+    if (a) {
+      Z.delete(a);
+      const u = a.closest("tbw-grid");
+      if (u) {
+        const C = u.id || u.getAttribute("data-grid-id");
+        C && Q.delete(C);
+      }
+      const f = a.parentNode;
+      f && f.contains(a);
+    }
+  }, []), /* @__PURE__ */ E(
+    "tbw-grid-detail",
+    {
+      ref: s,
+      showExpandColumn: e ? void 0 : "false",
+      animation: r === !1 ? "false" : r
+    }
+  );
+}
+qe.displayName = "GridDetailPanel";
+const X = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new Map();
+function ze(n) {
+  const t = X.get(n);
+  if (t) return t;
+  const e = n.id;
+  if (e)
+    return ee.get(e);
+}
+function ut(n) {
+  const { id: t, title: e, icon: r, tooltip: o, order: s = 100, children: c } = n, a = D(null), u = R(
+    (f) => {
+      a.current = f, f && (X.set(f, c), t && ee.set(t, c));
+    },
+    [c, t]
+  );
+  return w(() => () => {
+    const f = a.current;
+    f && (X.delete(f), t && ee.delete(t));
+  }, [t]), /* @__PURE__ */ E(
+    "tbw-grid-tool-panel",
+    {
+      ref: u,
+      id: t,
+      title: e,
+      icon: r,
+      tooltip: o,
+      order: s?.toString()
+    }
+  );
+}
+const V = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+function $e(n, t) {
+  const e = n.getAttribute("field"), r = V.get(n) ?? {};
+  if (r.renderer = t, V.set(n, r), e) {
+    const o = T.get(e) ?? {};
+    o.renderer = t, T.set(e, o);
+  }
+}
+function We(n, t) {
+  const e = n.getAttribute("field"), r = V.get(n) ?? {};
+  if (r.editor = t, V.set(n, r), e) {
+    const o = T.get(e) ?? {};
+    o.editor = t, T.set(e, o);
+  }
+}
+function Je(n) {
+  let t = V.get(n)?.renderer;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = T.get(e)?.renderer);
+  }
+  return t;
+}
+function Ue(n) {
+  let t = V.get(n)?.editor;
+  if (!t) {
+    const e = n.getAttribute("field");
+    e && (t = T.get(e)?.editor);
+  }
+  return t;
+}
+class he {
+  mountedViews = [];
+  /** Editor-specific views tracked separately for per-cell cleanup via releaseCell. */
+  editorViews = [];
+  typeDefaults = null;
+  /**
+   * Sets the type defaults map for this adapter.
+   * Called by DataGrid when it receives type defaults from context.
+   *
+   * @internal
+   */
+  setTypeDefaults(t) {
+    this.typeDefaults = t;
+  }
+  /**
+   * FrameworkAdapter.processConfig implementation.
+   * Called automatically by the grid's `set gridConfig` setter.
+   * Converts React renderer/editor functions to DOM-returning functions.
+   */
+  processConfig(t) {
+    return ye(t) ?? t;
+  }
+  /**
+   * Determines if this adapter can handle the given element.
+   * Checks if a renderer or editor is registered for this element.
+   */
+  canHandle(t) {
+    const e = t.getAttribute("field");
+    let r = V.get(t);
+    if (!r && e) {
+      const c = T.get(e);
+      c && (c.renderer || c.editor) && (r = c, V.set(t, r));
+    }
+    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
+   * and returns its container DOM element.
+   *
+   * Uses a cell cache to reuse React roots for performance - instead of
+   * creating new roots on each render, we reuse existing ones and just
+   * call root.render() with new data.
+   *
+   * Returns undefined if no renderer is registered for this element,
+   * allowing the grid to use its default rendering.
+   */
+  createRenderer(t) {
+    const e = Je(t);
+    if (!e)
+      return;
+    const r = /* @__PURE__ */ new WeakMap();
+    return (o) => {
+      const s = o.cellEl;
+      if (s) {
+        const u = r.get(s);
+        if (u)
+          return v(() => {
+            u.root.render(e(o));
+          }), u.container;
+        const f = document.createElement("div");
+        f.className = "react-cell-renderer", f.style.display = "contents";
+        const C = b(f);
+        return v(() => {
+          C.render(e(o));
+        }), r.set(s, { root: C, container: f, lastRowIndex: o.rowIndex ?? -1 }), this.mountedViews.push({ root: C, container: f }), f;
+      }
+      const c = document.createElement("div");
+      c.className = "react-cell-renderer", c.style.display = "contents";
+      const a = b(c);
+      return v(() => {
+        a.render(e(o));
+      }), this.mountedViews.push({ root: a, container: c }), c;
+    };
+  }
+  /**
+   * Creates an editor spec that renders a React component
+   * with commit/cancel callbacks passed as props.
+   */
+  createEditor(t) {
+    const e = Ue(t);
+    return e ? (r) => {
+      const o = document.createElement("div");
+      o.className = "react-cell-editor", o.style.display = "contents";
+      const s = b(o);
+      return v(() => {
+        s.render(e(r));
+      }), this.editorViews.push({ root: s, container: o }), o;
+    } : () => document.createElement("div");
+  }
+  /**
+   * Creates a detail renderer function for MasterDetailPlugin.
+   * Renders React components for expandable detail rows.
+   */
+  createDetailRenderer(t) {
+    const e = _e(t);
+    if (e)
+      return (r, o) => {
+        const s = document.createElement("div");
+        s.className = "react-detail-panel";
+        const c = { row: r, rowIndex: o }, a = b(s);
+        return v(() => {
+          a.render(e(c));
+        }), this.mountedViews.push({ root: a, container: s }), s;
+      };
+  }
+  /**
+   * Framework adapter hook called by MasterDetailPlugin during attach().
+   * Parses the <tbw-grid-detail> element and returns a React-based renderer.
+   */
+  parseDetailElement(t) {
+    const e = t.closest("tbw-grid");
+    if (e)
+      return this.createDetailRenderer(e);
+  }
+  /**
+   * Creates a responsive card renderer function for ResponsivePlugin.
+   * Renders React components for card layout in responsive mode.
+   */
+  createResponsiveCardRenderer(t) {
+    const e = me(t);
+    if (e)
+      return (r, o) => {
+        const s = document.createElement("div");
+        s.className = "react-responsive-card";
+        const c = { row: r, index: o }, a = b(s);
+        return v(() => {
+          a.render(e(c));
+        }), this.mountedViews.push({ root: a, container: s }), s;
+      };
+  }
+  /**
+   * Creates a tool panel renderer from a light DOM element.
+   * Renders React components into tool panel containers.
+   */
+  createToolPanelRenderer(t) {
+    const e = ze(t);
+    if (!e)
+      return;
+    const r = t.closest("tbw-grid");
+    return (o) => {
+      const s = {
+        grid: r ?? o
+      }, c = b(o);
+      return v(() => {
+        c.render(e(s));
+      }), this.mountedViews.push({ root: c, container: o }), () => {
+        const a = this.mountedViews.findIndex((u) => u.container === o);
+        if (a !== -1) {
+          const { root: u } = this.mountedViews[a];
+          try {
+            u.unmount();
+          } catch {
+          }
+          this.mountedViews.splice(a, 1);
+        }
+      };
+    };
+  }
+  /**
+   * 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(t) {
+    if (!this.typeDefaults)
+      return;
+    const e = this.typeDefaults[t];
+    if (!e)
+      return;
+    const r = {
+      editorParams: e.editorParams
+    };
+    return e.renderer && (r.renderer = this.createTypeRenderer(e.renderer)), e.editor && (r.editor = this.createTypeEditor(e.editor)), e.filterPanelRenderer && (r.filterPanelRenderer = this.createFilterPanelRenderer(e.filterPanelRenderer)), r;
+  }
+  /**
+   * Creates a renderer function from a React render function for type defaults.
+   * @internal
+   */
+  createTypeRenderer(t) {
+    return (e) => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const o = b(r);
+      return this.mountedViews.push({ root: o, container: r }), v(() => {
+        o.render(t(e));
+      }), r;
+    };
+  }
+  /**
+   * Creates an editor function from a React render function for type defaults.
+   * @internal
+   */
+  createTypeEditor(t) {
+    return (e) => {
+      const r = document.createElement("span");
+      r.style.display = "contents";
+      const o = b(r);
+      return this.editorViews.push({ root: o, container: r }), v(() => {
+        o.render(t(e));
+      }), r;
+    };
+  }
+  /**
+   * Creates a filter panel renderer that mounts React content into the filter panel container.
+   * @internal
+   */
+  createFilterPanelRenderer(t) {
+    return (e, r) => {
+      const o = document.createElement("div");
+      o.style.display = "contents";
+      const s = b(o);
+      this.mountedViews.push({ root: s, container: o }), v(() => {
+        s.render(t(r));
+      }), e.appendChild(o);
+    };
+  }
+  /**
+   * Clean up all mounted React roots.
+   * Call this when the grid is unmounted.
+   */
+  destroy() {
+    this.mountedViews.forEach(({ root: t }) => {
+      try {
+        t.unmount();
+      } catch {
+      }
+    }), this.mountedViews = [], this.editorViews.forEach(({ root: t }) => {
+      try {
+        t.unmount();
+      } catch {
+      }
+    }), this.editorViews = [];
+  }
+  /**
+   * Called when a cell's content is about to be wiped.
+   * Destroys editor React roots whose container is inside the cell.
+   * Also cleans up config-based editor roots (from processGridConfig/wrapReactEditor)
+   * that bypass the adapter's tracking arrays.
+   */
+  releaseCell(t) {
+    for (let e = this.editorViews.length - 1; e >= 0; e--) {
+      const { root: r, container: o } = this.editorViews[e];
+      if (t.contains(o)) {
+        try {
+          r.unmount();
+        } catch {
+        }
+        this.editorViews.splice(e, 1);
+      }
+    }
+    Fe(t);
+  }
+  /**
+   * Unmount a specific container (called when cell is recycled).
+   */
+  unmount(t) {
+    const e = this.mountedViews.findIndex((r) => r.container === t);
+    if (e !== -1) {
+      const { root: r } = this.mountedViews[e];
+      try {
+        r.unmount();
+      } catch {
+      }
+      this.mountedViews.splice(e, 1);
+    }
+  }
+}
+const ft = he, Ke = {
+  undoRedo: ["editing"],
+  clipboard: ["selection"]
+};
+function Ye(n) {
+  const t = new Set(n);
+  for (const e of n) {
+    const r = Ke[e];
+    if (r)
+      for (const o of r)
+        t.has(o) || console.warn(
+          `[DataGrid] Feature "${e}" requires "${o}" to be enabled. Add the "${o}" prop to your DataGrid.`
+        );
+  }
+}
+function Ze(n) {
+  const t = [];
+  for (const [e, r] of Object.entries(n))
+    r === void 0 || r === !1 || t.push(e);
+  return Ye(t), Se(n);
+}
+let fe = !1, U = null;
+function te() {
+  return fe || (U = new he(), ve.registerAdapter(U), fe = !0), U;
+}
+te();
+function Qe(n) {
+  const e = n.getPluginByName?.("masterDetail");
+  e && typeof e.refreshDetailRenderer == "function" && e.refreshDetailRenderer();
+}
+function Xe(n, t) {
+  const e = n;
+  if (!n.querySelector("tbw-grid-responsive-card") || !me(n)) return;
+  const s = e.getPluginByName?.("responsive");
+  if (s && typeof s.setCardRenderer == "function") {
+    const c = t.createResponsiveCardRenderer(n);
+    c && s.setCardRenderer(c);
+  }
+}
+function et(n) {
+  const t = {};
+  return Ee.forEach(n, (e) => {
+    if (Pe(e)) {
+      if (e.type && e.type.displayName === "GridDetailPanel") {
+        const r = e.props;
+        t.masterDetail = {
+          // Use props from the child component for configuration
+          showExpandColumn: r.showExpandColumn ?? !0,
+          animation: r.animation ?? "slide"
+          // detailRenderer will be wired up by refreshMasterDetailRenderer after mount
+        };
+      }
+      e.type && e.type.displayName === "GridResponsiveCard" && (t.responsive = !0);
+    }
+  }), t;
+}
+const gt = Ce(function(t, e) {
   const {
-    field: s,
-    header: l,
-    type: o,
-    editable: f,
+    // Core props
+    rows: r,
+    gridConfig: o,
+    columns: s,
+    columnDefaults: c,
+    fitMode: a,
     sortable: u,
-    resizable: a,
-    width: d,
-    minWidth: g,
-    hidden: v,
-    lockVisible: y,
-    children: m,
-    editor: p,
+    filterable: f,
+    selectable: C,
+    loading: P,
+    editOn: S,
+    customStyles: G,
+    className: L,
+    style: k,
+    children: N,
+    // Plugin props
+    plugins: d,
+    // SSR mode
+    ssr: p,
+    // Legacy event handlers
+    onRowsChange: m,
+    // Feature props and event props are in ...rest
+    ...h
+  } = t, g = D(null), A = D(null), ne = j(ke), q = j(Ne), oe = [
+    "selection",
+    "editing",
+    "filtering",
+    "multiSort",
+    "sorting",
+    // deprecated alias for multiSort
+    "clipboard",
+    "contextMenu",
+    "reorderColumns",
+    "reorder",
+    // deprecated alias for reorderColumns
+    "rowReorder",
+    // deprecated alias for reorderRows
+    "reorderRows",
+    "visibility",
+    "undoRedo",
+    "tree",
+    "groupingRows",
+    "groupingColumns",
+    "pinnedColumns",
+    "pinnedRows",
+    "masterDetail",
+    "responsive",
+    "columnVirtualization",
+    "export",
+    "print",
+    "pivot",
+    "serverSide"
+  ], we = x(() => oe.map((i) => {
+    const l = h[i];
+    return l !== void 0 ? `${i}:${JSON.stringify(l)}` : "";
+  }).filter(Boolean).join("|"), [h]), ie = x(() => {
+    const i = {};
+    for (const l of oe)
+      l in h && h[l] !== void 0 && (i[l] = h[l]);
+    return i;
+  }, [we]), se = x(() => et(N), [N]), ce = x(() => ({ ...se, ...ie }), [ie, se]), z = x(() => d || p ? [] : Ze(ce), [ce, d, p]), F = x(() => {
+    if (d) {
+      const i = new Set(d.map((y) => y.name)), l = z.filter((y) => !i.has(y.name));
+      return [...d, ...l];
+    }
+    return z;
+  }, [d, z]), M = x(() => {
+    if (!s) return s;
+    const i = Ie(s);
+    return c ? i.map((l) => ({
+      ...c,
+      ...l
+      // Individual column props override defaults
+    })) : i;
+  }, [s, c]), H = x(() => {
+    const i = ye(o), l = {};
+    if (u !== void 0 && (l.sortable = u), f !== void 0 && (l.filterable = f), C !== void 0 && (l.selectable = C), q) {
+      const y = i?.icons || o?.icons || {};
+      l.icons = { ...q, ...y };
+    }
+    if (F.length > 0 && i) {
+      const y = i.plugins || [], O = new Set(y.map((B) => B.name)), $ = F.filter((B) => !O.has(B.name));
+      return {
+        ...i,
+        ...l,
+        plugins: [...y, ...$]
+      };
+    }
+    return F.length > 0 && !i ? { ...l, plugins: F } : Object.keys(l).length > 0 ? { ...i, ...l } : i;
+  }, [o, F, u, f, C, q]);
+  w(() => {
+    te().setTypeDefaults(ne);
+  }, [ne]), w(() => {
+    g.current && (g.current.rows = r);
+  }, [r]), w(() => {
+    g.current && H && (g.current.gridConfig = H);
+  }, [H]), w(() => {
+    g.current && M && (g.current.columns = M);
+  }, [M]), w(() => {
+    g.current && a !== void 0 && (g.current.fitMode = a);
+  }, [a]), w(() => {
+    g.current && S !== void 0 && (g.current.editOn = S);
+  }, [S]), w(() => {
+    g.current && P !== void 0 && (g.current.loading = P);
+  }, [P]), w(() => {
+    const i = g.current;
+    if (!i) return;
+    const l = te();
+    i.__frameworkAdapter = l, Qe(i), Xe(i, l);
+    let y = !1;
+    const O = requestAnimationFrame(() => {
+      y || (typeof i.refreshColumns == "function" && i.refreshColumns(), typeof i.refreshShellHeader == "function" && i.refreshShellHeader());
+    });
+    return () => {
+      y = !0, cancelAnimationFrame(O);
+    };
+  }, []), w(() => {
+    if (!g.current || !G) return;
+    const i = g.current, l = "react-custom-styles";
+    let y = !0;
+    return i.ready?.().then(() => {
+      y && G && (i.registerStyles?.(l, G), A.current = l);
+    }), () => {
+      y = !1, A.current && (i.unregisterStyles?.(A.current), A.current = null);
+    };
+  }, [G]), w(() => {
+    const i = g.current;
+    if (!i) return;
+    const l = [];
+    return m && l.push(i.on("rows-change", (y) => m(y.rows))), () => {
+      l.forEach((y) => y());
+    };
+  }, [m]);
+  const ae = x(() => Object.keys(W).filter((i) => typeof h[i] == "function").sort().join("|"), [h]), le = D({});
+  for (const i of Object.keys(W))
+    le.current[i] = h[i];
+  return w(() => {
+    const i = g.current;
+    if (!i) return;
+    const l = [];
+    for (const [y, O] of Object.entries(W))
+      ae.includes(y) && l.push(
+        i.on(O, ($, B) => {
+          le.current[y]?.($, B);
+        })
+      );
+    return () => {
+      l.forEach((y) => y());
+    };
+  }, [ae]), be(
+    e,
+    () => ({
+      get element() {
+        return g.current;
+      },
+      async getConfig() {
+        return g.current?.getConfig?.() ?? {};
+      },
+      async ready() {
+        return g.current?.ready?.();
+      },
+      async forceLayout() {
+        return g.current?.forceLayout?.();
+      },
+      async toggleGroup(i) {
+        return g.current?.toggleGroup?.(i);
+      },
+      registerStyles(i, l) {
+        g.current?.registerStyles?.(i, l);
+      },
+      unregisterStyles(i) {
+        g.current?.unregisterStyles?.(i);
+      },
+      setRowLoading(i, l) {
+        g.current?.setRowLoading?.(i, l);
+      },
+      setCellLoading(i, l, y) {
+        g.current?.setCellLoading?.(i, l, y);
+      },
+      isRowLoading(i) {
+        return g.current?.isRowLoading?.(i) ?? !1;
+      },
+      isCellLoading(i, l) {
+        return g.current?.isCellLoading?.(i, l) ?? !1;
+      },
+      clearAllLoading() {
+        g.current?.clearAllLoading?.();
+      }
+    }),
+    []
+  ), /* @__PURE__ */ E(
+    "tbw-grid",
+    {
+      ref: (i) => {
+        if (g.current = i, i) {
+          const l = i;
+          H && (l.gridConfig = H), r && (l.rows = r), M && (l.columns = M);
+        }
+      },
+      class: L,
+      style: k,
+      children: /* @__PURE__ */ E(xe.Provider, { value: g, children: N })
+    }
+  );
+});
+function pt(n) {
+  const {
+    field: t,
+    header: e,
+    type: r,
+    editable: o,
+    sortable: s,
+    resizable: c,
+    width: a,
+    minWidth: u,
+    hidden: f,
+    lockVisible: C,
+    children: P,
+    editor: S,
     options: G,
-    multi: h,
-    format: x
-  } = n, b = R(null), e = i(
-    (c) => {
-      b.current = c, c && (m && T(c, m), p && B(c, p));
+    multi: L,
+    format: k
+  } = n, N = D(null), d = R(
+    (h) => {
+      N.current = h, h && (P && $e(h, P), S && We(h, S));
     },
-    [m, p, s]
-  ), t = typeof d == "number" ? `${d}px` : d, r = {
-    field: s,
-    ref: e
+    [P, S, t]
+  ), p = typeof a == "number" ? `${a}px` : a, m = {
+    field: t,
+    ref: d
   };
-  return l !== void 0 && (r.header = l), o !== void 0 && (r.type = o), f !== void 0 && (r.editable = f), u !== void 0 && (r.sortable = u), a !== void 0 && (r.resizable = a), t !== void 0 && (r.width = t), g !== void 0 && (r["min-width"] = g), v !== void 0 && (r.hidden = v), y !== void 0 && (r["lock-visible"] = y), h !== void 0 && (r.multi = h), x && (r["data-has-format"] = "true"), G && (r["data-has-options"] = "true"), /* @__PURE__ */ w("tbw-grid-column", { ...r });
+  return e !== void 0 && (m.header = e), r !== void 0 && (m.type = r), o !== void 0 && (m.editable = o), s !== void 0 && (m.sortable = s), c !== void 0 && (m.resizable = c), p !== void 0 && (m.width = p), u !== void 0 && (m["min-width"] = u), f !== void 0 && (m.hidden = f), C !== void 0 && (m["lock-visible"] = C), L !== void 0 && (m.multi = L), k && (m["data-has-format"] = "true"), G && (m["data-has-options"] = "true"), /* @__PURE__ */ E("tbw-grid-column", { ...m });
 }
-function V({ children: n }) {
-  return /* @__PURE__ */ w("tbw-grid-tool-buttons", { children: n });
+function mt({ children: n }) {
+  return /* @__PURE__ */ E("tbw-grid-tool-buttons", { children: n });
 }
-const j = ({ icons: n, defaults: s, children: l }) => {
-  let o = l;
-  return s && (o = /* @__PURE__ */ w(k, { defaults: s, children: o })), n && (o = /* @__PURE__ */ w(A, { icons: n, children: o })), /* @__PURE__ */ w(I, { children: o });
+const yt = ({ icons: n, defaults: t, children: e }) => {
+  let r = e;
+  return t && (r = /* @__PURE__ */ E(Le, { defaults: t, children: r })), n && (r = /* @__PURE__ */ E(Ve, { icons: n, children: r })), /* @__PURE__ */ E(Re, { children: r });
 };
-function z() {
-  const n = R(null), [s, l] = P(!1), [o, f] = P(null);
-  S(() => {
-    const e = n.current;
-    if (!e) return;
-    let t = !0;
+function ht() {
+  const n = D(null), [t, e] = de(!1), [r, o] = de(null);
+  w(() => {
+    const d = n.current;
+    if (!d) return;
+    let p = !0;
     return (async () => {
       try {
-        if (await e.ready?.(), t) {
-          l(!0);
-          const c = await e.getConfig?.();
-          t && c && f(c);
+        if (await d.ready?.(), p) {
+          e(!0);
+          const h = await d.getConfig?.();
+          p && h && o(h);
         }
       } catch {
       }
     })(), () => {
-      t = !1;
+      p = !1;
     };
   }, []);
-  const u = i(async () => {
-    const e = n.current;
-    return e ? await e.getConfig?.() ?? null : null;
-  }, []), a = i(async () => {
-    const e = n.current;
-    e && await e.forceLayout?.();
-  }, []), d = i(async (e) => {
-    const t = n.current;
-    t && await t.toggleGroup?.(e);
-  }, []), g = i((e, t) => {
-    n.current?.registerStyles?.(e, t);
-  }, []), v = i((e) => {
-    n.current?.unregisterStyles?.(e);
-  }, []), y = i(() => o?.columns ? o.columns.filter((e) => !e.hidden) : [], [o]), m = i(() => {
-    const e = n.current?.element, t = e?.getPluginByName?.("selection");
-    if (!t) {
+  const s = R(async () => {
+    const d = n.current;
+    return d ? await d.getConfig?.() ?? null : null;
+  }, []), c = R(async () => {
+    const d = n.current;
+    d && await d.forceLayout?.();
+  }, []), a = R(async (d) => {
+    const p = n.current;
+    p && await p.toggleGroup?.(d);
+  }, []), u = R((d, p) => {
+    n.current?.registerStyles?.(d, p);
+  }, []), f = R((d) => {
+    n.current?.unregisterStyles?.(d);
+  }, []), C = R(() => r?.columns ? r.columns.filter((d) => !d.hidden) : [], [r]), P = R(() => {
+    const d = n.current?.element, p = d?.getPluginByName?.("selection");
+    if (!p) {
       console.warn("[useGrid] selectAll requires SelectionPlugin");
       return;
     }
-    if (t.config?.mode === "row") {
-      const r = e?.rows ?? [], c = new Set(r.map((E, C) => C));
-      t.selected = c, t.requestAfterRender?.();
-    }
-  }, []), p = i(() => {
-    const t = n.current?.element?.getPluginByName?.("selection");
-    t && t.clearSelection?.();
-  }, []), G = i(() => {
-    const t = n.current?.element?.getPluginByName?.("selection");
-    return t ? new Set(t.selected ?? []) : /* @__PURE__ */ new Set();
-  }, []), h = i(() => {
-    const e = n.current?.element, t = e?.getPluginByName?.("selection");
-    if (!t) return [];
-    const r = e?.rows ?? [], c = t.selected ?? /* @__PURE__ */ new Set();
-    return r.filter((E, C) => c.has(C));
-  }, []), x = i((e) => {
-    const r = n.current?.element?.getPluginByName?.("export");
-    if (!r) {
+    if (p.config?.mode === "row") {
+      const m = d?.rows ?? [], h = new Set(m.map((g, A) => A));
+      p.selected = h, p.requestAfterRender?.();
+    }
+  }, []), S = R(() => {
+    const p = n.current?.element?.getPluginByName?.("selection");
+    p && p.clearSelection?.();
+  }, []), G = R(() => {
+    const p = n.current?.element?.getPluginByName?.("selection");
+    return p ? new Set(p.selected ?? []) : /* @__PURE__ */ new Set();
+  }, []), L = R(() => {
+    const d = n.current?.element, p = d?.getPluginByName?.("selection");
+    if (!p) return [];
+    const m = d?.rows ?? [], h = p.selected ?? /* @__PURE__ */ new Set();
+    return m.filter((g, A) => h.has(A));
+  }, []), k = R((d) => {
+    const m = n.current?.element?.getPluginByName?.("export");
+    if (!m) {
       console.warn("[useGrid] exportToCsv requires ExportPlugin (use export prop)");
       return;
     }
-    r.exportCsv?.({ filename: e ?? "export.csv" });
-  }, []), b = i((e) => {
-    const r = n.current?.element?.getPluginByName?.("export");
-    if (!r) {
+    m.exportCsv?.({ filename: d ?? "export.csv" });
+  }, []), N = R((d) => {
+    const m = n.current?.element?.getPluginByName?.("export");
+    if (!m) {
       console.warn("[useGrid] exportToJson requires ExportPlugin (use export prop)");
       return;
     }
-    r.exportJson?.({ filename: e ?? "export.json" });
+    m.exportJson?.({ filename: d ?? "export.json" });
   }, []);
   return {
     ref: n,
     element: n.current?.element ?? null,
-    isReady: s,
-    config: o,
-    getConfig: u,
-    forceLayout: a,
-    toggleGroup: d,
-    registerStyles: g,
-    unregisterStyles: v,
-    getVisibleColumns: y,
+    isReady: t,
+    config: r,
+    getConfig: s,
+    forceLayout: c,
+    toggleGroup: a,
+    registerStyles: u,
+    unregisterStyles: f,
+    getVisibleColumns: C,
     // Selection methods
-    selectAll: m,
-    clearSelection: p,
+    selectAll: P,
+    clearSelection: S,
     getSelectedIndices: G,
-    getSelectedRows: h,
+    getSelectedRows: L,
     // Export methods
-    exportToCsv: x,
-    exportToJson: b
+    exportToCsv: k,
+    exportToJson: N
   };
 }
-let D = !1;
-function W(n, s, l, o = []) {
-  !D && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (D = !0, console.warn(
+let ge = !1;
+function wt(n, t, e, r = []) {
+  !ge && typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname.includes(".local")) && (ge = !0, console.warn(
     `[useGridEvent] Deprecated: Use event props directly on DataGrid instead.
 Example: <DataGrid onSelectionChange={(e) => ...} />
 See migration guide: https://toolbox-web.dev/grid-react/migration`
   ));
-  const f = R(l);
-  S(() => {
-    f.current = l;
-  }, [l, ...o]), S(() => {
-    const u = n.current, a = u && "element" in u ? u.element : u;
-    if (!a) return;
-    const d = ((g) => {
-      f.current(g);
+  const o = D(e);
+  w(() => {
+    o.current = e;
+  }, [e, ...r]), w(() => {
+    const s = n.current, c = s && "element" in s ? s.element : s;
+    if (!c) return;
+    const a = ((u) => {
+      o.current(u);
     });
-    return a.addEventListener(s, d), () => {
-      a.removeEventListener(s, d);
+    return c.addEventListener(t, a), () => {
+      c.removeEventListener(t, a);
     };
-  }, [n, s]);
+  }, [n, t]);
 }
 export {
-  H as DataGrid,
-  U as GridAdapter,
-  J as GridColumn,
-  $ as GridDetailPanel,
-  A as GridIconProvider,
-  j as GridProvider,
-  K as GridResponsiveCard,
-  V as GridToolButtons,
-  M as GridToolPanel,
-  k as GridTypeProvider,
-  O as ReactGridAdapter,
-  z as useGrid,
-  W as useGridEvent,
-  Q as useGridIcons,
-  X as useGridTypeDefaults,
-  Y as useTypeDefault
+  gt as DataGrid,
+  he as GridAdapter,
+  pt as GridColumn,
+  qe as GridDetailPanel,
+  Ve as GridIconProvider,
+  yt as GridProvider,
+  Te as GridResponsiveCard,
+  mt as GridToolButtons,
+  ut as GridToolPanel,
+  Le as GridTypeProvider,
+  ft as ReactGridAdapter,
+  ht as useGrid,
+  wt as useGridEvent,
+  at as useGridIcons,
+  lt as useGridTypeDefaults,
+  dt as useTypeDefault
 };