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

package/index.js

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