@toolbox-web/grid-react 0.0.2

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

@@ -0,0 +1,107 @@
+import { CellRenderContext, ColumnEditorContext, ColumnEditorSpec, ColumnViewRenderer, FrameworkAdapter } from '../../../../dist/libs/grid/index.d.ts';
+import { ReactNode } from 'react';
+/**
+ * Register a React cell renderer for a column element.
+ * Called by GridColumn when it has a children render prop.
+ */
+export declare function registerColumnRenderer(element: HTMLElement, renderer: (ctx: CellRenderContext<unknown, unknown>) => ReactNode): void;
+/**
+ * Register a React cell editor for a column element.
+ * Called by GridColumn when it has an editor prop.
+ */
+export declare function registerColumnEditor(element: HTMLElement, editor: (ctx: ColumnEditorContext<unknown, unknown>) => ReactNode): void;
+/**
+ * Get the renderer registered for a column element.
+ * Falls back to field-based lookup if WeakMap lookup fails.
+ */
+export declare function getColumnRenderer(element: HTMLElement): ((ctx: CellRenderContext<unknown, unknown>) => ReactNode) | undefined;
+/**
+ * Get the editor registered for a column element.
+ * Falls back to field-based lookup if WeakMap lookup fails.
+ */
+export declare function getColumnEditor(element: HTMLElement): ((ctx: ColumnEditorContext<unknown, unknown>) => ReactNode) | undefined;
+/**
+ * Debug helper: Get list of registered fields.
+ * @internal
+ */
+export declare function getRegisteredFields(): string[];
+/**
+ * Framework adapter that enables React component integration
+ * with the grid's light DOM configuration API.
+ *
+ * ## Usage
+ *
+ * The adapter is automatically registered when using the DataGrid component.
+ * For advanced use cases, you can manually register:
+ *
+ * ```tsx
+ * import { GridElement } from '@toolbox-web/grid';
+ * import { ReactGridAdapter } from '@toolbox-web/grid-react';
+ *
+ * // One-time registration
+ * GridElement.registerAdapter(new ReactGridAdapter());
+ * ```
+ *
+ * ## Declarative usage with DataGrid:
+ *
+ * ```tsx
+ * <DataGrid rows={data} gridConfig={config}>
+ *   <GridColumn field="status">
+ *     {(ctx) => <StatusBadge value={ctx.value} />}
+ *   </GridColumn>
+ *   <GridColumn field="name" editor={(ctx) => (
+ *     <NameEditor value={ctx.value} onCommit={ctx.commit} onCancel={ctx.cancel} />
+ *   )} />
+ * </DataGrid>
+ * ```
+ */
+export declare class ReactGridAdapter implements FrameworkAdapter {
+    private mountedViews;
+    /**
+     * Determines if this adapter can handle the given element.
+     * Checks if a renderer or editor is registered for this element.
+     */
+    canHandle(element: HTMLElement): boolean;
+    /**
+     * Creates a view renderer function that renders a React component
+     * and returns its container DOM element.
+     *
+     * Uses a cell cache to reuse React roots for performance - instead of
+     * creating new roots on each render, we reuse existing ones and just
+     * call root.render() with new data.
+     *
+     * Returns undefined if no renderer is registered for this element,
+     * allowing the grid to use its default rendering.
+     */
+    createRenderer<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnViewRenderer<TRow, TValue>;
+    /**
+     * Creates an editor spec that renders a React component
+     * with commit/cancel callbacks passed as props.
+     */
+    createEditor<TRow = unknown, TValue = unknown>(element: HTMLElement): ColumnEditorSpec<TRow, TValue>;
+    /**
+     * Creates a detail renderer function for MasterDetailPlugin.
+     * Renders React components for expandable detail rows.
+     */
+    createDetailRenderer<TRow = unknown>(gridElement: HTMLElement): ((row: TRow, rowIndex: number) => HTMLElement) | undefined;
+    /**
+     * Framework adapter hook called by MasterDetailPlugin during attach().
+     * Parses the <tbw-grid-detail> element and returns a React-based renderer.
+     */
+    parseDetailElement<TRow = unknown>(detailElement: Element): ((row: TRow, rowIndex: number) => HTMLElement | string) | undefined;
+    /**
+     * Creates a tool panel renderer from a light DOM element.
+     * Renders React components into tool panel containers.
+     */
+    createToolPanelRenderer(element: HTMLElement): ((container: HTMLElement) => void | (() => void)) | undefined;
+    /**
+     * Clean up all mounted React roots.
+     * Call this when the grid is unmounted.
+     */
+    destroy(): void;
+    /**
+     * Unmount a specific container (called when cell is recycled).
+     */
+    unmount(container: HTMLElement): void;
+}
+//# sourceMappingURL=react-grid-adapter.d.ts.map

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

@@ -0,0 +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"}

package/lib/use-grid-event.d.ts

@@ -0,0 +1,73 @@
+import { DataGridElement } from '../../../../dist/libs/grid/index.d.ts';
+/**
+ * Type-safe grid event names and their payload types.
+ */
+export type GridEventMap<TRow = unknown> = {
+    'rows-change': CustomEvent<{
+        rows: TRow[];
+    }>;
+    'cell-edit': CustomEvent<{
+        row: TRow;
+        field: string;
+        oldValue: unknown;
+        newValue: unknown;
+    }>;
+    'row-click': CustomEvent<{
+        row: TRow;
+        rowIndex: number;
+        originalEvent: MouseEvent;
+    }>;
+    'column-state-change': CustomEvent<{
+        columns: unknown[];
+    }>;
+    'sort-change': CustomEvent<{
+        field: string;
+        direction: 'asc' | 'desc';
+    } | null>;
+    'selection-change': CustomEvent<{
+        selectedRows: TRow[];
+        selectedIndices: number[];
+    }>;
+    'filter-change': CustomEvent<{
+        filters: Record<string, unknown>;
+    }>;
+    'group-toggle': CustomEvent<{
+        key: string;
+        expanded: boolean;
+    }>;
+};
+/**
+ * Hook for subscribing to grid events with automatic cleanup.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DataGrid, useGridEvent, DataGridRef } from '@toolbox-web/grid-react';
+ * import { useRef } from 'react';
+ *
+ * function MyComponent() {
+ *   const gridRef = useRef<DataGridRef>(null);
+ *
+ *   // Subscribe to cell edit events
+ *   useGridEvent(gridRef, 'cell-edit', (event) => {
+ *     console.log('Cell edited:', event.detail);
+ *   });
+ *
+ *   // Subscribe to row clicks
+ *   useGridEvent(gridRef, 'row-click', (event) => {
+ *     console.log('Row clicked:', event.detail.row);
+ *   });
+ *
+ *   return <DataGrid ref={gridRef} rows={rows} />;
+ * }
+ * ```
+ *
+ * @param gridRef - Ref to the DataGrid component or element
+ * @param eventName - Name of the grid event to listen for
+ * @param handler - Event handler function
+ * @param deps - Optional dependency array (handler is stable if omitted)
+ */
+export declare function useGridEvent<TRow = unknown, K extends keyof GridEventMap<TRow> = keyof GridEventMap<TRow>>(gridRef: React.RefObject<{
+    element?: DataGridElement | null;
+} | DataGridElement | null>, eventName: K, handler: (event: GridEventMap<TRow>[K]) => void, deps?: unknown[]): void;
+//# sourceMappingURL=use-grid-event.d.ts.map

package/lib/use-grid-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid-event.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/use-grid-event.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGzD;;GAEG;AACH,MAAM,MAAM,YAAY,CAAC,IAAI,GAAG,OAAO,IAAI;IACzC,aAAa,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC,CAAC;IAC7C,WAAW,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,CAAC;IAC7F,WAAW,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,UAAU,CAAA;KAAE,CAAC,CAAC;IACrF,qBAAqB,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,EAAE,CAAA;KAAE,CAAC,CAAC;IAC3D,aAAa,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAChF,kBAAkB,EAAE,WAAW,CAAC;QAAE,YAAY,EAAE,IAAI,EAAE,CAAC;QAAC,eAAe,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC,CAAC;IACrF,eAAe,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC;IACnE,cAAc,EAAE,WAAW,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;CACjE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAG,OAAO,EAAE,CAAC,SAAS,MAAM,YAAY,CAAC,IAAI,CAAC,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,EACxG,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAAE,OAAO,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CAAE,GAAG,eAAe,GAAG,IAAI,CAAC,EACvF,SAAS,EAAE,CAAC,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,EAC/C,IAAI,GAAE,OAAO,EAAO,GACnB,IAAI,CA0BN"}

package/lib/use-grid.d.ts

@@ -0,0 +1,63 @@
+import { ColumnConfig, DataGridElement, GridConfig } from '../../../../dist/libs/grid/index.d.ts';
+/**
+ * Extended interface for DataGridElement with all methods we need.
+ */
+interface ExtendedGridElement extends DataGridElement {
+    toggleGroup?: (key: string) => Promise<void>;
+}
+/**
+ * Return type for useGrid hook.
+ */
+export interface UseGridReturn<TRow = unknown> {
+    /** Ref to attach to the DataGrid component */
+    ref: React.RefObject<ExtendedGridElement | null>;
+    /** Whether the grid is ready */
+    isReady: boolean;
+    /** Current grid configuration */
+    config: GridConfig<TRow> | null;
+    /** Get the effective configuration */
+    getConfig: () => Promise<GridConfig<TRow> | null>;
+    /** Force a layout recalculation */
+    forceLayout: () => Promise<void>;
+    /** Toggle a group row */
+    toggleGroup: (key: string) => Promise<void>;
+    /** Register custom styles */
+    registerStyles: (id: string, css: string) => void;
+    /** Unregister custom styles */
+    unregisterStyles: (id: string) => void;
+    /** Get current visible columns */
+    getVisibleColumns: () => ColumnConfig<TRow>[];
+}
+/**
+ * Hook for programmatic access to a grid instance.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { DataGrid, useGrid } from '@toolbox-web/grid-react';
+ *
+ * function MyComponent() {
+ *   const { ref, isReady, getConfig, forceLayout } = useGrid<Employee>();
+ *
+ *   const handleResize = async () => {
+ *     await forceLayout();
+ *   };
+ *
+ *   const handleExport = async () => {
+ *     const config = await getConfig();
+ *     console.log('Exporting with columns:', config?.columns);
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <button onClick={handleResize}>Force Layout</button>
+ *       <button onClick={handleExport} disabled={!isReady}>Export</button>
+ *       <DataGrid ref={ref} rows={rows} />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useGrid<TRow = unknown>(): UseGridReturn<TRow>;
+export {};
+//# sourceMappingURL=use-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-grid.d.ts","sourceRoot":"","sources":["../../../../libs/grid-react/src/lib/use-grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnF;;GAEG;AACH,UAAU,mBAAoB,SAAQ,eAAe;IACnD,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9C;AAED;;GAEG;AACH,MAAM,WAAW,aAAa,CAAC,IAAI,GAAG,OAAO;IAC3C,8CAA8C;IAC9C,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACjD,gCAAgC;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,MAAM,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,SAAS,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAClD,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;IACvC,kCAAkC;IAClC,iBAAiB,EAAE,MAAM,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;CAC/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,OAAO,CAAC,IAAI,GAAG,OAAO,KAAK,aAAa,CAAC,IAAI,CAAC,CA6E7D"}

package/package.json

@@ -0,0 +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"
+  }
+}