@toolbox-web/grid-react 1.10.0 → 2.0.0-beta.1

package/index.js

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