@ornery/ui-grid-react 0.1.6 → 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,12 +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,
@@ -20,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/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,5 +1,5 @@
-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-web/ui_grid_wasm.js';
 const uiGridWasmBinaryPath = '/dist/ui-grid-wasm-web/ui_grid_wasm_bg.wasm';
@@ -12,7 +12,7 @@ export function registerReactUiGridWasmEngineFromModule(module: UiGridWasmModule
   registerRustWasmGridEngine({
     buildPipeline(context: BuildGridPipelineContext): PipelineResult {
       return module.build_pipeline_js(context);
-    }
+    },
   });
 }
 
@@ -20,4 +20,4 @@ export async function enableReactUiGridWasmEngine(): Promise<void> {
   const module = await import(/* @vite-ignore */ uiGridWasmModulePath);
   await module.default(uiGridWasmBinaryPath);
   registerReactUiGridWasmEngineFromModule(module);
-}
+}

package/src/ui-grid.css

@@ -25,11 +25,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-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-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);
@@ -224,6 +233,20 @@
   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));
 }
@@ -311,13 +334,20 @@
   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);
+    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 {
@@ -340,12 +370,18 @@
   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);
+    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 {
@@ -361,7 +397,10 @@
 }
 
 .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));
+  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);

package/src/useGridState.ts

@@ -128,7 +128,7 @@ import {
   raiseGridBenchmarkComplete,
   downloadGridCsvFile,
   observeGridHostSize,
-} from '@ornery/ui-grid';
+} from '@ornery/ui-grid-core';
 import type {
   DisplayItem,
   GroupItem,
@@ -141,7 +141,7 @@ import type {
   GridExpandableTemplateContext,
   PinDirection,
   PinnedColumnState,
-} from '@ornery/ui-grid';
+} from '@ornery/ui-grid-core';
 
 function escapeCssSelectorValue(value: string): string {
   const nativeEscape = globalThis.CSS?.escape;
@@ -162,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)} `;
@@ -308,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;
@@ -408,7 +407,9 @@ export function useGridState(
       .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);
+    const centerColumns = orderedColumns.filter(
+      (column) => pinnedColumns[column.name] === undefined,
+    );
 
     return [...pinnedLeft, ...centerColumns, ...pinnedRight];
   }, [options.columnDefs, columnOrder, pinnedColumns]);
@@ -1571,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]);
@@ -1718,6 +1731,7 @@ export function useGridState(
     toggleRowExpansion: toggleRowExpansionFn,
     toggleTreeRow: toggleTreeRowFn,
     moveColumn: moveColumnFn,
+    moveVisibleColumn: moveVisibleColumnFn,
     nextPage: nextPageFn,
     previousPage: previousPageFn,
     onPageSizeChange: onPageSizeChangeFn,

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.dts.json

@@ -7,7 +7,7 @@
     "outDir": "./dist",
     "rootDir": "./src",
     "paths": {
-      "@ornery/ui-grid": ["../../dist/ui-grid"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/dist/index.d.ts"]
     }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],

package/tsconfig.json

@@ -7,7 +7,7 @@
     "declarationMap": true,
     "baseUrl": ".",
     "paths": {
-      "@ornery/ui-grid": ["../ui-grid/src/public-api.react.ts"]
+      "@ornery/ui-grid-core": ["../ui-grid-core/src/index.ts"]
     }
   },
   "include": ["src"]

package/vitest.config.ts

@@ -4,7 +4,7 @@ import path from 'path';
 export default defineConfig({
   resolve: {
     alias: {
-      '@ornery/ui-grid': path.resolve(__dirname, '../ui-grid/src/public-api.react.ts'),
+      '@ornery/ui-grid-core': path.resolve(__dirname, '../ui-grid-core/src/index.ts'),
     },
   },
   test: {