@toolbox-web/grid-react 0.2.0 → 0.3.1

package/README.md

@@ -11,6 +11,7 @@ React adapter for `@toolbox-web/grid` data grid component. Provides components a
 - ✅ **Full React integration** - Use JSX for cell renderers and editors
 - ✅ **Declarative columns** - Define columns via props or `GridColumn` components
 - ✅ **Render props** - Clean `children` syntax for custom cells
+- ✅ **Type-level defaults** - App-wide renderers/editors via `GridTypeProvider`
 - ✅ **Hooks API** - `useGrid` and `useGridEvent` for programmatic access
 - ✅ **Ref forwarding** - Access grid instance via `DataGridRef`
 - ✅ **Master-detail** - `GridDetailPanel` for expandable rows
@@ -352,6 +353,65 @@ function MyComponent() {
 
 See [useGridEvent](#usegridevent) above.
 
+## Type-Level Defaults
+
+Define app-wide renderers and editors for custom column types using `GridTypeProvider`:
+
+```tsx
+import { GridTypeProvider, DataGrid, type TypeDefaultsMap } from '@toolbox-web/grid-react';
+import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
+
+// Define type defaults at app level
+const typeDefaults: TypeDefaultsMap = {
+  country: {
+    renderer: (ctx) => <span>🌍 {ctx.value}</span>,
+    editor: (ctx) => (
+      <select defaultValue={ctx.value} onChange={(e) => ctx.commit(e.target.value)}>
+        <option value="USA">USA</option>
+        <option value="UK">UK</option>
+        <option value="Germany">Germany</option>
+      </select>
+    ),
+  },
+  currency: {
+    renderer: (ctx) => <span>${ctx.value.toFixed(2)}</span>,
+  },
+};
+
+// Wrap your app with the provider
+function App() {
+  return (
+    <GridTypeProvider defaults={typeDefaults}>
+      <Dashboard />
+    </GridTypeProvider>
+  );
+}
+
+// All grids with type: 'country' columns use these components
+function Dashboard() {
+  return (
+    <DataGrid
+      rows={employees}
+      gridConfig={{
+        columns: [
+          { field: 'name', header: 'Name' },
+          { field: 'country', type: 'country', editable: true },
+          { field: 'salary', type: 'currency' },
+        ],
+        plugins: [new EditingPlugin()],
+      }}
+    />
+  );
+}
+```
+
+**Hooks:**
+
+| Hook                    | Description                        |
+| ----------------------- | ---------------------------------- |
+| `useGridTypeDefaults()` | Get all type defaults from context |
+| `useTypeDefault(type)`  | Get defaults for a specific type   |
+
 ## Using Plugins
 
 Import plugins individually for smaller bundles:
@@ -403,20 +463,23 @@ Inject custom CSS into the grid:
 
 ### Exported Components
 
-| Component         | Description                          |
-| ----------------- | ------------------------------------ |
-| `DataGrid`        | Main grid component wrapper          |
-| `GridColumn`      | Declarative column with render props |
-| `GridDetailPanel` | Master-detail expandable panel       |
-| `GridToolPanel`   | Custom sidebar panel                 |
-| `GridToolButtons` | Toolbar button container             |
+| Component          | Description                          |
+| ------------------ | ------------------------------------ |
+| `DataGrid`         | Main grid component wrapper          |
+| `GridColumn`       | Declarative column with render props |
+| `GridDetailPanel`  | Master-detail expandable panel       |
+| `GridToolPanel`    | Custom sidebar panel                 |
+| `GridToolButtons`  | Toolbar button container             |
+| `GridTypeProvider` | App-level type defaults context      |
 
 ### Exported Hooks
 
-| Hook           | Description                               |
-| -------------- | ----------------------------------------- |
-| `useGrid`      | Grid ref with ready state and methods     |
-| `useGridEvent` | Type-safe event subscription with cleanup |
+| Hook                    | Description                               |
+| ----------------------- | ----------------------------------------- |
+| `useGrid`               | Grid ref with ready state and methods     |
+| `useGridEvent`          | Type-safe event subscription with cleanup |
+| `useGridTypeDefaults()` | Get all type defaults from context        |
+| `useTypeDefault(type)`  | Get defaults for a specific type          |
 
 ### Exported Types
 
@@ -430,6 +493,10 @@ import type {
   ToolPanelContext,
   DataGridRef,
   DataGridProps,
+  // Type-level defaults
+  ReactTypeDefault,
+  TypeDefaultsMap,
+  GridTypeProviderProps,
 } from '@toolbox-web/grid-react';
 ```
 
@@ -441,7 +508,6 @@ import type {
 | `columns`      | `ColumnConfig[]`                           | Column definitions        |
 | `gridConfig`   | `GridConfig`                               | Full configuration object |
 | `fitMode`      | `'stretch' \| 'fit-columns' \| 'auto-fit'` | Column sizing mode        |
-| `editOn`       | `'click' \| 'dblclick' \| 'none'`          | Edit trigger              |
 | `customStyles` | `string`                                   | CSS to inject into grid   |
 | `onRowsChange` | `(rows: TRow[]) => void`                   | Rows changed callback     |
 | `onCellEdit`   | `(event: CustomEvent) => void`             | Cell edited callback      |

package/index.d.ts

@@ -3,6 +3,7 @@ export { GridColumn } from './lib/grid-column';
 export { GridDetailPanel, type DetailPanelContext, type GridDetailPanelProps } from './lib/grid-detail-panel';
 export { GridToolButtons, type GridToolButtonsProps } from './lib/grid-tool-button';
 export { GridToolPanel, type GridToolPanelProps, type ToolPanelContext } from './lib/grid-tool-panel';
+export { GridTypeProvider, useGridTypeDefaults, useTypeDefault, type GridTypeProviderProps, type ReactTypeDefault, type TypeDefaultsMap, } from './lib/grid-type-registry';
 export type { ReactColumnConfig, ReactGridConfig } from './lib/react-column-config';
 export { useGrid } from './lib/use-grid';
 export { useGridEvent } from './lib/use-grid-event';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGvH,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAGjF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGvH,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC"}

package/index.js

@@ -1,33 +1,33 @@
-import { jsx as L } from "react/jsx-runtime";
-import { DataGridElement as z } from "@toolbox-web/grid";
-import { useRef as G, useCallback as C, forwardRef as B, useMemo as O, useEffect as R, useImperativeHandle as _, useState as x } from "react";
-import { flushSync as b } from "react-dom";
-import { createRoot as V } from "react-dom/client";
-const F = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new Map();
-function W(n) {
+import { jsx as T } from "react/jsx-runtime";
+import { DataGridElement as _ } from "@toolbox-web/grid";
+import { useRef as k, useCallback as D, createContext as j, useContext as F, forwardRef as $, useMemo as J, useEffect as v, useImperativeHandle as K, useState as N } from "react";
+import { flushSync as R } from "react-dom";
+import { createRoot as b } from "react-dom/client";
+const H = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Map();
+function z(n) {
   const t = n.querySelector("tbw-grid-detail");
   if (t) {
-    const r = F.get(t);
+    const r = H.get(t);
     if (r) return r;
   }
   const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return N.get(e);
+    return q.get(e);
 }
-function se(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = G(null), s = C(
-    (d) => {
-      if (i.current = d, !d) return;
-      F.set(d, t);
-      const u = d.closest("tbw-grid");
+function le(n) {
+  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = k(null), s = D(
+    (c) => {
+      if (i.current = c, !c) return;
+      H.set(c, t);
+      const u = c.closest("tbw-grid");
       if (u) {
         const l = u.id || u.getAttribute("data-grid-id");
-        l && N.set(l, t);
+        l && q.set(l, t);
       }
     },
     [t]
   );
-  return /* @__PURE__ */ L(
+  return /* @__PURE__ */ T(
     "tbw-grid-detail",
     {
       ref: s,
@@ -36,63 +36,71 @@ function se(n) {
     }
   );
 }
-function j(n) {
+const L = j(null), fe = ({ defaults: n, children: t }) => /* @__PURE__ */ T(L.Provider, { value: n, children: t });
+function ge() {
+  return F(L);
+}
+function me(n) {
+  return F(L)?.[n];
+}
+const Q = L;
+function U(n) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     const r = e.cellEl;
     if (r) {
       const o = t.get(r);
       if (o)
-        return b(() => {
+        return R(() => {
           o.root.render(n(e));
         }), o.container;
     }
     const i = document.createElement("div");
     i.className = "react-cell-renderer", i.style.display = "contents";
-    const s = V(i);
-    return b(() => {
+    const s = b(i);
+    return R(() => {
       s.render(n(e));
     }), r && t.set(r, { root: s, container: i }), i;
   };
 }
-function $(n) {
+function X(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
-    const r = V(e);
-    return b(() => {
+    const r = b(e);
+    return R(() => {
       r.render(n(t));
     }), e;
   };
 }
-function J(n) {
+function Y(n) {
   if (!n) return;
   if (!n.columns) return n;
   const t = n.columns.map((e) => {
     const { renderer: r, editor: i, ...s } = e, o = { ...s };
-    return r && (o.renderer = j(r)), i && (o.editor = $(i)), o;
+    return r && (o.renderer = U(r)), i && (o.editor = X(i)), o;
   });
   return {
     ...n,
     columns: t
   };
 }
-const H = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
-function K(n) {
-  const t = H.get(n);
+const B = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new Map();
+function Z(n) {
+  const t = B.get(n);
   if (t) return t;
   const e = n.id;
   if (e)
-    return T.get(e);
+    return O.get(e);
 }
-function ce(n) {
-  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, d = G(null), u = C(
+function pe(n) {
+  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, c = k(null), u = D(
     (l) => {
-      d.current = l, l && (H.set(l, o), t && T.set(t, o));
+      c.current = l, l && (B.set(l, o), t && O.set(t, o));
     },
     [o, t]
   );
-  return /* @__PURE__ */ L(
+  return /* @__PURE__ */ T(
     "tbw-grid-tool-panel",
     {
       ref: u,
@@ -104,52 +112,62 @@ function ce(n) {
     }
   );
 }
-const S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
-function Q(n, t) {
-  const e = n.getAttribute("field"), r = S.get(n) ?? {};
-  if (r.renderer = t, S.set(n, r), e) {
-    const i = A.get(e) ?? {};
-    i.renderer = t, A.set(e, i);
+const A = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new Map();
+function ee(n, t) {
+  const e = n.getAttribute("field"), r = A.get(n) ?? {};
+  if (r.renderer = t, A.set(n, r), e) {
+    const i = G.get(e) ?? {};
+    i.renderer = t, G.set(e, i);
   }
 }
-function U(n, t) {
-  const e = n.getAttribute("field"), r = S.get(n) ?? {};
-  if (r.editor = t, S.set(n, r), e) {
-    const i = A.get(e) ?? {};
-    i.editor = t, A.set(e, i);
+function te(n, t) {
+  const e = n.getAttribute("field"), r = A.get(n) ?? {};
+  if (r.editor = t, A.set(n, r), e) {
+    const i = G.get(e) ?? {};
+    i.editor = t, G.set(e, i);
   }
 }
-function X(n) {
-  let t = S.get(n)?.renderer;
+function re(n) {
+  let t = A.get(n)?.renderer;
   if (!t) {
     const e = n.getAttribute("field");
-    e && (t = A.get(e)?.renderer);
+    e && (t = G.get(e)?.renderer);
   }
   return t;
 }
-function Y(n) {
-  let t = S.get(n)?.editor;
+function ne(n) {
+  let t = A.get(n)?.editor;
   if (!t) {
     const e = n.getAttribute("field");
-    e && (t = A.get(e)?.editor);
+    e && (t = G.get(e)?.editor);
   }
   return t;
 }
-function de() {
-  return Array.from(A.keys());
+function ye() {
+  return Array.from(G.keys());
 }
-class Z {
+class ie {
   mountedViews = [];
+  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;
+  }
   /**
    * 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 = S.get(t);
+    let r = A.get(t);
     if (!r && e) {
-      const o = A.get(e);
-      o && (o.renderer || o.editor) && (r = o, S.set(t, r));
+      const o = G.get(e);
+      o && (o.renderer || o.editor) && (r = o, A.set(t, r));
     }
     const i = r?.renderer !== void 0, s = r?.editor !== void 0;
     return r !== void 0 && (i || s);
@@ -166,7 +184,7 @@ class Z {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = X(t);
+    const e = re(t);
     if (!e)
       return;
     const r = /* @__PURE__ */ new WeakMap();
@@ -175,22 +193,22 @@ class Z {
       if (s) {
         const u = r.get(s);
         if (u)
-          return b(() => {
+          return R(() => {
             u.root.render(e(i));
           }), u.container;
         const l = document.createElement("div");
         l.className = "react-cell-renderer", l.style.display = "contents";
-        const w = V(l);
-        return b(() => {
+        const w = b(l);
+        return R(() => {
           w.render(e(i));
         }), r.set(s, { root: w, container: l, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
       }
       const o = document.createElement("div");
       o.className = "react-cell-renderer", o.style.display = "contents";
-      const d = V(o);
-      return b(() => {
-        d.render(e(i));
-      }), this.mountedViews.push({ root: d, container: o }), o;
+      const c = b(o);
+      return R(() => {
+        c.render(e(i));
+      }), this.mountedViews.push({ root: c, container: o }), o;
     };
   }
   /**
@@ -198,12 +216,12 @@ class Z {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = Y(t);
+    const e = ne(t);
     return e ? (r) => {
       const i = document.createElement("div");
       i.className = "react-cell-editor", i.style.display = "contents";
-      const s = V(i);
-      return b(() => {
+      const s = b(i);
+      return R(() => {
         s.render(e(r));
       }), this.mountedViews.push({ root: s, container: i }), i;
     } : () => document.createElement("div");
@@ -213,15 +231,15 @@ class Z {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = W(t);
+    const e = z(t);
     if (e)
       return (r, i) => {
         const s = document.createElement("div");
         s.className = "react-detail-panel";
-        const o = { row: r, rowIndex: i }, d = V(s);
-        return b(() => {
-          d.render(e(o));
-        }), this.mountedViews.push({ root: d, container: s }), s;
+        const o = { row: r, rowIndex: i }, c = b(s);
+        return R(() => {
+          c.render(e(o));
+        }), this.mountedViews.push({ root: c, container: s }), s;
       };
   }
   /**
@@ -238,29 +256,92 @@ class Z {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = K(t);
+    const e = Z(t);
     if (!e)
       return;
     const r = t.closest("tbw-grid");
     return (i) => {
       const s = {
         grid: r ?? i
-      }, o = V(i);
-      return b(() => {
+      }, o = b(i);
+      return R(() => {
         o.render(e(s));
       }), this.mountedViews.push({ root: o, container: i }), () => {
-        const d = this.mountedViews.findIndex((u) => u.container === i);
-        if (d !== -1) {
-          const { root: u } = this.mountedViews[d];
+        const c = this.mountedViews.findIndex((u) => u.container === i);
+        if (c !== -1) {
+          const { root: u } = this.mountedViews[c];
           try {
             u.unmount();
           } catch {
           }
-          this.mountedViews.splice(d, 1);
+          this.mountedViews.splice(c, 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)), 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 i = b(r);
+      return this.mountedViews.push({ root: i, container: r }), R(() => {
+        i.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 i = b(r);
+      return this.mountedViews.push({ root: i, container: r }), R(() => {
+        i.render(t(e));
+      }), r;
+    };
+  }
   /**
    * Clean up all mounted React roots.
    * Call this when the grid is unmounted.
@@ -288,114 +369,116 @@ class Z {
     }
   }
 }
-let P = !1, M = null;
-function q() {
-  return P || (M = new Z(), z.registerAdapter(M), P = !0), M;
+let W = !1, M = null;
+function P() {
+  return W || (M = new ie(), _.registerAdapter(M), W = !0), M;
 }
-q();
-function ee(n, t) {
+P();
+function oe(n, t) {
   const e = n, r = e.getPluginByName?.("masterDetail");
   if (r && typeof r.refreshDetailRenderer == "function") {
     r.refreshDetailRenderer();
     return;
   }
   const i = n.querySelector("tbw-grid-detail");
-  !i || !W(n) || import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: o }) => {
-    const d = t.createDetailRenderer(n);
-    if (!d) return;
+  !i || !z(n) || import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: o }) => {
+    const c = t.createDetailRenderer(n);
+    if (!c) return;
     const u = i.getAttribute("animation");
     let l = "slide";
     u === "false" ? l = !1 : u === "fade" && (l = "fade");
     const w = i.getAttribute("showExpandColumn") !== "false", a = new o({
-      detailRenderer: d,
+      detailRenderer: c,
       showExpandColumn: w,
       animation: l
-    }), m = e.gridConfig || {}, E = m.plugins || [];
+    }), m = e.gridConfig || {}, S = m.plugins || [];
     e.gridConfig = {
       ...m,
-      plugins: [...E, a]
+      plugins: [...S, a]
     };
   }).catch(() => {
   });
 }
-const ue = B(function(t, e) {
+const he = $(function(t, e) {
   const {
     rows: r,
     gridConfig: i,
     columns: s,
     fitMode: o,
-    editOn: d,
+    editOn: c,
     customStyles: u,
     className: l,
     style: w,
     children: a,
     onRowsChange: m,
-    onCellEdit: E,
-    onRowClick: v,
-    onColumnStateChange: D,
+    onCellEdit: S,
+    onRowClick: E,
+    onColumnStateChange: x,
     onSortChange: I
-  } = t, f = G(null), k = G(null), h = O(() => J(i), [i]);
-  return R(() => {
+  } = t, f = k(null), V = k(null), y = F(Q), C = J(() => Y(i), [i]);
+  return v(() => {
+    P().setTypeDefaults(y);
+  }, [y]), v(() => {
     f.current && (f.current.rows = r);
-  }, [r]), R(() => {
-    f.current && h && (f.current.gridConfig = h);
-  }, [h]), R(() => {
+  }, [r]), v(() => {
+    f.current && C && (f.current.gridConfig = C);
+  }, [C]), v(() => {
     f.current && s && (f.current.columns = s);
-  }, [s]), R(() => {
+  }, [s]), v(() => {
     f.current && o !== void 0 && (f.current.fitMode = o);
-  }, [o]), R(() => {
-    f.current && d !== void 0 && (f.current.editOn = d);
-  }, [d]), R(() => {
-    const c = f.current;
-    if (!c) return;
-    const p = q();
-    c.__frameworkAdapter = p, ee(c, p);
+  }, [o]), v(() => {
+    f.current && c !== void 0 && (f.current.editOn = c);
+  }, [c]), v(() => {
+    const d = f.current;
+    if (!d) return;
+    const p = P();
+    d.__frameworkAdapter = p, oe(d, p);
     let g = !1;
-    const y = requestAnimationFrame(() => {
-      g || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
+    const h = requestAnimationFrame(() => {
+      g || (typeof d.refreshColumns == "function" && d.refreshColumns(), typeof d.refreshShellHeader == "function" && d.refreshShellHeader());
     });
     return () => {
-      g = !0, cancelAnimationFrame(y);
+      g = !0, cancelAnimationFrame(h);
     };
-  }, []), R(() => {
+  }, []), v(() => {
     if (!f.current || !u) return;
-    const c = f.current, p = "react-custom-styles";
+    const d = f.current, p = "react-custom-styles";
     let g = !0;
-    return c.ready?.().then(() => {
-      g && u && (c.registerStyles?.(p, u), k.current = p);
+    return d.ready?.().then(() => {
+      g && u && (d.registerStyles?.(p, u), V.current = p);
     }), () => {
-      g = !1, k.current && (c.unregisterStyles?.(k.current), k.current = null);
+      g = !1, V.current && (d.unregisterStyles?.(V.current), V.current = null);
     };
-  }, [u]), R(() => {
-    const c = f.current;
-    if (!c) return;
+  }, [u]), v(() => {
+    const d = f.current;
+    if (!d) return;
     const p = [];
     if (m) {
-      const g = ((y) => m(y.detail.rows));
-      c.addEventListener("rows-change", g), p.push(["rows-change", g]);
+      const g = ((h) => m(h.detail.rows));
+      d.addEventListener("rows-change", g), p.push(["rows-change", g]);
     }
-    if (E) {
-      const g = ((y) => E(y));
-      c.addEventListener("cell-edit", g), p.push(["cell-edit", g]);
+    if (S) {
+      const g = ((h) => S(h));
+      d.addEventListener("cell-edit", g), p.push(["cell-edit", g]);
     }
-    if (v) {
-      const g = ((y) => v(y));
-      c.addEventListener("row-click", g), p.push(["row-click", g]);
+    if (E) {
+      const g = ((h) => E(h));
+      d.addEventListener("row-click", g), p.push(["row-click", g]);
     }
-    if (D) {
-      const g = ((y) => D(y));
-      c.addEventListener("column-state-change", g), p.push(["column-state-change", g]);
+    if (x) {
+      const g = ((h) => x(h));
+      d.addEventListener("column-state-change", g), p.push(["column-state-change", g]);
     }
     if (I) {
-      const g = ((y) => I(y));
-      c.addEventListener("sort-change", g), p.push(["sort-change", g]);
+      const g = ((h) => I(h));
+      d.addEventListener("sort-change", g), p.push(["sort-change", g]);
     }
     return () => {
-      p.forEach(([g, y]) => {
-        c.removeEventListener(g, y);
+      p.forEach(([g, h]) => {
+        d.removeEventListener(g, h);
       });
     };
-  }, [m, E, v, D, I]), _(
+  }, [m, S, E, x, I]), K(
     e,
     () => ({
       get element() {
@@ -410,24 +493,24 @@ const ue = B(function(t, e) {
       async forceLayout() {
         return f.current?.forceLayout?.();
       },
-      async toggleGroup(c) {
-        return f.current?.toggleGroup?.(c);
+      async toggleGroup(d) {
+        return f.current?.toggleGroup?.(d);
       },
-      registerStyles(c, p) {
-        f.current?.registerStyles?.(c, p);
+      registerStyles(d, p) {
+        f.current?.registerStyles?.(d, p);
       },
-      unregisterStyles(c) {
-        f.current?.unregisterStyles?.(c);
+      unregisterStyles(d) {
+        f.current?.unregisterStyles?.(d);
       }
     }),
     []
-  ), /* @__PURE__ */ L(
+  ), /* @__PURE__ */ T(
     "tbw-grid",
     {
-      ref: (c) => {
-        if (f.current = c, c) {
-          const p = c;
-          h && (p.gridConfig = h), r && (p.rows = r), s && (p.columns = s);
+      ref: (d) => {
+        if (f.current = d, d) {
+          const p = d;
+          C && (p.gridConfig = C), r && (p.rows = r), s && (p.columns = s);
         }
       },
       class: l,
@@ -436,7 +519,7 @@ const ue = B(function(t, e) {
     }
   );
 });
-function ae(n) {
+function we(n) {
   const {
     field: t,
     header: e,
@@ -444,32 +527,32 @@ function ae(n) {
     editable: i,
     sortable: s,
     resizable: o,
-    width: d,
+    width: c,
     minWidth: u,
     hidden: l,
     lockVisible: w,
     children: a,
     editor: m,
-    options: E,
-    multi: v,
-    format: D
-  } = n, I = G(null), f = C(
-    (c) => {
-      I.current = c, c && (a && Q(c, a), m && U(c, m));
+    options: S,
+    multi: E,
+    format: x
+  } = n, I = k(null), f = D(
+    (C) => {
+      I.current = C, C && (a && ee(C, a), m && te(C, m));
     },
     [a, m, t]
-  ), k = typeof d == "number" ? `${d}px` : d, h = {
+  ), V = typeof c == "number" ? `${c}px` : c, y = {
     field: t,
     ref: f
   };
-  return e !== void 0 && (h.header = e), r !== void 0 && (h.type = r), i !== void 0 && (h.editable = i), s !== void 0 && (h.sortable = s), o !== void 0 && (h.resizable = o), k !== void 0 && (h.width = k), u !== void 0 && (h["min-width"] = u), l !== void 0 && (h.hidden = l), w !== void 0 && (h["lock-visible"] = w), v !== void 0 && (h.multi = v), D && (h["data-has-format"] = "true"), E && (h["data-has-options"] = "true"), /* @__PURE__ */ L("tbw-grid-column", { ...h });
+  return e !== void 0 && (y.header = e), r !== void 0 && (y.type = r), i !== void 0 && (y.editable = i), s !== void 0 && (y.sortable = s), o !== void 0 && (y.resizable = o), V !== void 0 && (y.width = V), u !== void 0 && (y["min-width"] = u), l !== void 0 && (y.hidden = l), w !== void 0 && (y["lock-visible"] = w), E !== void 0 && (y.multi = E), x && (y["data-has-format"] = "true"), S && (y["data-has-options"] = "true"), /* @__PURE__ */ T("tbw-grid-column", { ...y });
 }
-function le({ children: n }) {
-  return /* @__PURE__ */ L("tbw-grid-tool-buttons", { children: n });
+function ve({ children: n }) {
+  return /* @__PURE__ */ T("tbw-grid-tool-buttons", { children: n });
 }
-function fe() {
-  const n = G(null), [t, e] = x(!1), [r, i] = x(null);
-  R(() => {
+function Re() {
+  const n = k(null), [t, e] = N(!1), [r, i] = N(null);
+  v(() => {
     const a = n.current;
     if (!a) return;
     let m = !0;
@@ -477,8 +560,8 @@ function fe() {
       try {
         if (await a.ready?.(), m) {
           e(!0);
-          const v = await a.getConfig?.();
-          m && v && i(v);
+          const E = await a.getConfig?.();
+          m && E && i(E);
         }
       } catch {
       }
@@ -486,55 +569,58 @@ function fe() {
       m = !1;
     };
   }, []);
-  const s = C(async () => {
+  const s = D(async () => {
     const a = n.current;
     return a ? await a.getConfig?.() ?? null : null;
-  }, []), o = C(async () => {
+  }, []), o = D(async () => {
     const a = n.current;
     a && await a.forceLayout?.();
-  }, []), d = C(async (a) => {
+  }, []), c = D(async (a) => {
     const m = n.current;
     m && await m.toggleGroup?.(a);
-  }, []), u = C((a, m) => {
+  }, []), u = D((a, m) => {
     n.current?.registerStyles?.(a, m);
-  }, []), l = C((a) => {
+  }, []), l = D((a) => {
     n.current?.unregisterStyles?.(a);
-  }, []), w = C(() => r?.columns ? r.columns.filter((a) => !a.hidden) : [], [r]);
+  }, []), w = D(() => r?.columns ? r.columns.filter((a) => !a.hidden) : [], [r]);
   return {
     ref: n,
     isReady: t,
     config: r,
     getConfig: s,
     forceLayout: o,
-    toggleGroup: d,
+    toggleGroup: c,
     registerStyles: u,
     unregisterStyles: l,
     getVisibleColumns: w
   };
 }
-function ge(n, t, e, r = []) {
-  const i = G(e);
-  R(() => {
+function Ce(n, t, e, r = []) {
+  const i = k(e);
+  v(() => {
     i.current = e;
-  }, [e, ...r]), R(() => {
+  }, [e, ...r]), v(() => {
     const s = n.current, o = s && "element" in s ? s.element : s;
     if (!o) return;
-    const d = ((u) => {
+    const c = ((u) => {
       i.current(u);
     });
-    return o.addEventListener(t, d), () => {
-      o.removeEventListener(t, d);
+    return o.addEventListener(t, c), () => {
+      o.removeEventListener(t, c);
     };
   }, [n, t]);
 }
 export {
-  ue as DataGrid,
-  ae as GridColumn,
-  se as GridDetailPanel,
-  le as GridToolButtons,
-  ce as GridToolPanel,
-  Z as ReactGridAdapter,
-  de as getRegisteredFields,
-  fe as useGrid,
-  ge as useGridEvent
+  he as DataGrid,
+  we as GridColumn,
+  le as GridDetailPanel,
+  ve as GridToolButtons,
+  pe as GridToolPanel,
+  fe as GridTypeProvider,
+  ie as ReactGridAdapter,
+  ye as getRegisteredFields,
+  Re as useGrid,
+  Ce as useGridEvent,
+  ge as useGridTypeDefaults,
+  me as useTypeDefault
 };

package/lib/data-grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEnF,OAAO,EAA+D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACpG,OAAO,aAAa,CAAC;AAErB,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAgGrF;;GAEG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,GAAG,OAAO;IAC3C,0BAA0B;IAC1B,IAAI,EAAE,IAAI,EAAE,CAAC;IACb;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC,CAAC;IACnC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;IAC/B,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;IACjD,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACtC,wCAAwC;IACxC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9G,kCAAkC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC3E,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IACtF,8BAA8B;IAC9B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;CAClG;AAED;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,IAAI,GAAG,OAAO;IACzC,sCAAsC;IACtC,OAAO,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACrD,oCAAoC;IACpC,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,mCAAmC;IACnC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,yBAAyB;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,6BAA6B;IAC7B,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,+BAA+B;IAC/B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,eAAO,MAAM,QAAQ,EAuOf,CAAC,IAAI,GAAG,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;CAAE,KAAK,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}

package/lib/grid-type-registry.d.ts

@@ -0,0 +1,122 @@
+import { CellRenderContext, ColumnEditorContext, TypeDefault } from '../../../../dist/libs/grid/index.d.ts';
+import { FC, ReactNode } from 'react';
+/**
+ * React-specific type default configuration.
+ * Uses React function components that receive the render context.
+ */
+export interface ReactTypeDefault<TRow = unknown, TValue = unknown> {
+    /** React component/function for rendering cells of this type */
+    renderer?: (ctx: CellRenderContext<TRow, TValue>) => ReactNode;
+    /** React component/function for editing cells of this type */
+    editor?: (ctx: ColumnEditorContext<TRow, TValue>) => ReactNode;
+    /** Default editorParams for this type */
+    editorParams?: Record<string, unknown>;
+}
+/**
+ * Type defaults registry - a map of type names to their defaults.
+ */
+export type TypeDefaultsMap = Record<string, ReactTypeDefault>;
+/**
+ * Props for the GridTypeProvider component.
+ */
+export interface GridTypeProviderProps {
+    /**
+     * Type defaults to provide to all descendant grids.
+     *
+     * @example
+     * ```tsx
+     * const typeDefaults = {
+     *   country: {
+     *     renderer: (ctx) => <CountryBadge value={ctx.value} />,
+     *     editor: (ctx) => <CountrySelect value={ctx.value} onCommit={ctx.commit} />
+     *   },
+     *   status: {
+     *     renderer: (ctx) => <StatusBadge value={ctx.value} />
+     *   }
+     * };
+     *
+     * <GridTypeProvider defaults={typeDefaults}>
+     *   <App />
+     * </GridTypeProvider>
+     * ```
+     */
+    defaults: TypeDefaultsMap;
+    children: ReactNode;
+}
+/**
+ * Provides application-wide type defaults for all descendant grids.
+ *
+ * Wrap your application (or part of it) with this provider to make
+ * type-level renderers and editors available to all DataGrid components.
+ *
+ * @example
+ * ```tsx
+ * // App.tsx or main.tsx
+ * import { GridTypeProvider, type TypeDefaultsMap } from '@toolbox-web/grid-react';
+ *
+ * const typeDefaults: TypeDefaultsMap = {
+ *   country: {
+ *     renderer: (ctx) => <CountryBadge code={ctx.value} />,
+ *     editor: (ctx) => (
+ *       <CountrySelect
+ *         value={ctx.value}
+ *         onSelect={(v) => ctx.commit(v)}
+ *       />
+ *     )
+ *   },
+ *   date: {
+ *     renderer: (ctx) => formatDate(ctx.value),
+ *     editor: (ctx) => <DatePicker value={ctx.value} onCommit={ctx.commit} />
+ *   }
+ * };
+ *
+ * function App() {
+ *   return (
+ *     <GridTypeProvider defaults={typeDefaults}>
+ *       <Dashboard />
+ *     </GridTypeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * Any DataGrid with columns using `type: 'country'` will automatically
+ * use the registered renderer/editor.
+ */
+export declare const GridTypeProvider: FC<GridTypeProviderProps>;
+/**
+ * Hook to access the type defaults from context.
+ *
+ * @returns The type defaults map, or null if not within a GridTypeProvider
+ */
+export declare function useGridTypeDefaults(): TypeDefaultsMap | null;
+/**
+ * Hook to get type defaults for a specific type.
+ *
+ * @param type - The type name to look up
+ * @returns The type defaults, or undefined if not found
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const countryDefaults = useTypeDefault('country');
+ *   // countryDefaults?.renderer, countryDefaults?.editor
+ * }
+ * ```
+ */
+export declare function useTypeDefault<TRow = unknown, TValue = unknown>(type: string): ReactTypeDefault<TRow, TValue> | undefined;
+/**
+ * Creates a TypeDefault that the grid can use from a React type default.
+ *
+ * This converts React render functions into grid-compatible renderer/editor functions.
+ * Used internally by ReactGridAdapter.
+ *
+ * @internal
+ */
+export declare function reactTypeDefaultToGridTypeDefault<TRow = unknown>(reactDefault: ReactTypeDefault<TRow>, renderReactNode: (node: ReactNode) => HTMLElement): TypeDefault<TRow>;
+/**
+ * Internal context for passing the type defaults to the adapter.
+ * Used by DataGrid to communicate with ReactGridAdapter.
+ * @internal
+ */
+export declare const GridTypeContextInternal: import('react').Context<TypeDefaultsMap | null>;
+//# sourceMappingURL=grid-type-registry.d.ts.map

package/lib/grid-type-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-type-registry.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/grid-type-registry.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAA6B,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E;;;GAGG;AACH,MAAM,WAAW,gBAAgB,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IAChE,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,SAAS,CAAC;IAC/D,8DAA8D;IAC9D,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,SAAS,CAAC;IAC/D,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;AAO/D;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAEtD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,eAAe,GAAG,IAAI,CAE5D;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAC7D,IAAI,EAAE,MAAM,GACX,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,GAAG,SAAS,CAG5C;AAED;;;;;;;GAOG;AACH,wBAAgB,iCAAiC,CAAC,IAAI,GAAG,OAAO,EAC9D,YAAY,EAAE,gBAAgB,CAAC,IAAI,CAAC,EACpC,eAAe,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,WAAW,GAChD,WAAW,CAAC,IAAI,CAAC,CAsBnB;AAED;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,iDAAkB,CAAC"}

package/lib/react-grid-adapter.d.ts

@@ -1,5 +1,6 @@
-import { CellRenderContext, ColumnEditorContext, ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../../../dist/libs/grid/index.d.ts';
+import { CellRenderContext, ColumnEditorContext, ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter, TypeDefault } from '../../../../dist/libs/grid/index.d.ts';
 import { ReactNode } from 'react';
+import { TypeDefaultsMap } from './grid-type-registry';
 /**
  * Register a React cell renderer for a column element.
  * Called by GridColumn when it has a children render prop.
@@ -57,6 +58,14 @@ export declare function getRegisteredFields(): string[];
  */
 export declare class ReactGridAdapter implements FrameworkAdapter {
     private mountedViews;
+    private typeDefaults;
+    /**
+     * Sets the type defaults map for this adapter.
+     * Called by DataGrid when it receives type defaults from context.
+     *
+     * @internal
+     */
+    setTypeDefaults(defaults: TypeDefaultsMap | null): void;
     /**
      * Determines if this adapter can handle the given element.
      * Checks if a renderer or editor is registered for this element.
@@ -94,6 +103,41 @@ export declare class ReactGridAdapter implements FrameworkAdapter {
      * Renders React components into tool panel containers.
      */
     createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
+    /**
+     * 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(type: string): TypeDefault | undefined;
+    /**
+     * Creates a renderer function from a React render function for type defaults.
+     * @internal
+     */
+    private createTypeRenderer;
+    /**
+     * Creates an editor function from a React render function for type defaults.
+     * @internal
+     */
+    private createTypeEditor;
     /**
      * Clean up all mounted React roots.
      * Call this when the grid is unmounted.

package/lib/react-grid-adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAaN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAYN;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYvE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYzE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAE9C;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,gBAAiB,YAAW,gBAAgB;IACvD,OAAO,CAAC,YAAY,CAAqB;IAEzC;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAoBxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA2DxG;;;OAGG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA0BpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EACjC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAwB7D;;;OAGG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IAOtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAqC5G;;;OAGG;IACH,OAAO,IAAI,IAAI;IAWf;;OAEG;IACH,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAYtC"}
+{"version":3,"file":"react-grid-adapter.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/react-grid-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAoB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAiB9E;;;GAGG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAaN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,GAChE,IAAI,CAYN;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,iBAAiB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYvE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,WAAW,GACnB,CAAC,CAAC,GAAG,EAAE,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,GAAG,SAAS,CAYzE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,EAAE,CAE9C;AAoBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,gBAAiB,YAAW,gBAAgB;IACvD,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,YAAY,CAAgC;IAEpD;;;;;OAKG;IACH,eAAe,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI;IAIvD;;;OAGG;IACH,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,OAAO;IAoBxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,kBAAkB,CAAC,IAAI,EAAE,MAAM,CAAC;IA2DxG;;;OAGG;IACH,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,OAAO,EAAE,WAAW,GAAG,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC;IA0BpG;;;OAGG;IACH,oBAAoB,CAAC,IAAI,GAAG,OAAO,EACjC,WAAW,EAAE,WAAW,GACvB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,CAAC,GAAG,SAAS;IAwB7D;;;OAGG;IACH,kBAAkB,CAAC,IAAI,GAAG,OAAO,EAC/B,aAAa,EAAE,OAAO,GACrB,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS;IAOtE;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,CAAC,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS;IAqC5G;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS;IA2BrD;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAkBxB;;;OAGG;IACH,OAAO,IAAI,IAAI;IAWf;;OAEG;IACH,OAAO,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI;CAYtC"}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@toolbox-web/grid-react",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "React adapter for @toolbox-web/grid data grid component",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
     }
   },
   "keywords": [