@ornery/ui-grid-react 0.1.5 → 0.1.7

package/src/gridStateMath.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import type { GridColumnDef } from '@ornery/ui-grid';
+import type { GridColumnDef } from '@ornery/ui-grid-core';
 import {
   buildGridTemplateColumns,
   computeViewportHeightPx,
@@ -18,15 +18,17 @@ describe('gridStateMath', () => {
   ];
 
   it('orders only visible columns by the provided column order', () => {
-    expect(orderVisibleColumns(columns, ['customer', 'revenue', 'status', 'owner']).map((column) => column.name)).toEqual([
-      'customer',
-      'revenue',
-      'status',
-    ]);
+    expect(
+      orderVisibleColumns(columns, ['customer', 'revenue', 'status', 'owner']).map(
+        (column) => column.name,
+      ),
+    ).toEqual(['customer', 'revenue', 'status']);
   });
 
   it('builds grid template columns deterministically', () => {
-    expect(buildGridTemplateColumns(orderVisibleColumns(columns, ['status', 'revenue', 'customer']))).toBe('2fr 120px minmax(11rem, max-content)');
+    expect(
+      buildGridTemplateColumns(orderVisibleColumns(columns, ['status', 'revenue', 'customer'])),
+    ).toBe('2fr 120px minmax(11rem, max-content)');
   });
 
   it('resolves benchmark iterations with a minimum of one', () => {
@@ -46,4 +48,4 @@ describe('gridStateMath', () => {
     expect(computeViewportRows(undefined, undefined)).toBe(13);
     expect(computeViewportRows(220, 44)).toBe(5);
   });
-});
+});

package/src/gridStateMath.ts

@@ -1,7 +1,10 @@
-import type { GridColumnDef } from '@ornery/ui-grid';
-import { gridColumnWidth } from '@ornery/ui-grid';
+import type { GridColumnDef } from '@ornery/ui-grid-core';
+import { gridColumnWidth } from '@ornery/ui-grid-core';
 
-export function orderVisibleColumns(columns: readonly GridColumnDef[], order: readonly string[]): GridColumnDef[] {
+export function orderVisibleColumns(
+  columns: readonly GridColumnDef[],
+  order: readonly string[],
+): GridColumnDef[] {
   return [...columns]
     .filter((column) => column.visible !== false)
     .sort((left, right) => order.indexOf(left.name) - order.indexOf(right.name));
@@ -11,11 +14,18 @@ export function buildGridTemplateColumns(columns: readonly GridColumnDef[]): str
   return columns.map((column) => gridColumnWidth(column)).join(' ');
 }
 
-export function resolveBenchmarkIterations(iterations?: number, configuredIterations?: number): number {
+export function resolveBenchmarkIterations(
+  iterations?: number,
+  configuredIterations?: number,
+): number {
   return Math.max(1, iterations ?? configuredIterations ?? 25);
 }
 
-export function formatPaginationSummary(totalItems: number, firstRowIndex: number, lastRowIndex: number): string {
+export function formatPaginationSummary(
+  totalItems: number,
+  firstRowIndex: number,
+  lastRowIndex: number,
+): string {
   if (totalItems === 0) {
     return '0-0 of 0';
   }
@@ -23,10 +33,13 @@ export function formatPaginationSummary(totalItems: number, firstRowIndex: numbe
   return `${firstRowIndex + 1}-${lastRowIndex + 1} of ${totalItems}`;
 }
 
-export function computeViewportHeightPx(viewportHeight?: number, autoViewportHeight?: number | null): string {
+export function computeViewportHeightPx(
+  viewportHeight?: number,
+  autoViewportHeight?: number | null,
+): string {
   return `${viewportHeight ?? autoViewportHeight ?? 560}px`;
 }
 
 export function computeViewportRows(viewportHeight?: number, rowHeight?: number): number {
   return Math.max(1, Math.ceil((viewportHeight ?? 560) / (rowHeight ?? 44)));
-}
+}

package/src/index.ts

@@ -1,11 +1,27 @@
 export { UiGrid } from './UiGrid';
 export type { UiGridProps } from './UiGrid';
+export { mountUiGrid } 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 {
+  orderVisibleColumns,
+  buildGridTemplateColumns,
+  resolveBenchmarkIterations,
+  formatPaginationSummary,
+  computeViewportHeightPx,
+  computeViewportRows,
+} from './gridStateMath';
+export {
+  enableReactUiGridWasmEngine,
+  registerReactUiGridWasmEngineFromModule,
+} from './rustWasmGridEngine';
 
 export type {
   GridOptions,
@@ -19,7 +35,7 @@ export type {
   GridBenchmarkResult,
   GridSavedState,
   SortState,
-} from '@ornery/ui-grid';
+} from '@ornery/ui-grid-core';
 
-export type { UiGridApi } from '@ornery/ui-grid';
-export { DEFAULT_GRID_LABELS } from '@ornery/ui-grid';
+export type { UiGridApi } from '@ornery/ui-grid-core';
+export { DEFAULT_GRID_LABELS } from '@ornery/ui-grid-core';

package/src/mountUiGrid.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { UiGrid, type UiGridProps } from './UiGrid';
+
+export function mountUiGrid(container: Element | DocumentFragment, props: UiGridProps): Root {
+  const root = createRoot(container);
+  root.render(React.createElement(UiGrid, props));
+  return root;
+}

package/src/rustWasmGridEngine.test.ts

@@ -3,10 +3,10 @@ import {
   activeGridEngineBackend,
   clearRustWasmGridEngine,
   defaultGridEngine,
-} from '@ornery/ui-grid';
+} from '@ornery/ui-grid-core';
 import { registerReactUiGridWasmEngineFromModule } from './rustWasmGridEngine';
-import { SORT_DIRECTIONS } from '@ornery/ui-grid';
-import type { BuildGridPipelineContext, PipelineResult } from '@ornery/ui-grid';
+import { SORT_DIRECTIONS } from '@ornery/ui-grid-core';
+import type { BuildGridPipelineContext, PipelineResult } from '@ornery/ui-grid-core';
 
 function createContext(): BuildGridPipelineContext {
   return {
@@ -53,4 +53,4 @@ describe('rustWasmGridEngine', () => {
     expect(defaultGridEngine.buildPipeline(createContext())).toBe(sentinel);
     expect(activeGridEngineBackend()).toBe('rust-wasm');
   });
-});
+});

package/src/rustWasmGridEngine.ts

@@ -1,7 +1,8 @@
-import type { BuildGridPipelineContext, PipelineResult } from '@ornery/ui-grid';
-import { registerRustWasmGridEngine } from '@ornery/ui-grid';
+import type { BuildGridPipelineContext, PipelineResult } from '@ornery/ui-grid-core';
+import { registerRustWasmGridEngine } from '@ornery/ui-grid-core';
 
-const uiGridWasmModulePath = '../../../dist/ui-grid-wasm/ui_grid_wasm.js';
+const uiGridWasmModulePath = '../../../dist/ui-grid-wasm-web/ui_grid_wasm.js';
+const uiGridWasmBinaryPath = '/dist/ui-grid-wasm-web/ui_grid_wasm_bg.wasm';
 
 type UiGridWasmModule = {
   build_pipeline_js(context: unknown): PipelineResult;
@@ -11,11 +12,12 @@ export function registerReactUiGridWasmEngineFromModule(module: UiGridWasmModule
   registerRustWasmGridEngine({
     buildPipeline(context: BuildGridPipelineContext): PipelineResult {
       return module.build_pipeline_js(context);
-    }
+    },
   });
 }
 
 export async function enableReactUiGridWasmEngine(): Promise<void> {
   const module = await import(/* @vite-ignore */ uiGridWasmModulePath);
+  await module.default(uiGridWasmBinaryPath);
   registerReactUiGridWasmEngineFromModule(module);
-}
+}

package/src/ui-grid.css

@@ -20,6 +20,26 @@
   --ui-grid-status-enterprise-color: var(--app-ui-grid-status-enterprise-color, #115e59);
   --ui-grid-status-pilot-bg: var(--app-ui-grid-status-pilot-bg, rgba(234, 88, 12, 0.14));
   --ui-grid-status-pilot-color: var(--app-ui-grid-status-pilot-color, #c2410c);
+  --ui-grid-pin-menu-open-z-index: var(--app-ui-grid-pin-menu-open-z-index, 8);
+  --ui-grid-pin-menu-z-index: var(--app-ui-grid-pin-menu-z-index, 20);
+  --ui-grid-pin-menu-gap: var(--app-ui-grid-pin-menu-gap, 0.25rem);
+  --ui-grid-pin-menu-padding: var(--app-ui-grid-pin-menu-padding, 0.25rem);
+  --ui-grid-pin-menu-radius: var(--app-ui-grid-pin-menu-radius, 999px);
+  --ui-grid-pin-menu-shadow: var(
+    --app-ui-grid-pin-menu-shadow,
+    0 10px 24px color-mix(in srgb, var(--ui-grid-cell-color) 10%, transparent)
+  );
+  --ui-grid-pin-menu-action-size: var(--app-ui-grid-pin-menu-action-size, 1.75rem);
+  --ui-grid-pin-control-collapsed-size: var(--app-ui-grid-pin-control-collapsed-size, 1px);
+  --ui-grid-pin-control-transition-duration: var(
+    --app-ui-grid-pin-control-transition-duration,
+    160ms
+  );
+  --ui-grid-pin-control-transition-easing: var(
+    --app-ui-grid-pin-control-transition-easing,
+    cubic-bezier(0.22, 1, 0.36, 1)
+  );
+  --ui-grid-pin-menu-scale-closed: var(--app-ui-grid-pin-menu-scale-closed, 0.72);
   display: block;
   color: var(--ui-grid-cell-color);
 }
@@ -39,12 +59,18 @@
 .grid-hero {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 1.5rem;
-  align-items: end;
+  align-items: flex-start;
   padding: 1rem 0;
   color: var(--ui-grid-cell-color);
 }
 
+.grid-hero > :first-child {
+  flex: 1 1 28rem;
+  min-width: min(100%, 20rem);
+}
+
 .ui-grid-host .eyebrow {
   margin: 0 0 0.5rem;
   text-transform: uppercase;
@@ -70,6 +96,9 @@
   gap: 1rem;
   align-items: center;
   flex-wrap: wrap;
+  flex: 0 1 auto;
+  margin-left: auto;
+  justify-content: flex-end;
 }
 
 .action {
@@ -168,6 +197,22 @@
 .filter-grid,
 .body-grid {
   display: grid;
+  width: max-content;
+  min-width: 100%;
+}
+
+.header-grid,
+.filter-grid {
+  position: sticky;
+  z-index: 3;
+}
+
+.header-grid {
+  top: 0;
+}
+
+.filter-grid {
+  top: var(--ui-grid-header-sticky-top, 0px);
 }
 
 .header-cell,
@@ -188,12 +233,36 @@
   align-items: center;
 }
 
+.header-cell[draggable='true'] {
+  cursor: grab;
+}
+
+.header-cell.is-dragging {
+  opacity: 0.6;
+}
+
+.header-cell.is-drag-target {
+  background: color-mix(in srgb, var(--ui-grid-accent) 9%, var(--ui-grid-header-background));
+  border: 1px dashed color-mix(in srgb, var(--ui-grid-accent) 45%, var(--ui-grid-border-color));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-grid-accent) 18%, transparent);
+}
+
 .header-cell.is-active {
   background: color-mix(in srgb, var(--ui-grid-accent) 8%, var(--ui-grid-header-background));
 }
 
+.header-cell.is-pin-menu-open {
+  z-index: var(--ui-grid-pin-menu-open-z-index);
+}
+
 .header-label {
   min-width: 0;
+  display: block;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+  hyphens: none;
 }
 
 .header-actions {
@@ -201,6 +270,8 @@
   align-items: center;
   gap: 0.4rem;
   justify-self: end;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
 }
 
 .header-action,
@@ -250,14 +321,131 @@
   color: var(--ui-grid-accent);
 }
 
+.pin-control {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  justify-items: center;
+  min-width: 2rem;
+  overflow: hidden;
+}
+
+.pin-trigger {
+  grid-area: 1 / 1;
+  transform-origin: center;
+  transition:
+    width var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    height var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    opacity var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    transform var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    border-color var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    background-color var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    color var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing);
+}
+
+.pin-menu {
+  grid-area: 1 / 1;
+  z-index: var(--ui-grid-pin-menu-z-index);
+  display: grid;
+  grid-auto-rows: var(--ui-grid-pin-menu-action-size);
+  gap: var(--ui-grid-pin-menu-gap);
+  padding: var(--ui-grid-pin-menu-padding);
+  border: 1px solid var(--ui-grid-border-color);
+  border-radius: var(--ui-grid-pin-menu-radius);
+  background: var(--ui-grid-surface);
+  box-shadow: var(--ui-grid-pin-menu-shadow);
+  justify-items: center;
+  align-items: center;
+  width: 2rem;
+  max-height: var(--ui-grid-pin-control-collapsed-size);
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(var(--ui-grid-pin-menu-scale-closed));
+  transform-origin: center;
+  transition:
+    max-height var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    opacity var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    transform var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    padding var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    border-color var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing),
+    box-shadow var(--ui-grid-pin-control-transition-duration)
+      var(--ui-grid-pin-control-transition-easing);
+}
+
+.pin-control-open {
+  align-items: start;
+}
+
+.pin-control-open .pin-trigger {
+  width: var(--ui-grid-pin-control-collapsed-size);
+  height: var(--ui-grid-pin-control-collapsed-size);
+  opacity: 0;
+  transform: scale(0.72);
+  pointer-events: none;
+}
+
+.pin-control-open .pin-menu {
+  max-height: calc(
+    (var(--ui-grid-pin-menu-action-size) * 2) + var(--ui-grid-pin-menu-gap) +
+      (var(--ui-grid-pin-menu-padding) * 2)
+  );
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+.pin-menu-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ui-grid-pin-menu-action-size);
+  height: var(--ui-grid-pin-menu-action-size);
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ui-grid-cell-color);
+  cursor: pointer;
+}
+
+.pin-menu-action:hover,
+.pin-menu-action:focus-visible {
+  outline: 0;
+  background: color-mix(in srgb, var(--ui-grid-accent) 12%, var(--ui-grid-surface));
+  color: var(--ui-grid-accent);
+}
+
+.pin-menu-action svg {
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
+
 .filter-cell {
   padding: 0.75rem 1rem 1rem;
   border-bottom: 1px solid var(--ui-grid-border-color);
   background: var(--ui-grid-header-background);
+  overflow: hidden;
 }
 
 .filter-cell input {
+  display: block;
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
   border: 1px solid var(--ui-grid-border-color);
   border-radius: var(--ui-grid-radius);
   background: var(--ui-grid-surface);
@@ -390,6 +578,17 @@
   width: 100%;
 }
 
+.grid-virtual-spacer {
+  position: relative;
+  width: max-content;
+  min-width: 100%;
+}
+
+.grid-virtual-body {
+  position: absolute;
+  left: 0;
+}
+
 .body-cell.align-center {
   text-align: center;
 }

package/src/useGridState.ts

@@ -88,19 +88,10 @@ import {
   FEATURE_AUTO_RESIZE,
   FEATURE_SAVE_STATE,
   FEATURE_PINNING,
-} from '@ornery/ui-grid';
-import type {
-  DisplayItem,
-  GroupItem,
-  ExpandableItem,
-  RowItem,
-  PipelineResult,
-  GridInfiniteScrollState,
-  GridMoveDirection,
-  GridCellTemplateContext,
-  GridExpandableTemplateContext,
-} from '@ornery/ui-grid';
-import {
+  buildInitialPinnedState,
+  computePinnedOffset,
+  isColumnPinnable,
+  isPinningEnabled,
   applyGridSortStateCommand,
   updateGridFilterCommand,
   clearGridFiltersCommand,
@@ -127,16 +118,6 @@ import {
   setGridInfiniteScrollDirectionsCommand,
   restoreGridStateCommand,
   pinGridColumnCommand,
-} from '../../ui-grid/src/lib/grid/ui-grid.commands';
-import {
-  buildInitialPinnedState,
-  computePinnedOffset,
-  isColumnPinnable,
-  isPinningEnabled,
-  PinDirection,
-  PinnedColumnState,
-} from '../../ui-grid/src/lib/grid/grid.core';
-import {
   raiseGridRenderingComplete,
   raiseGridRowsRendered,
   raiseGridRowsVisibleChanged,
@@ -145,8 +126,22 @@ import {
   raiseGridScrollBegin,
   raiseGridScrollEnd,
   raiseGridBenchmarkComplete,
-} from '../../ui-grid/src/lib/grid/ui-grid.events';
-import { downloadGridCsvFile, observeGridHostSize } from '../../ui-grid/src/lib/grid/ui-grid.host';
+  downloadGridCsvFile,
+  observeGridHostSize,
+} from '@ornery/ui-grid-core';
+import type {
+  DisplayItem,
+  GroupItem,
+  ExpandableItem,
+  RowItem,
+  PipelineResult,
+  GridInfiniteScrollState,
+  GridMoveDirection,
+  GridCellTemplateContext,
+  GridExpandableTemplateContext,
+  PinDirection,
+  PinnedColumnState,
+} from '@ornery/ui-grid-core';
 
 function escapeCssSelectorValue(value: string): string {
   const nativeEscape = globalThis.CSS?.escape;
@@ -167,9 +162,7 @@ function escapeCssSelectorValue(value: string): string {
     const isControlCharacter = (codePoint >= 0x0001 && codePoint <= 0x001f) || codePoint === 0x007f;
     const startsWithDigit = index === 0 && codePoint >= 0x0030 && codePoint <= 0x0039;
     const secondCharDigitAfterHyphen =
-      index === 1 &&
-      codePoint >= 0x0030 && codePoint <= 0x0039 &&
-      value.charCodeAt(0) === 0x002d;
+      index === 1 && codePoint >= 0x0030 && codePoint <= 0x0039 && value.charCodeAt(0) === 0x002d;
 
     if (isControlCharacter || startsWithDigit || secondCharDigitAfterHyphen) {
       output += `\\${codePoint.toString(16)} `;
@@ -313,6 +306,7 @@ export interface UseGridStateResult {
   toggleRowExpansion: (row: GridRow, event?: React.MouseEvent) => void;
   toggleTreeRow: (row: GridRow, event?: React.MouseEvent) => void;
   moveColumn: (fromIndex: number, toIndex: number) => void;
+  moveVisibleColumn: (columnName: string, targetColumnName: string) => void;
   nextPage: () => void;
   previousPage: () => void;
   onPageSizeChange: (value: string) => void;
@@ -398,8 +392,27 @@ export function useGridState(
   const rowSize = options.rowHeight ?? 44;
 
   const visibleColumns = useMemo(() => {
-    return orderVisibleColumns(options.columnDefs, columnOrder);
-  }, [options.columnDefs, columnOrder]);
+    const orderedColumns = orderVisibleColumns(options.columnDefs, columnOrder);
+    const pinnedEntries = Object.entries(pinnedColumns);
+    if (pinnedEntries.length === 0) {
+      return orderedColumns;
+    }
+
+    const columnByName = new Map(orderedColumns.map((column) => [column.name, column]));
+    const pinnedLeft = pinnedEntries
+      .filter(([, direction]) => direction === 'left')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const pinnedRight = pinnedEntries
+      .filter(([, direction]) => direction === 'right')
+      .map(([columnName]) => columnByName.get(columnName))
+      .filter((column): column is GridColumnDef => column !== undefined);
+    const centerColumns = orderedColumns.filter(
+      (column) => pinnedColumns[column.name] === undefined,
+    );
+
+    return [...pinnedLeft, ...centerColumns, ...pinnedRight];
+  }, [options.columnDefs, columnOrder, pinnedColumns]);
 
   const visibleColumnsRef = useRef(visibleColumns);
   visibleColumnsRef.current = visibleColumns;
@@ -1559,6 +1572,18 @@ export function useGridState(
     );
   }, []);
 
+  const moveVisibleColumnFn = useCallback((columnName: string, targetColumnName: string): void => {
+    moveGridVisibleColumnCommand(
+      gridApiRef.current!,
+      FEATURE_COLUMN_MOVING && optionsRef.current.enableColumnMoving === true,
+      columnOrderRef.current,
+      visibleColumnsRef.current.map((column) => column.name),
+      columnName,
+      targetColumnName,
+      (order) => setColumnOrder(order),
+    );
+  }, []);
+
   const nextPageFn = useCallback((): void => {
     seekPageFn(getCurrentPageValueFn() + 1);
   }, [seekPageFn, getCurrentPageValueFn]);
@@ -1706,6 +1731,7 @@ export function useGridState(
     toggleRowExpansion: toggleRowExpansionFn,
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
+    moveVisibleColumn: moveVisibleColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,

package/src/useVirtualScroll.ts

@@ -13,6 +13,7 @@ export interface UseVirtualScrollResult {
   totalHeight: number;
   offsetY: number;
   onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+  setScrollTop: (scrollTop: number) => void;
   viewportRef: React.RefObject<HTMLDivElement | null>;
   scrollTop: number;
 }
@@ -39,6 +40,7 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
     totalHeight: virtualWindow.totalHeight,
     offsetY: virtualWindow.offsetY,
     onScroll,
+    setScrollTop,
     viewportRef,
     scrollTop,
   };

package/src/vanillaAdapter.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { mountUiGridCustomElement } from './vanillaAdapter';
+
+describe('mountUiGridCustomElement', () => {
+  it('mounts a custom element and applies grid options', async () => {
+    const host = document.createElement('div');
+    const ensureDefined = vi.fn(async (tagName: string) => {
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, class extends HTMLElement {});
+      }
+    });
+
+    const options = {
+      id: 'react-adapter-grid',
+      data: [{ name: 'Alice' }],
+      columnDefs: [{ name: 'name' }],
+    };
+
+    const mounted = await mountUiGridCustomElement(host, {
+      options,
+      tagName: 'ui-grid-react-adapter-test',
+      ensureDefined,
+    });
+
+    expect(ensureDefined).toHaveBeenCalledWith('ui-grid-react-adapter-test');
+    expect(host.firstElementChild).toBe(mounted.element);
+    expect(mounted.element.options).toBe(options);
+
+    mounted.unmount();
+    expect(host.childElementCount).toBe(0);
+  });
+});

package/src/vanillaAdapter.ts

@@ -0,0 +1,36 @@
+import type { GridOptions } from '@ornery/ui-grid-core';
+
+export interface MountUiGridCustomElementOptions {
+  options: GridOptions;
+  tagName?: string;
+  ensureDefined?: (tagName: string) => Promise<void> | void;
+}
+
+export interface MountedUiGridCustomElement {
+  element: HTMLElement & { options: GridOptions };
+  unmount: () => void;
+}
+
+export async function mountUiGridCustomElement(
+  container: Element,
+  mountOptions: MountUiGridCustomElementOptions,
+): Promise<MountedUiGridCustomElement> {
+  const tagName = mountOptions.tagName ?? 'ui-grid-element';
+
+  if (mountOptions.ensureDefined) {
+    await mountOptions.ensureDefined(tagName);
+  }
+
+  const element = document.createElement(tagName) as HTMLElement & { options: GridOptions };
+  element.options = mountOptions.options;
+  container.replaceChildren(element);
+
+  return {
+    element,
+    unmount: () => {
+      if (container.firstElementChild === element) {
+        container.replaceChildren();
+      }
+    },
+  };
+}

package/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "paths": {}
+  }
+}