@ornery/ui-grid-react 0.1.5 → 0.1.6

package/dist/mountUiGrid.d.ts

@@ -0,0 +1,4 @@
+import { type Root } from 'react-dom/client';
+import { type UiGridProps } from './UiGrid';
+export declare function mountUiGrid(container: Element | DocumentFragment, props: UiGridProps): Root;
+//# sourceMappingURL=mountUiGrid.d.ts.map

package/dist/mountUiGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountUiGrid.d.ts","sourceRoot":"","sources":["../src/mountUiGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,wBAAgB,WAAW,CAAC,SAAS,EAAE,OAAO,GAAG,gBAAgB,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI,CAI3F"}

package/dist/rustWasmGridEngine.d.ts

@@ -0,0 +1,8 @@
+import type { PipelineResult } from '@ornery/ui-grid';
+type UiGridWasmModule = {
+    build_pipeline_js(context: unknown): PipelineResult;
+};
+export declare function registerReactUiGridWasmEngineFromModule(module: UiGridWasmModule): void;
+export declare function enableReactUiGridWasmEngine(): Promise<void>;
+export {};
+//# sourceMappingURL=rustWasmGridEngine.d.ts.map

package/dist/rustWasmGridEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rustWasmGridEngine.d.ts","sourceRoot":"","sources":["../src/rustWasmGridEngine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4B,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMhF,KAAK,gBAAgB,GAAG;IACtB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,cAAc,CAAC;CACrD,CAAC;AAEF,wBAAgB,uCAAuC,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAMtF;AAED,wBAAsB,2BAA2B,IAAI,OAAO,CAAC,IAAI,CAAC,CAIjE"}

package/dist/{index.d.mts → useGridState.d.ts}

@@ -1,18 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
-import { GridOptions, UiGridApi, GridCellTemplateContext, GridExpandableTemplateContext, PipelineResult, GridColumnDef, GridLabels, SortState, GridCellPosition, GridBenchmarkResult, GridInfiniteScrollState, DisplayItem, GroupItem, ExpandableItem, RowItem, GridRow } from '@ornery/ui-grid';
-export { DEFAULT_GRID_LABELS, GridBenchmarkResult, GridCellEditableContext, GridCellTemplateContext, GridColumnDef, GridExpandableTemplateContext, GridLabels, GridOptions, GridRecord, GridRow, GridSavedState, SortState, UiGridApi } from '@ornery/ui-grid';
-
-interface UiGridProps {
-    options: GridOptions;
-    onRegisterApi?: (api: UiGridApi) => void;
-    cellRenderer?: (context: GridCellTemplateContext) => React$1.ReactNode;
-    expandableRenderer?: (context: GridExpandableTemplateContext) => React$1.ReactNode;
-    className?: string;
-}
-declare function UiGrid({ options, onRegisterApi, cellRenderer, expandableRenderer, className, }: UiGridProps): react_jsx_runtime.JSX.Element;
-
-interface UseGridStateResult {
+import { UiGridApi, GridOptions, GridColumnDef, GridRow, GridBenchmarkResult, GridCellPosition, GridLabels, SortState } from '@ornery/ui-grid';
+import type { DisplayItem, GroupItem, ExpandableItem, RowItem, PipelineResult, GridInfiniteScrollState, GridCellTemplateContext, GridExpandableTemplateContext } from '@ornery/ui-grid';
+export interface UseGridStateResult {
     pipeline: PipelineResult;
     visibleColumns: GridColumnDef[];
     labels: GridLabels;
@@ -118,38 +106,5 @@ interface UseGridStateResult {
     exportCsv: () => void;
     onViewportScroll: (startIndex: number) => void;
 }
-declare function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridApi) => void): UseGridStateResult;
-
-interface UseVirtualScrollOptions {
-    itemCount: number;
-    itemSize: number;
-    viewportHeight: number;
-    overscan?: number;
-}
-interface UseVirtualScrollResult {
-    visibleRange: {
-        start: number;
-        end: number;
-    };
-    totalHeight: number;
-    offsetY: number;
-    onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
-    viewportRef: React.RefObject<HTMLDivElement | null>;
-    scrollTop: number;
-}
-declare function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollResult;
-
-declare function orderVisibleColumns(columns: readonly GridColumnDef[], order: readonly string[]): GridColumnDef[];
-declare function buildGridTemplateColumns(columns: readonly GridColumnDef[]): string;
-declare function resolveBenchmarkIterations(iterations?: number, configuredIterations?: number): number;
-declare function formatPaginationSummary(totalItems: number, firstRowIndex: number, lastRowIndex: number): string;
-declare function computeViewportHeightPx(viewportHeight?: number, autoViewportHeight?: number | null): string;
-declare function computeViewportRows(viewportHeight?: number, rowHeight?: number): number;
-
-type UiGridWasmModule = {
-    build_pipeline_js(context: unknown): PipelineResult;
-};
-declare function registerReactUiGridWasmEngineFromModule(module: UiGridWasmModule): void;
-declare function enableReactUiGridWasmEngine(): Promise<void>;
-
-export { UiGrid, type UiGridProps, type UseGridStateResult, type UseVirtualScrollOptions, type UseVirtualScrollResult, buildGridTemplateColumns, computeViewportHeightPx, computeViewportRows, enableReactUiGridWasmEngine, formatPaginationSummary, orderVisibleColumns, registerReactUiGridWasmEngineFromModule, resolveBenchmarkIterations, useGridState, useVirtualScroll };
+export declare function useGridState(options: GridOptions, onRegisterApi?: (api: UiGridApi) => void): UseGridStateResult;
+//# sourceMappingURL=useGridState.d.ts.map

package/dist/useGridState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridState.d.ts","sourceRoot":"","sources":["../src/useGridState.ts"],"names":[],"mappings":"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"}

package/dist/useVirtualScroll.d.ts

@@ -0,0 +1,20 @@
+export interface UseVirtualScrollOptions {
+    itemCount: number;
+    itemSize: number;
+    viewportHeight: number;
+    overscan?: number;
+}
+export interface UseVirtualScrollResult {
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    totalHeight: number;
+    offsetY: number;
+    onScroll: (event: React.UIEvent<HTMLDivElement>) => void;
+    setScrollTop: (scrollTop: number) => void;
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    scrollTop: number;
+}
+export declare function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualScrollResult;
+//# sourceMappingURL=useVirtualScroll.d.ts.map

package/dist/useVirtualScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualScroll.d.ts","sourceRoot":"","sources":["../src/useVirtualScroll.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACzD,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACpD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,uBAAuB,GAAG,sBAAsB,CA0BzF"}

package/dist/virtualScrollMath.d.ts

@@ -0,0 +1,17 @@
+export interface VirtualWindowRequest {
+    itemCount: number;
+    itemSize: number;
+    viewportHeight: number;
+    overscan?: number;
+    scrollTop: number;
+}
+export interface VirtualWindowResult {
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    totalHeight: number;
+    offsetY: number;
+}
+export declare function calculateVirtualWindow(request: VirtualWindowRequest): VirtualWindowResult;
+//# sourceMappingURL=virtualScrollMath.d.ts.map

package/dist/virtualScrollMath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtualScrollMath.d.ts","sourceRoot":"","sources":["../src/virtualScrollMath.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,oBAAoB,GAAG,mBAAmB,CAqBzF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React wrapper for @ornery/ui-grid",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,7 +16,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@ornery/ui-grid": "^0.1.3"
+    "@ornery/ui-grid": "^0.1.6"
   },
   "devDependencies": {
     "@ornery/ui-grid": "file:../ui-grid",
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "start": "vite serve demo --config demo/vite.config.ts",
-    "build": "tsup src/index.ts --format esm,cjs --dts --tsconfig tsconfig.json --external react --external react-dom --external @ornery/ui-grid",
+    "build": "npm run build:library --prefix ../.. && tsup src/index.ts --format esm,cjs --tsconfig tsconfig.build.json --external react --external react-dom --external @ornery/ui-grid && tsc -p tsconfig.dts.json",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/src/UiGrid.test.tsx

@@ -235,7 +235,8 @@ describe('UiGrid React component', () => {
     });
 
     expect(gridApi.core.getVisibleRows()).toHaveLength(5);
-    expect(container.querySelector('.grid-viewport')).not.toBeNull();
+    expect(container.querySelector('.grid-virtual-spacer')).not.toBeNull();
+    expect(container.querySelector('.grid-virtual-body')).not.toBeNull();
   });
 
   it('paginates rows', () => {

package/src/UiGrid.tsx

@@ -63,13 +63,103 @@ export function UiGrid({
     overscan: 3,
   });
 
+  const headerGridRef = React.useRef<HTMLDivElement | null>(null);
+  const filterGridRef = React.useRef<HTMLDivElement | null>(null);
+  const [openPinMenuColumn, setOpenPinMenuColumn] = React.useState<string | null>(null);
+  const [headerStickyHeight, setHeaderStickyHeight] = React.useState(0);
+  const [filterStickyHeight, setFilterStickyHeight] = React.useState(0);
+  const stickyChromeHeight = headerStickyHeight + filterStickyHeight;
+  const scrollContainerHeight = `${(options.viewportHeight ?? 560) + stickyChromeHeight}px`;
+
+  const eventPathIncludesClass = React.useCallback((event: Event, className: string): boolean => {
+    const eventPath = typeof event.composedPath === 'function'
+      ? event.composedPath()
+      : (event.target ? [event.target] : []);
+
+    return eventPath.some((target) => {
+      if (!target || typeof target !== 'object' || !('classList' in target)) {
+        return false;
+      }
+
+      const classList = (target as { classList?: DOMTokenList }).classList;
+      return classList?.contains(className) ?? false;
+    });
+  }, []);
+
+  const isPinMenuOpen = React.useCallback(
+    (column: GridColumnDef) => openPinMenuColumn === column.name,
+    [openPinMenuColumn],
+  );
+
+  const pinButtonLabel = React.useCallback(
+    (column: GridColumnDef) => (state.isPinned(column) ? labels.unpin : labels.pinColumn),
+    [labels, state],
+  );
+
+  const onPinTrigger = React.useCallback(
+    (column: GridColumnDef, event?: React.MouseEvent) => {
+      event?.stopPropagation();
+      if (state.isPinned(column)) {
+        setOpenPinMenuColumn(null);
+        state.gridApi.pinning.pinColumn(column.name, 'none');
+        return;
+      }
+
+      setOpenPinMenuColumn((current) => (current === column.name ? null : column.name));
+    },
+    [state],
+  );
+
+  const choosePinDirection = React.useCallback(
+    (column: GridColumnDef, direction: 'left' | 'right', event?: React.MouseEvent) => {
+      event?.stopPropagation();
+      setOpenPinMenuColumn(null);
+      state.gridApi.pinning.pinColumn(column.name, direction);
+    },
+    [state],
+  );
+
+  React.useLayoutEffect(() => {
+    setHeaderStickyHeight(headerGridRef.current?.offsetHeight ?? 0);
+    setFilterStickyHeight(filterGridRef.current?.offsetHeight ?? 0);
+  }, [visibleColumns, filteringFeature, options.enableFiltering]);
+
+  React.useEffect(() => {
+    if (!openPinMenuColumn) {
+      return;
+    }
+
+    const handleDocumentClick = (event: MouseEvent) => {
+      if (eventPathIncludesClass(event, 'pin-control')) {
+        return;
+      }
+
+      setOpenPinMenuColumn(null);
+    };
+
+    const handleDocumentEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setOpenPinMenuColumn(null);
+      }
+    };
+
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('keydown', handleDocumentEscape);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+      document.removeEventListener('keydown', handleDocumentEscape);
+    };
+  }, [eventPathIncludesClass, openPinMenuColumn]);
+
   const itemsToRender = virtualizationEnabled
     ? displayItems.slice(virtualScroll.visibleRange.start, virtualScroll.visibleRange.end)
     : displayItems;
 
-  const onViewportScroll = (event: React.UIEvent<HTMLDivElement>) => {
-    virtualScroll.onScroll(event);
-    const startIndex = Math.floor(event.currentTarget.scrollTop / rowSize);
+  const onGridTableScroll = (event: React.UIEvent<HTMLDivElement>) => {
+    const bodyScrollTop = Math.max(0, event.currentTarget.scrollTop - stickyChromeHeight);
+    virtualScroll.setScrollTop(bodyScrollTop);
+    const startIndex = Math.floor(bodyScrollTop / rowSize);
     state.onViewportScroll(startIndex);
   };
 
@@ -320,21 +410,28 @@ export function UiGrid({
             </p>
           </div>
 
-          <div className="grid-table ui-grid-contents-wrapper" data-part="grid-table">
+          <div
+            className="grid-table ui-grid-contents-wrapper"
+            data-part="grid-table"
+            style={virtualizationEnabled ? { height: scrollContainerHeight, overflowY: 'auto' } : undefined}
+            onScroll={virtualizationEnabled ? onGridTableScroll : undefined}
+          >
             {/* Header row */}
             <div
               className="header-grid ui-grid-header ui-grid-header-canvas"
               data-part="header"
               role="row"
+              ref={headerGridRef}
               style={{ gridTemplateColumns }}
             >
               {visibleColumns.map((column) => {
                 const pinned = state.isPinned(column);
                 const pinOffset = pinned ? state.pinnedOffset(column) : null;
+                const pinMenuOpen = isPinMenuOpen(column);
                 return (
                 <div
                   key={column.name}
-                  className={`header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== 'none' ? ' is-active' : ''}${pinned ? ' is-pinned' : ''}`}
+                  className={`header-cell ui-grid-header-cell${sortingFeature && state.sortDirection(column) !== 'none' ? ' is-active' : ''}${pinned ? ' is-pinned' : ''}${pinMenuOpen ? ' is-pin-menu-open' : ''}`}
                   data-part="header-cell"
                   role="columnheader"
                   aria-sort={sortingFeature ? (state.sortAriaSort(column) as any) : undefined}
@@ -342,7 +439,7 @@ export function UiGrid({
                     position: pinned ? 'sticky' : undefined,
                     left: pinOffset?.side === 'left' ? pinOffset.offset : undefined,
                     right: pinOffset?.side === 'right' ? pinOffset.offset : undefined,
-                    zIndex: pinned ? 2 : undefined,
+                    zIndex: pinMenuOpen ? 8 : pinned ? 2 : undefined,
                   }}
                 >
                   <span className="header-label">{state.headerLabel(column)}</span>
@@ -386,21 +483,62 @@ export function UiGrid({
                     {state.pinningFeature &&
                       state.isPinningEnabled() &&
                       state.isColumnPinnable(column) && (
-                        <button
-                          type="button"
-                          className={`chip-action${pinned ? ' chip-action-active' : ''}`}
-                          data-part="pin-toggle"
-                          aria-label={pinned ? labels.unpin : labels.pinLeft}
-                          title={pinned ? labels.unpin : labels.pinLeft}
-                          onClick={() => state.togglePin(column)}
-                        >
-                          <svg viewBox="0 0 24 24" aria-hidden="true" focusable={false}>
-                            <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" />
-                          </svg>
-                          <span className="sr-only ui-grid-sr-only">
-                            {pinned ? labels.unpin : labels.pinLeft}
-                          </span>
-                        </button>
+                        <div className={`pin-control${pinMenuOpen ? ' pin-control-open' : ''}`} onClick={(event) => event.stopPropagation()}>
+                          <button
+                            type="button"
+                            className={`chip-action pin-trigger${pinned || pinMenuOpen ? ' chip-action-active' : ''}`}
+                            data-part="pin-toggle"
+                            aria-label={pinButtonLabel(column)}
+                            title={pinButtonLabel(column)}
+                            aria-haspopup={pinned ? undefined : 'menu'}
+                            aria-expanded={pinned ? undefined : pinMenuOpen}
+                            onClick={(event) => onPinTrigger(column, event)}
+                          >
+                            <svg viewBox="0 0 24 24" aria-hidden="true" focusable={false}>
+                              <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5v6l1 1 1-1v-6h5v-2l-2-2z" />
+                            </svg>
+                            <span className="sr-only ui-grid-sr-only">{pinButtonLabel(column)}</span>
+                          </button>
+
+                          <div
+                            className="pin-menu"
+                            data-part="pin-menu"
+                            role="menu"
+                            aria-label="Pin options"
+                            aria-hidden={!pinMenuOpen}
+                          >
+                            <button
+                              type="button"
+                              className="pin-menu-action"
+                              data-part="pin-left-action"
+                              role="menuitem"
+                              aria-label={labels.pinLeft}
+                              title={labels.pinLeft}
+                              tabIndex={pinMenuOpen ? 0 : -1}
+                              onClick={(event) => choosePinDirection(column, 'left', event)}
+                            >
+                              <svg viewBox="0 0 24 24" aria-hidden="true" focusable={false}>
+                                <path d="M10 6 4 12l6 6v-4h10v-4H10V6z" />
+                              </svg>
+                              <span className="sr-only ui-grid-sr-only">{labels.pinLeft}</span>
+                            </button>
+                            <button
+                              type="button"
+                              className="pin-menu-action"
+                              data-part="pin-right-action"
+                              role="menuitem"
+                              aria-label={labels.pinRight}
+                              title={labels.pinRight}
+                              tabIndex={pinMenuOpen ? 0 : -1}
+                              onClick={(event) => choosePinDirection(column, 'right', event)}
+                            >
+                              <svg viewBox="0 0 24 24" aria-hidden="true" focusable={false}>
+                                <path d="M14 6v4H4v4h10v4l6-6-6-6z" />
+                              </svg>
+                              <span className="sr-only ui-grid-sr-only">{labels.pinRight}</span>
+                            </button>
+                          </div>
+                        </div>
                       )}
                   </div>
                 </div>
@@ -413,7 +551,8 @@ export function UiGrid({
               <div
                 className="filter-grid ui-grid-header"
                 data-part="filters"
-                style={{ gridTemplateColumns }}
+                ref={filterGridRef}
+                style={{ gridTemplateColumns, ['--ui-grid-header-sticky-top' as string]: `${headerStickyHeight}px` }}
               >
                 {visibleColumns.map((column) => {
                   const pinned = state.isPinned(column);
@@ -450,29 +589,19 @@ export function UiGrid({
             {/* Body */}
             {displayItems.length > 0 ? (
               virtualizationEnabled ? (
-                <div
-                  className="grid-viewport ui-grid-viewport"
-                  data-part="viewport"
-                  ref={virtualScroll.viewportRef}
-                  style={{ height: viewportHeightPx, overflow: 'auto', position: 'relative' }}
-                  onScroll={onViewportScroll}
-                >
-                  <div style={{ height: `${virtualScroll.totalHeight}px`, position: 'relative' }}>
-                    <div
-                      className="body-grid ui-grid-canvas"
-                      data-part="body"
-                      role="rowgroup"
-                      style={{
-                        gridTemplateColumns,
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        transform: `translateY(${virtualScroll.offsetY}px)`,
-                      }}
-                    >
-                      {itemsToRender.map(renderDisplayItem)}
-                    </div>
+                <div className="grid-virtual-spacer" style={{ height: `${virtualScroll.totalHeight}px` }}>
+                  <div
+                    className="body-grid ui-grid-canvas grid-virtual-body"
+                    data-part="body"
+                    role="rowgroup"
+                    style={{
+                      gridTemplateColumns,
+                      position: 'absolute',
+                      top: `${virtualScroll.offsetY}px`,
+                      left: 0,
+                    }}
+                  >
+                    {itemsToRender.map(renderDisplayItem)}
                   </div>
                 </div>
               ) : (

package/src/index.ts

@@ -1,5 +1,6 @@
 export { UiGrid } from './UiGrid';
 export type { UiGridProps } from './UiGrid';
+export { mountUiGrid } from './mountUiGrid';
 export { useGridState } from './useGridState';
 export type { UseGridStateResult } from './useGridState';
 export { useVirtualScroll } from './useVirtualScroll';

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.ts

@@ -1,7 +1,8 @@
 import type { BuildGridPipelineContext, PipelineResult } from '@ornery/ui-grid';
 import { registerRustWasmGridEngine } from '@ornery/ui-grid';
 
-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;
@@ -17,5 +18,6 @@ export function registerReactUiGridWasmEngineFromModule(module: UiGridWasmModule
 
 export async function enableReactUiGridWasmEngine(): Promise<void> {
   const module = await import(/* @vite-ignore */ uiGridWasmModulePath);
+  await module.default(uiGridWasmBinaryPath);
   registerReactUiGridWasmEngineFromModule(module);
 }