@toolbox-web/grid-react 0.0.2 → 0.0.4

package/README.md

@@ -1,17 +1,54 @@
 # @toolbox-web/grid-react
 
-React adapter library for [@toolbox-web/grid](https://www.npmjs.com/package/@toolbox-web/grid) - a high-performance, framework-agnostic data grid web component.
+[![npm](https://img.shields.io/npm/v/@toolbox-web/grid-react.svg)](https://www.npmjs.com/package/@toolbox-web/grid-react)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-❤-ea4aaa?logo=github)](https://github.com/sponsors/OysteinAmundsen)
+
+React adapter for `@toolbox-web/grid` data grid component. Provides components and hooks for declarative React integration with custom cell renderers and editors.
+
+## Features
+
+- ✅ **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
+- ✅ **Hooks API** - `useGrid` and `useGridEvent` for programmatic access
+- ✅ **Ref forwarding** - Access grid instance via `DataGridRef`
+- ✅ **Master-detail** - `GridDetailPanel` for expandable rows
+- ✅ **Tool panels** - `GridToolPanel` for custom sidebar content
+- ✅ **Full type safety** - TypeScript generics support
+- ✅ **React 18+** - Concurrent features and Suspense compatible
 
 ## Installation
 
 ```bash
+# npm
 npm install @toolbox-web/grid @toolbox-web/grid-react
+
+# yarn
+yarn add @toolbox-web/grid @toolbox-web/grid-react
+
+# pnpm
+pnpm add @toolbox-web/grid @toolbox-web/grid-react
+
+# bun
+bun add @toolbox-web/grid @toolbox-web/grid-react
+```
+
+## Quick Start
+
+### 1. Register the Grid Component
+
+In your application entry point, import the grid registration:
+
+```typescript
+// main.tsx or index.tsx
+import '@toolbox-web/grid';
 ```
 
-## Basic Usage
+### 2. Use in Components
 
 ```tsx
-import { DataGrid, GridColumn } from '@toolbox-web/grid-react';
+import { DataGrid } from '@toolbox-web/grid-react';
 
 interface Employee {
   id: number;
@@ -60,11 +97,7 @@ const config: ReactGridConfig<Employee> = {
       field: 'status',
       header: 'Status',
       // Custom React renderer - same property name as vanilla!
-      renderer: (ctx) => (
-        <span className={`badge badge-${ctx.value.toLowerCase()}`}>
-          {ctx.value}
-        </span>
-      ),
+      renderer: (ctx) => <span className={`badge badge-${ctx.value.toLowerCase()}`}>{ctx.value}</span>,
     },
   ],
 };
@@ -74,6 +107,14 @@ function EmployeeGrid() {
 }
 ```
 
+**Renderer Context:**
+
+| Property | Type      | Description              |
+| -------- | --------- | ------------------------ |
+| `value`  | `TValue`  | The cell value           |
+| `row`    | `TRow`    | The full row data object |
+| `column` | `unknown` | The column configuration |
+
 ### Using GridColumn Components
 
 Use the `GridColumn` component with a render prop:
@@ -125,6 +166,16 @@ const config: ReactGridConfig<Employee> = {
 };
 ```
 
+**Editor Context:**
+
+| Property | Type          | Description                  |
+| -------- | ------------- | ---------------------------- |
+| `value`  | `TValue`      | The current cell value       |
+| `row`    | `TRow`        | The full row data object     |
+| `column` | `unknown`     | The column configuration     |
+| `commit` | `(v) => void` | Callback to commit new value |
+| `cancel` | `() => void`  | Callback to cancel editing   |
+
 ### Using GridColumn
 
 ```tsx
@@ -179,11 +230,11 @@ function EmployeeGrid() {
 
 **GridDetailPanel Props:**
 
-| Prop               | Type                                      | Default   | Description                          |
-| ------------------ | ----------------------------------------- | --------- | ------------------------------------ |
-| `children`         | `(ctx: DetailPanelContext) => ReactNode`  | Required  | Render function for panel content    |
-| `showExpandColumn` | `boolean`                                 | `true`    | Show expand/collapse chevron column  |
-| `animation`        | `'slide' \| 'fade' \| false`              | `'slide'` | Animation style for expand/collapse  |
+| Prop               | Type                                     | Default   | Description                         |
+| ------------------ | ---------------------------------------- | --------- | ----------------------------------- |
+| `children`         | `(ctx: DetailPanelContext) => ReactNode` | Required  | Render function for panel content   |
+| `showExpandColumn` | `boolean`                                | `true`    | Show expand/collapse chevron column |
+| `animation`        | `'slide' \| 'fade' \| false`             | `'slide'` | Animation style for expand/collapse |
 
 ## Custom Tool Panels with GridToolPanel
 
@@ -229,56 +280,58 @@ function EmployeeGrid() {
 
 **GridToolPanel Props:**
 
-| Prop       | Type                                    | Default    | Description                          |
-| ---------- | --------------------------------------- | ---------- | ------------------------------------ |
-| `id`       | `string`                                | Required   | Unique panel identifier              |
-| `title`    | `string`                                | Required   | Panel title in accordion header      |
-| `children` | `(ctx: ToolPanelContext) => ReactNode`  | Required   | Render function for panel content    |
-| `icon`     | `string`                                | -          | Icon for the accordion header        |
-| `tooltip`  | `string`                                | -          | Tooltip text for header              |
-| `order`    | `number`                                | `100`      | Panel sort order (lower = higher)    |
+| Prop       | Type                                   | Default  | Description                       |
+| ---------- | -------------------------------------- | -------- | --------------------------------- |
+| `id`       | `string`                               | Required | Unique panel identifier           |
+| `title`    | `string`                               | Required | Panel title in accordion header   |
+| `children` | `(ctx: ToolPanelContext) => ReactNode` | Required | Render function for panel content |
+| `icon`     | `string`                               | -        | Icon for the accordion header     |
+| `tooltip`  | `string`                               | -        | Tooltip text for header           |
+| `order`    | `number`                               | `100`    | Panel sort order (lower = higher) |
 
-## Using Refs
+## Hooks
+
+### useGrid
 
 Access the grid instance for programmatic control:
 
 ```tsx
-import { DataGrid, DataGridRef } from '@toolbox-web/grid-react';
-import { useRef } from 'react';
+import { DataGrid, useGrid } from '@toolbox-web/grid-react';
 
 function MyComponent() {
-  const gridRef = useRef<DataGridRef>(null);
+  const { ref, isReady, forceLayout, getConfig } = useGrid<Employee>();
 
   const handleExport = async () => {
-    const config = await gridRef.current?.getConfig();
+    const config = await getConfig();
     console.log('Columns:', config?.columns);
   };
 
   return (
     <>
       <button onClick={handleExport}>Export</button>
-      <DataGrid ref={gridRef} rows={employees} />
+      <button onClick={() => forceLayout()}>Refresh Layout</button>
+      <DataGrid ref={ref} rows={employees} />
     </>
   );
 }
 ```
 
-## useGrid Hook
+### useGridEvent
 
-For more complex scenarios, use the `useGrid` hook:
+Type-safe event subscription with automatic cleanup:
 
 ```tsx
-import { DataGrid, useGrid } from '@toolbox-web/grid-react';
+import { DataGrid, useGridEvent, DataGridRef } from '@toolbox-web/grid-react';
+import { useRef } from 'react';
 
 function MyComponent() {
-  const { ref, isReady, forceLayout } = useGrid<Employee>();
+  const gridRef = useRef<DataGridRef>(null);
 
-  return (
-    <>
-      <button onClick={() => forceLayout()}>Refresh Layout</button>
-      <DataGrid ref={ref} rows={employees} />
-    </>
-  );
+  useGridEvent(gridRef, 'selection-change', (event) => {
+    console.log('Selected:', event.detail.selectedRows);
+  });
+
+  return <DataGrid ref={gridRef} rows={employees} />;
 }
 ```
 
@@ -297,27 +350,16 @@ function MyComponent() {
 
 ### Via useGridEvent Hook
 
-```tsx
-import { DataGrid, useGridEvent, DataGridRef } from '@toolbox-web/grid-react';
-
-function MyComponent() {
-  const gridRef = useRef<DataGridRef>(null);
-
-  useGridEvent(gridRef, 'selection-change', (event) => {
-    console.log('Selected:', event.detail.selectedRows);
-  });
-
-  return <DataGrid ref={gridRef} rows={employees} />;
-}
-```
+See [useGridEvent](#usegridevent) above.
 
-## Plugins
+## Using Plugins
 
-Use plugins from `@toolbox-web/grid/all`:
+Import plugins individually for smaller bundles:
 
 ```tsx
 import { DataGrid } from '@toolbox-web/grid-react';
-import { SelectionPlugin, FilteringPlugin } from '@toolbox-web/grid/all';
+import { SelectionPlugin } from '@toolbox-web/grid/plugins/selection';
+import { FilteringPlugin } from '@toolbox-web/grid/plugins/filtering';
 
 function MyComponent() {
   return (
@@ -335,6 +377,12 @@ function MyComponent() {
 }
 ```
 
+Or import all plugins at once (larger bundle, but convenient):
+
+```tsx
+import { SelectionPlugin, FilteringPlugin } from '@toolbox-web/grid/all';
+```
+
 ## Custom Styles
 
 Inject custom CSS into the grid's shadow DOM:
@@ -353,6 +401,38 @@ Inject custom CSS into the grid's shadow DOM:
 
 ## API Reference
 
+### 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             |
+
+### Exported Hooks
+
+| Hook           | Description                               |
+| -------------- | ----------------------------------------- |
+| `useGrid`      | Grid ref with ready state and methods     |
+| `useGridEvent` | Type-safe event subscription with cleanup |
+
+### Exported Types
+
+```typescript
+import type {
+  ReactGridConfig,
+  ReactColumnConfig,
+  CellRenderContext,
+  ColumnEditorContext,
+  DetailPanelContext,
+  ToolPanelContext,
+  DataGridRef,
+  DataGridProps,
+} from '@toolbox-web/grid-react';
+```
+
 ### DataGrid Props
 
 | Prop           | Type                                       | Description                   |
@@ -384,18 +464,63 @@ Inject custom CSS into the grid's shadow DOM:
 ### DataGridRef Methods
 
 | Method                    | Description                 |
-| ------------------------- | --------------------------- |
+| ------------------------- | --------------------------- | -------------------- |
 | `getConfig()`             | Get effective configuration |
 | `ready()`                 | Wait for grid ready         |
 | `forceLayout()`           | Force layout recalculation  |
 | `toggleGroup(key)`        | Toggle group expansion      |
 | `registerStyles(id, css)` | Register custom styles      |
-| `unregisterStyles(id)`    | Remove custom styles        |
+| `unregisterStyles(id)`    | `void`                      | Remove custom styles |
+
+### ReactGridAdapter
+
+The adapter class is exported for advanced use cases:
+
+```typescript
+import { ReactGridAdapter } from '@toolbox-web/grid-react';
+```
+
+In most cases, the `DataGrid` component handles adapter registration automatically.
+
+## Demo
+
+See the full React demo at [`demos/employee-management/react/`](../../demos/employee-management/react/) which demonstrates:
+
+- 15+ plugins with full configuration
+- Custom editors (star rating, date picker, status select, bonus slider)
+- Custom renderers (status badges, rating colors, top performer stars)
+- Hooks for programmatic control
+- Shell integration (header, tool panels)
+- Master-detail expandable rows
 
 ## Requirements
 
 - React 18.0.0 or higher
-- @toolbox-web/grid 0.2.0 or higher
+- `@toolbox-web/grid` >= 0.2.0
+
+## Development
+
+```bash
+# Build the library
+bun nx build grid-react
+
+# Run tests
+bun nx test grid-react
+
+# Lint
+bun nx lint grid-react
+```
+
+---
+
+## Support This Project
+
+This grid is built and maintained by a single developer in spare time. If it saves you time or money, consider sponsoring to keep development going:
+
+[![GitHub Sponsors](https://img.shields.io/badge/Sponsor_on_GitHub-ea4aaa?style=for-the-badge&logo=github)](https://github.com/sponsors/OysteinAmundsen)
+[![Patreon](https://img.shields.io/badge/Support_on_Patreon-f96854?style=for-the-badge&logo=patreon)](https://www.patreon.com/c/OysteinAmundsen)
+
+---
 
 ## License
 

package/index.js

@@ -1,10 +1,10 @@
 import { jsx as L } from "react/jsx-runtime";
-import { DataGridElement as O } from "@toolbox-web/grid";
-import { useRef as G, useCallback as C, forwardRef as _, useMemo as j, useEffect as R, useImperativeHandle as B, useState as M } from "react";
+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(), W = /* @__PURE__ */ new Map();
-function H(n) {
+const F = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new Map();
+function W(n) {
   const t = n.querySelector("tbw-grid-detail");
   if (t) {
     const r = F.get(t);
@@ -12,17 +12,17 @@ function H(n) {
   }
   const e = n.id || n.getAttribute("data-grid-id");
   if (e)
-    return W.get(e);
+    return N.get(e);
 }
-function ce(n) {
-  const { children: t, showExpandColumn: e = !0, animation: r = "slide" } = n, i = G(null), o = C(
+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");
       if (u) {
         const l = u.id || u.getAttribute("data-grid-id");
-        l && W.set(l, t);
+        l && N.set(l, t);
       }
     },
     [t]
@@ -30,32 +30,32 @@ function ce(n) {
   return /* @__PURE__ */ L(
     "tbw-grid-detail",
     {
-      ref: o,
+      ref: s,
       showExpandColumn: e ? void 0 : "false",
       animation: r === !1 ? "false" : r
     }
   );
 }
-function $(n) {
+function j(n) {
   const t = /* @__PURE__ */ new WeakMap();
   return (e) => {
     const r = e.cellEl;
     if (r) {
-      const s = t.get(r);
-      if (s)
+      const o = t.get(r);
+      if (o)
         return b(() => {
-          s.root.render(n(e));
-        }), s.container;
+          o.root.render(n(e));
+        }), o.container;
     }
     const i = document.createElement("div");
     i.className = "react-cell-renderer", i.style.display = "contents";
-    const o = V(i);
+    const s = V(i);
     return b(() => {
-      o.render(n(e));
-    }), r && t.set(r, { root: o, container: i }), i;
+      s.render(n(e));
+    }), r && t.set(r, { root: s, container: i }), i;
   };
 }
-function J(n) {
+function $(n) {
   return (t) => {
     const e = document.createElement("div");
     e.className = "react-cell-editor", e.style.display = "contents";
@@ -65,32 +65,32 @@ function J(n) {
     }), e;
   };
 }
-function K(n) {
+function J(n) {
   if (!n) return;
   if (!n.columns) return n;
   const t = n.columns.map((e) => {
-    const { renderer: r, editor: i, ...o } = e, s = { ...o };
-    return r && (s.renderer = $(r)), i && (s.editor = J(i)), s;
+    const { renderer: r, editor: i, ...s } = e, o = { ...s };
+    return r && (o.renderer = j(r)), i && (o.editor = $(i)), o;
   });
   return {
     ...n,
     columns: t
   };
 }
-const N = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
-function Q(n) {
-  const t = N.get(n);
+const H = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new Map();
+function K(n) {
+  const t = H.get(n);
   if (t) return t;
   const e = n.id;
   if (e)
     return T.get(e);
 }
-function de(n) {
-  const { id: t, title: e, icon: r, tooltip: i, order: o = 100, children: s } = n, d = G(null), u = C(
+function ce(n) {
+  const { id: t, title: e, icon: r, tooltip: i, order: s = 100, children: o } = n, d = G(null), u = C(
     (l) => {
-      d.current = l, l && (N.set(l, s), t && T.set(t, s));
+      d.current = l, l && (H.set(l, o), t && T.set(t, o));
     },
-    [s, t]
+    [o, t]
   );
   return /* @__PURE__ */ L(
     "tbw-grid-tool-panel",
@@ -100,26 +100,26 @@ function de(n) {
       title: e,
       icon: r,
       tooltip: i,
-      order: o?.toString()
+      order: s?.toString()
     }
   );
 }
 const S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new Map();
-function U(n, t) {
+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);
   }
 }
-function X(n, t) {
+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 Y(n) {
+function X(n) {
   let t = S.get(n)?.renderer;
   if (!t) {
     const e = n.getAttribute("field");
@@ -127,7 +127,7 @@ function Y(n) {
   }
   return t;
 }
-function Z(n) {
+function Y(n) {
   let t = S.get(n)?.editor;
   if (!t) {
     const e = n.getAttribute("field");
@@ -135,10 +135,10 @@ function Z(n) {
   }
   return t;
 }
-function ue() {
+function de() {
   return Array.from(A.keys());
 }
-class ee {
+class Z {
   mountedViews = [];
   /**
    * Determines if this adapter can handle the given element.
@@ -148,11 +148,11 @@ class ee {
     const e = t.getAttribute("field");
     let r = S.get(t);
     if (!r && e) {
-      const s = A.get(e);
-      s && (s.renderer || s.editor) && (r = s, S.set(t, r));
+      const o = A.get(e);
+      o && (o.renderer || o.editor) && (r = o, S.set(t, r));
     }
-    const i = r?.renderer !== void 0, o = r?.editor !== void 0;
-    return r !== void 0 && (i || o);
+    const i = r?.renderer !== void 0, s = r?.editor !== void 0;
+    return r !== void 0 && (i || s);
   }
   /**
    * Creates a view renderer function that renders a React component
@@ -166,14 +166,14 @@ class ee {
    * allowing the grid to use its default rendering.
    */
   createRenderer(t) {
-    const e = Y(t);
+    const e = X(t);
     if (!e)
       return;
     const r = /* @__PURE__ */ new WeakMap();
     return (i) => {
-      const o = i.cellEl;
-      if (o) {
-        const u = r.get(o);
+      const s = i.cellEl;
+      if (s) {
+        const u = r.get(s);
         if (u)
           return b(() => {
             u.root.render(e(i));
@@ -183,14 +183,14 @@ class ee {
         const w = V(l);
         return b(() => {
           w.render(e(i));
-        }), r.set(o, { root: w, container: l, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
+        }), r.set(s, { root: w, container: l, lastRowIndex: i.rowIndex ?? -1 }), this.mountedViews.push({ root: w, container: l }), l;
       }
-      const s = document.createElement("div");
-      s.className = "react-cell-renderer", s.style.display = "contents";
-      const d = V(s);
+      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: s }), s;
+      }), this.mountedViews.push({ root: d, container: o }), o;
     };
   }
   /**
@@ -198,14 +198,14 @@ class ee {
    * with commit/cancel callbacks passed as props.
    */
   createEditor(t) {
-    const e = Z(t);
+    const e = Y(t);
     return e ? (r) => {
       const i = document.createElement("div");
       i.className = "react-cell-editor", i.style.display = "contents";
-      const o = V(i);
+      const s = V(i);
       return b(() => {
-        o.render(e(r));
-      }), this.mountedViews.push({ root: o, container: i }), i;
+        s.render(e(r));
+      }), this.mountedViews.push({ root: s, container: i }), i;
     } : () => document.createElement("div");
   }
   /**
@@ -213,15 +213,15 @@ class ee {
    * Renders React components for expandable detail rows.
    */
   createDetailRenderer(t) {
-    const e = H(t);
+    const e = W(t);
     if (e)
       return (r, i) => {
-        const o = document.createElement("div");
-        o.className = "react-detail-panel";
-        const s = { row: r, rowIndex: i }, d = V(o);
+        const s = document.createElement("div");
+        s.className = "react-detail-panel";
+        const o = { row: r, rowIndex: i }, d = V(s);
         return b(() => {
-          d.render(e(s));
-        }), this.mountedViews.push({ root: d, container: o }), o;
+          d.render(e(o));
+        }), this.mountedViews.push({ root: d, container: s }), s;
       };
   }
   /**
@@ -238,17 +238,17 @@ class ee {
    * Renders React components into tool panel containers.
    */
   createToolPanelRenderer(t) {
-    const e = Q(t);
+    const e = K(t);
     if (!e)
       return;
     const r = t.closest("tbw-grid");
     return (i) => {
-      const o = {
+      const s = {
         grid: r ?? i
-      }, s = V(i);
+      }, o = V(i);
       return b(() => {
-        s.render(e(o));
-      }), this.mountedViews.push({ root: s, container: i }), () => {
+        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];
@@ -288,40 +288,42 @@ class ee {
     }
   }
 }
-let P = !1, x = null;
+let P = !1, M = null;
 function q() {
-  return P || (x = new ee(), O.registerAdapter(x), P = !0), x;
+  return P || (M = new Z(), z.registerAdapter(M), P = !0), M;
 }
 q();
-function te(n, t, e) {
-  const r = n, i = r.getPlugin?.(t);
-  if (i && typeof i.refreshDetailRenderer == "function") {
-    i.refreshDetailRenderer();
+function ee(n, t) {
+  const e = n, r = e.getPluginByName?.("masterDetail");
+  if (r && typeof r.refreshDetailRenderer == "function") {
+    r.refreshDetailRenderer();
     return;
   }
-  const o = n.querySelector("tbw-grid-detail");
-  if (!o || !H(n)) return;
-  const d = e.createDetailRenderer(n);
-  if (!d) return;
-  const u = o.getAttribute("animation");
-  let l = "slide";
-  u === "false" ? l = !1 : u === "fade" && (l = "fade");
-  const w = o.getAttribute("showExpandColumn") !== "false", a = new t({
-    detailRenderer: d,
-    showExpandColumn: w,
-    animation: l
-  }), m = r.gridConfig || {}, E = m.plugins || [];
-  r.gridConfig = {
-    ...m,
-    plugins: [...E, a]
-  };
+  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;
+    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,
+      showExpandColumn: w,
+      animation: l
+    }), m = e.gridConfig || {}, E = m.plugins || [];
+    e.gridConfig = {
+      ...m,
+      plugins: [...E, a]
+    };
+  }).catch(() => {
+  });
 }
-const ae = _(function(t, e) {
+const ue = B(function(t, e) {
   const {
     rows: r,
     gridConfig: i,
-    columns: o,
-    fitMode: s,
+    columns: s,
+    fitMode: o,
     editOn: d,
     customStyles: u,
     className: l,
@@ -332,71 +334,68 @@ const ae = _(function(t, e) {
     onRowClick: v,
     onColumnStateChange: D,
     onSortChange: I
-  } = t, f = G(null), k = G(null), p = j(() => K(i), [i]);
+  } = t, f = G(null), k = G(null), h = O(() => J(i), [i]);
   return R(() => {
     f.current && (f.current.rows = r);
   }, [r]), R(() => {
-    f.current && p && (f.current.gridConfig = p);
-  }, [p]), R(() => {
-    f.current && o && (f.current.columns = o);
-  }, [o]), R(() => {
-    f.current && s !== void 0 && (f.current.fitMode = s);
+    f.current && h && (f.current.gridConfig = h);
+  }, [h]), R(() => {
+    f.current && s && (f.current.columns = s);
   }, [s]), R(() => {
+    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 h = q();
-    c.__frameworkAdapter = h;
+    const p = q();
+    c.__frameworkAdapter = p, ee(c, p);
     let g = !1;
     const y = requestAnimationFrame(() => {
-      g || (typeof c.refreshColumns == "function" && c.refreshColumns(), import("@toolbox-web/grid/all").then(({ MasterDetailPlugin: z }) => {
-        g || te(c, z, h);
-      }).catch(() => {
-      }), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
+      g || (typeof c.refreshColumns == "function" && c.refreshColumns(), typeof c.refreshShellHeader == "function" && c.refreshShellHeader());
     });
     return () => {
       g = !0, cancelAnimationFrame(y);
     };
   }, []), R(() => {
     if (!f.current || !u) return;
-    const c = f.current, h = "react-custom-styles";
+    const c = f.current, p = "react-custom-styles";
     let g = !0;
     return c.ready?.().then(() => {
-      g && u && (c.registerStyles?.(h, u), k.current = h);
+      g && u && (c.registerStyles?.(p, u), k.current = p);
     }), () => {
       g = !1, k.current && (c.unregisterStyles?.(k.current), k.current = null);
     };
   }, [u]), R(() => {
     const c = f.current;
     if (!c) return;
-    const h = [];
+    const p = [];
     if (m) {
       const g = ((y) => m(y.detail.rows));
-      c.addEventListener("rows-change", g), h.push(["rows-change", g]);
+      c.addEventListener("rows-change", g), p.push(["rows-change", g]);
     }
     if (E) {
       const g = ((y) => E(y));
-      c.addEventListener("cell-edit", g), h.push(["cell-edit", g]);
+      c.addEventListener("cell-edit", g), p.push(["cell-edit", g]);
     }
     if (v) {
       const g = ((y) => v(y));
-      c.addEventListener("row-click", g), h.push(["row-click", g]);
+      c.addEventListener("row-click", g), p.push(["row-click", g]);
     }
     if (D) {
       const g = ((y) => D(y));
-      c.addEventListener("column-state-change", g), h.push(["column-state-change", g]);
+      c.addEventListener("column-state-change", g), p.push(["column-state-change", g]);
     }
     if (I) {
       const g = ((y) => I(y));
-      c.addEventListener("sort-change", g), h.push(["sort-change", g]);
+      c.addEventListener("sort-change", g), p.push(["sort-change", g]);
     }
     return () => {
-      h.forEach(([g, y]) => {
+      p.forEach(([g, y]) => {
         c.removeEventListener(g, y);
       });
     };
-  }, [m, E, v, D, I]), B(
+  }, [m, E, v, D, I]), _(
     e,
     () => ({
       get element() {
@@ -414,8 +413,8 @@ const ae = _(function(t, e) {
       async toggleGroup(c) {
         return f.current?.toggleGroup?.(c);
       },
-      registerStyles(c, h) {
-        f.current?.registerStyles?.(c, h);
+      registerStyles(c, p) {
+        f.current?.registerStyles?.(c, p);
       },
       unregisterStyles(c) {
         f.current?.unregisterStyles?.(c);
@@ -427,8 +426,8 @@ const ae = _(function(t, e) {
     {
       ref: (c) => {
         if (f.current = c, c) {
-          const h = c;
-          i && (h.gridConfig = i), r && (h.rows = r), o && (h.columns = o);
+          const p = c;
+          h && (p.gridConfig = h), r && (p.rows = r), s && (p.columns = s);
         }
       },
       class: l,
@@ -437,14 +436,14 @@ const ae = _(function(t, e) {
     }
   );
 });
-function le(n) {
+function ae(n) {
   const {
     field: t,
     header: e,
     type: r,
     editable: i,
-    sortable: o,
-    resizable: s,
+    sortable: s,
+    resizable: o,
     width: d,
     minWidth: u,
     hidden: l,
@@ -456,20 +455,20 @@ function le(n) {
     format: D
   } = n, I = G(null), f = C(
     (c) => {
-      I.current = c, c && (a && U(c, a), m && X(c, m));
+      I.current = c, c && (a && Q(c, a), m && U(c, m));
     },
     [a, m, t]
-  ), k = typeof d == "number" ? `${d}px` : d, p = {
+  ), k = typeof d == "number" ? `${d}px` : d, h = {
     field: t,
     ref: f
   };
-  return e !== void 0 && (p.header = e), r !== void 0 && (p.type = r), i !== void 0 && (p.editable = i), o !== void 0 && (p.sortable = o), s !== void 0 && (p.resizable = s), k !== void 0 && (p.width = k), u !== void 0 && (p["min-width"] = u), l !== void 0 && (p.hidden = l), w !== void 0 && (p["lock-visible"] = w), v !== void 0 && (p.multi = v), D && (p["data-has-format"] = "true"), E && (p["data-has-options"] = "true"), /* @__PURE__ */ L("tbw-grid-column", { ...p });
+  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 });
 }
-function fe({ children: n }) {
+function le({ children: n }) {
   return /* @__PURE__ */ L("tbw-grid-tool-buttons", { children: n });
 }
-function ge() {
-  const n = G(null), [t, e] = M(!1), [r, i] = M(null);
+function fe() {
+  const n = G(null), [t, e] = x(!1), [r, i] = x(null);
   R(() => {
     const a = n.current;
     if (!a) return;
@@ -487,10 +486,10 @@ function ge() {
       m = !1;
     };
   }, []);
-  const o = C(async () => {
+  const s = C(async () => {
     const a = n.current;
     return a ? await a.getConfig?.() ?? null : null;
-  }, []), s = C(async () => {
+  }, []), o = C(async () => {
     const a = n.current;
     a && await a.forceLayout?.();
   }, []), d = C(async (a) => {
@@ -505,37 +504,37 @@ function ge() {
     ref: n,
     isReady: t,
     config: r,
-    getConfig: o,
-    forceLayout: s,
+    getConfig: s,
+    forceLayout: o,
     toggleGroup: d,
     registerStyles: u,
     unregisterStyles: l,
     getVisibleColumns: w
   };
 }
-function me(n, t, e, r = []) {
+function ge(n, t, e, r = []) {
   const i = G(e);
   R(() => {
     i.current = e;
   }, [e, ...r]), R(() => {
-    const o = n.current, s = o && "element" in o ? o.element : o;
-    if (!s) return;
+    const s = n.current, o = s && "element" in s ? s.element : s;
+    if (!o) return;
     const d = ((u) => {
       i.current(u);
     });
-    return s.addEventListener(t, d), () => {
-      s.removeEventListener(t, d);
+    return o.addEventListener(t, d), () => {
+      o.removeEventListener(t, d);
     };
   }, [n, t]);
 }
 export {
-  ae as DataGrid,
-  le as GridColumn,
-  ce as GridDetailPanel,
-  fe as GridToolButtons,
-  de as GridToolPanel,
-  ee as ReactGridAdapter,
-  ue as getRegisteredFields,
-  ge as useGrid,
-  me as useGridEvent
+  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
 };

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":"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"}
+{"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/data-grid.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@toolbox-web/grid-react",
-  "version": "0.0.2",
-  "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",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "keywords": [
-    "react",
-    "data-grid",
-    "web-component",
-    "toolbox-web"
-  ],
-  "license": "MIT",
-  "author": "Oystein Amundsen",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/OysteinAmundsen/toolbox.git",
-    "directory": "libs/grid-react"
-  },
-  "homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid-react#readme",
-  "bugs": {
-    "url": "https://github.com/OysteinAmundsen/toolbox/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@toolbox-web/grid": ">=0.2.0"
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "@toolbox-web/grid": ">=0.2.0"
-  }
-}
+{
+  "name": "@toolbox-web/grid-react",
+  "version": "0.0.4",
+  "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",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "react",
+    "data-grid",
+    "web-component",
+    "toolbox-web"
+  ],
+  "license": "MIT",
+  "author": "Oystein Amundsen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OysteinAmundsen/toolbox.git",
+    "directory": "libs/grid-react"
+  },
+  "homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid-react#readme",
+  "bugs": {
+    "url": "https://github.com/OysteinAmundsen/toolbox/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@toolbox-web/grid": ">=0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@toolbox-web/grid": ">=0.2.0"
+  }
+}