@ornery/ui-grid-react 0.1.10 → 1.0.1

package/AGENTS.md

@@ -0,0 +1,67 @@
+# @ornery/ui-grid-react — Agent Instructions
+
+Thin React wrapper. Mounts the vanilla `<ui-grid-element>` custom element and projects React render functions into it via the slot-based portal system.
+
+## Build & Test
+
+```bash
+npm run build --prefix projects/ui-grid-react   # tsup → dist/
+npm test --prefix projects/ui-grid-react        # vitest (18 tests)
+```
+
+Depends on `@ornery/ui-grid-core` + `@ornery/ui-grid-vanilla` — build both first.
+
+## Key Files
+
+| File | Responsibility |
+|------|---------------|
+| `UiGrid.tsx` | React component wrapping the vanilla element |
+| `mountUiGrid.tsx` | Imperative mount API: `mountUiGrid(host, { options, cellRenderers })` |
+| `vanillaAdapter.ts` | Bridges React lifecycle to the vanilla element (options, event listeners) |
+| `useGridState.ts` | React hook for grid state subscription |
+| `useVirtualScroll.ts` | Virtual scroll hook |
+| `gridStateMath.ts` | Pure math for grid layout calculations |
+| `rustWasmGridEngine.ts` | Optional WASM engine integration |
+| `ui-grid.css` | Wrapper-level styles |
+
+## Architecture
+
+### Mount Pattern
+
+```tsx
+mountUiGrid(hostElement, {
+  options: gridOptions,
+  cellRenderers: {
+    status: ({ value }) => <Pill>{value}</Pill>,
+    price: ({ value, row }) => styledCell(String(value), row.color),
+  },
+});
+```
+
+### Cell Renderer Flow
+
+1. `mountUiGrid` calls `el.setFrameworkRenderedSlots({ cells: Object.keys(cellRenderers) })`
+2. Listens for `cellSlotsChanged` events
+3. For each added slot: calls the matching render function, creates a React portal, appends to light DOM with `slot` attribute
+4. For removed slots: unmounts the portal
+
+### `styledCell` Helper
+
+Quick inline-styled cell without creating a full component:
+```tsx
+styledCell(text: string, color: string, extraStyles?: CSSProperties)
+```
+
+## Conventions
+
+- No class components — functional components + hooks only
+- External deps: `react`, `react-dom` (peer), `@ornery/ui-grid-core`, `@ornery/ui-grid-vanilla`
+- The React wrapper never renders grid cells itself — it delegates to the vanilla element
+- `cellRenderers` map keys must match `columnDef.name` values
+
+## Do NOT
+
+- Import from `dist/` paths — use tsconfig path mappings
+- Call `setFrameworkRenderedSlots` on every render — only when `cellRenderers` keys change
+- Forget to clean up portals on unmount
+- Add Angular or vanilla rendering logic here — this package only bridges React ↔ vanilla

package/dist/UiGrid.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
-import type { GridOptions, GridCellTemplateContext, GridExpandableTemplateContext, GridHeaderTemplateContext, UiGridApi } from '@ornery/ui-grid-core';
+import type { GridOptions, GridCellTemplateContext, UiGridApi } from '@ornery/ui-grid-core';
+export interface UiGridCellRenderers {
+    [columnName: string]: (context: GridCellTemplateContext) => React.ReactNode;
+}
 export interface UiGridProps {
     options: GridOptions;
     onRegisterApi?: (api: UiGridApi) => void;
-    cellRenderer?: (context: GridCellTemplateContext) => React.ReactNode;
-    headerRenderer?: (context: GridHeaderTemplateContext) => React.ReactNode;
-    expandableRenderer?: (context: GridExpandableTemplateContext) => React.ReactNode;
+    cellRenderers?: UiGridCellRenderers;
     className?: string;
 }
-export declare function UiGrid({ options, onRegisterApi, cellRenderer, headerRenderer, expandableRenderer, className, }: UiGridProps): import("react/jsx-runtime").JSX.Element;
+export declare function UiGrid({ options, onRegisterApi, cellRenderers, className }: UiGridProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=UiGrid.d.ts.map

package/dist/UiGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EACvB,6BAA6B,EAC7B,yBAAyB,EACzB,SAAS,EAGV,MAAM,sBAAsB,CAAC;AAK9B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,KAAK,CAAC,SAAS,CAAC;IACzE,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,6BAA6B,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,aAAa,EACb,YAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,SAAS,GACV,EAAE,WAAW,2CA+sBb"}
+{"version":3,"file":"UiGrid.d.ts","sourceRoot":"","sources":["../src/UiGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,WAAW,EACX,uBAAuB,EAEvB,SAAS,EACV,MAAM,sBAAsB,CAAC;AAQ9B,MAAM,WAAW,mBAAmB;IAClC,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,OAAO,EAAE,uBAAuB,KAAK,KAAK,CAAC,SAAS,CAAC;CAC7E;AAED,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,WAAW,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,wBAAgB,MAAM,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,WAAW,2CAqLvF"}

package/dist/gridStateMath.d.ts

@@ -3,6 +3,6 @@ export declare function orderVisibleColumns(columns: readonly GridColumnDef[], o
 export declare function buildGridTemplateColumns(columns: readonly GridColumnDef[]): string;
 export declare function resolveBenchmarkIterations(iterations?: number, configuredIterations?: number): number;
 export declare function formatPaginationSummary(totalItems: number, firstRowIndex: number, lastRowIndex: number): string;
-export declare function computeViewportHeightPx(viewportHeight?: number, autoViewportHeight?: number | null): string;
-export declare function computeViewportRows(viewportHeight?: number, rowHeight?: number): number;
+export declare function computeViewportHeightPx(autoViewportHeight?: number | null, minRowsToShow?: number, rowHeight?: number): string;
+export declare function computeViewportRows(autoViewportHeight?: number | null, rowHeight?: number, minRowsToShow?: number): number;
 //# sourceMappingURL=gridStateMath.d.ts.map

package/dist/gridStateMath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridStateMath.d.ts","sourceRoot":"","sources":["../src/gridStateMath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,KAAK,EAAE,SAAS,MAAM,EAAE,GACvB,aAAa,EAAE,CAIjB;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,GAAG,MAAM,CAElF;AAED,wBAAgB,0BAA0B,CACxC,UAAU,CAAC,EAAE,MAAM,EACnB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,MAAM,CAER;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,GACnB,MAAM,CAMR;AAED,wBAAgB,uBAAuB,CACrC,cAAc,CAAC,EAAE,MAAM,EACvB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,GACjC,MAAM,CAER;AAED,wBAAgB,mBAAmB,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAEvF"}
+{"version":3,"file":"gridStateMath.d.ts","sourceRoot":"","sources":["../src/gridStateMath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,SAAS,aAAa,EAAE,EACjC,KAAK,EAAE,SAAS,MAAM,EAAE,GACvB,aAAa,EAAE,CAIjB;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,SAAS,aAAa,EAAE,GAAG,MAAM,CAElF;AAED,wBAAgB,0BAA0B,CACxC,UAAU,CAAC,EAAE,MAAM,EACnB,oBAAoB,CAAC,EAAE,MAAM,GAC5B,MAAM,CAER;AAED,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,GACnB,MAAM,CAMR;AAED,wBAAgB,uBAAuB,CACrC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,EAClC,aAAa,CAAC,EAAE,MAAM,EACtB,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAGR;AAED,wBAAgB,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAG1H"}

package/dist/index.d.ts

@@ -1,13 +1,7 @@
 export { UiGrid } from './UiGrid';
-export type { UiGridProps } from './UiGrid';
-export { mountUiGrid, updateUiGrid, styledCell } from './mountUiGrid';
+export type { UiGridProps, UiGridCellRenderers } from './UiGrid';
+export { mountUiGrid, updateUiGrid, styledCell, datePickerCell } from './mountUiGrid';
 export { mountUiGridCustomElement, type MountUiGridCustomElementOptions, type MountedUiGridCustomElement, } from './vanillaAdapter';
-export { useGridState } from './useGridState';
-export type { UseGridStateResult } from './useGridState';
-export { useVirtualScroll } from './useVirtualScroll';
-export type { UseVirtualScrollOptions, UseVirtualScrollResult } from './useVirtualScroll';
-export { orderVisibleColumns, buildGridTemplateColumns, resolveBenchmarkIterations, formatPaginationSummary, computeViewportHeightPx, computeViewportRows, } from './gridStateMath';
-export { enableReactUiGridWasmEngine, registerReactUiGridWasmEngineFromModule, } from './rustWasmGridEngine';
 export type { GridOptions, GridColumnDef, GridRow, GridRecord, GridLabels, GridCellTemplateContext, GridExpandableTemplateContext, GridCellEditableContext, GridBenchmarkResult, GridSavedState, SortState, } from '@ornery/ui-grid-core';
 export type { UiGridApi } from '@ornery/ui-grid-core';
 export { DEFAULT_GRID_LABELS } from '@ornery/ui-grid-core';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EACL,wBAAwB,EACxB,KAAK,+BAA+B,EACpC,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,uBAAuB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,2BAA2B,EAC3B,uCAAuC,GACxC,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,aAAa,EACb,OAAO,EACP,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,SAAS,GACV,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EACL,wBAAwB,EACxB,KAAK,+BAA+B,EACpC,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAE1B,YAAY,EACV,WAAW,EACX,aAAa,EACb,OAAO,EACP,UAAU,EACV,UAAU,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,SAAS,GACV,MAAM,sBAAsB,CAAC;AAE9B,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}