@ornery/ui-grid-vanilla 0.1.10 → 1.0.0

package/src/save-state.test.ts

@@ -0,0 +1,235 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { SORT_DIRECTIONS, clearRustWasmGridEngine } from '@ornery/ui-grid-core';
+
+import {
+  createVanillaGridController,
+  mountVanillaUiGrid,
+  type GridOptions,
+  type UiGridApi,
+  type VanillaUiGridElement,
+} from './index';
+
+/**
+ * saveState integration tests. Ports the per-field save/restore behaviour
+ * from the old ui.grid.saveState module.
+ */
+
+async function waitFor<T>(resolve: () => T | null | undefined, timeoutMs = 5000): Promise<T> {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < timeoutMs) {
+    const value = resolve();
+    if (value) return value;
+    await new Promise((r) => window.setTimeout(r, 10));
+  }
+  throw new Error('Timed out waiting for expected state');
+}
+
+const TAG = 'ui-grid-element-vanilla-savestate-test';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: string;
+}
+
+function baseOptions(overrides: Partial<GridOptions> = {}): GridOptions {
+  let capturedApi: UiGridApi | undefined;
+  const data: Row[] = [
+    { id: 'r1', name: 'Alpha', status: 'Active' },
+    { id: 'r2', name: 'Beta', status: 'Pilot' },
+    { id: 'r3', name: 'Gamma', status: 'Draft' },
+  ];
+  const options: GridOptions = {
+    id: 'savestate-grid',
+    data,
+    columnDefs: [
+      { name: 'name', displayName: 'Name' },
+      { name: 'status', displayName: 'Status' },
+    ],
+    enableRowSelection: true,
+    enableFullRowSelection: true,
+    rowIdentity: (entity) => String((entity as Row).id),
+    onRegisterApi: (api) => {
+      capturedApi = api as UiGridApi;
+    },
+    ...overrides,
+  };
+  Object.defineProperty(options, '__api', { enumerable: false, get: () => capturedApi });
+  return options;
+}
+
+function getApi(options: GridOptions): UiGridApi {
+  const api = (options as unknown as { __api: UiGridApi | undefined }).__api;
+  if (!api) throw new Error('Grid API was never registered');
+  return api;
+}
+
+async function mountGrid(options: GridOptions): Promise<{
+  grid: VanillaUiGridElement;
+  shadow: ShadowRoot;
+}> {
+  const target = document.getElementById('app')!;
+  const grid = await mountVanillaUiGrid(target, options, undefined, TAG);
+  const shadow = await waitFor(() => grid.shadowRoot);
+  await waitFor(() => shadow.querySelector('.body-cell[data-row="r1"]'));
+  return { grid, shadow };
+}
+
+describe('vanilla grid saveState', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+
+  afterEach(() => {
+    clearRustWasmGridEngine();
+    document.body.innerHTML = '';
+  });
+
+  it('getState returns sort, filter, grouping, pinning by default', () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [{ id: 'r1', name: 'Alpha' }] as Row[],
+      columnDefs: [{ name: 'name' }],
+    });
+    controller.setFilter('name', 'Al');
+    controller.sortColumn('name', SORT_DIRECTIONS.asc);
+    const state = controller.getState();
+    expect(state.sortState).toEqual({ columnName: 'name', direction: SORT_DIRECTIONS.asc });
+    expect(state.activeFilters).toEqual({ name: 'Al' });
+    expect(state.groupByColumns).toEqual([]);
+    expect(state.pinnedColumns).toEqual({});
+    expect(state.columnOrder).toEqual(['name']);
+  });
+
+  it('per-field saveSort=false excludes sort from the snapshot', () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [{ id: 'r1', name: 'Alpha' }] as Row[],
+      columnDefs: [{ name: 'name' }],
+      saveSort: false,
+    });
+    controller.sortColumn('name', SORT_DIRECTIONS.asc);
+    const state = controller.getState();
+    expect(state.sortState).toBeUndefined();
+    // Filter is still serialized — each flag is independent.
+    expect(state.activeFilters).toEqual({});
+  });
+
+  it('setState restores sort and filter independently', () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [
+        { id: 'r1', name: 'Alpha' },
+        { id: 'r2', name: 'Beta' },
+      ] as Row[],
+      columnDefs: [{ name: 'name' }],
+      enableSorting: true,
+      enableFiltering: true,
+      rowIdentity: (entity) => String((entity as Row).id),
+    });
+    controller.setState({
+      sortState: { columnName: 'name', direction: SORT_DIRECTIONS.desc },
+      activeFilters: { name: 'Beta' },
+    });
+    expect(controller.getSnapshot().pipeline.visibleRows.map((r) => r.id)).toEqual(['r2']);
+  });
+
+  it('saveSelection captures selectedRowIds and restores cleanly', async () => {
+    const options = baseOptions();
+    await mountGrid(options);
+    const api = getApi(options);
+    api.selection.selectRow(options.data[0]! as unknown as Record<string, unknown>);
+    api.selection.selectRow(options.data[2]! as unknown as Record<string, unknown>);
+    const state = api.saveState.save();
+    expect((state as unknown as { selectedRowIds: string[] }).selectedRowIds.sort()).toEqual(['r1', 'r3']);
+    api.selection.clearSelectedRows();
+    expect(api.selection.getSelectedCount()).toBe(0);
+    api.saveState.restore(state);
+    expect(api.selection.getSelectedCount()).toBe(2);
+  });
+
+  it('saveFocus captures focusedCell and restores it', async () => {
+    const options = baseOptions();
+    const { shadow } = await mountGrid(options);
+    const api = getApi(options);
+    const cell = shadow.querySelector<HTMLElement>('.body-cell[data-row="r2"][data-column="status"]')!;
+    cell.click();
+    const state = api.saveState.save();
+    expect((state as unknown as { focusedCell: { rowId: string } | null }).focusedCell?.rowId).toBe('r2');
+    // Clear focus, then restore.
+    cell.blur();
+    api.saveState.restore({});
+    expect(api.cellNav.getFocusedCell()?.row.id).toBe('r2');
+  });
+
+  it('saveGroupingExpandedStates=true captures collapsed groups', async () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [{ id: 'r1', name: 'Alpha', status: 'Active' }] as Row[],
+      columnDefs: [{ name: 'name' }, { name: 'status' }],
+      enableGrouping: true,
+      grouping: { groupBy: ['status'] },
+      saveGroupingExpandedStates: true,
+    });
+    controller.setCollapsedGroup('status::Active', true);
+    const state = controller.getState();
+    expect(state.collapsedGroups).toEqual({ 'status::Active': true });
+  });
+
+  it('saveScroll flag captures and restores viewport scroll position', async () => {
+    const options = baseOptions({
+      saveScroll: true,
+      data: Array.from({ length: 100 }, (_, i) => ({
+        id: `r${i}`,
+        name: `Row ${i}`,
+        status: 'Active',
+      })),
+      rowHeight: 20,
+      virtualizationThreshold: 1,
+    });
+    const { shadow } = await mountGrid(options);
+    const api = getApi(options);
+    // After the body/viewport split, vertical scroll lives on
+    // .grid-body-viewport (the inner overflow wrapper). The .grid-table
+    // only owns horizontal overflow now.
+    const bodyViewport = shadow.querySelector<HTMLElement>('.grid-body-viewport')!;
+    bodyViewport.scrollTop = 400;
+    bodyViewport.dispatchEvent(new Event('scroll', { bubbles: true }));
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)));
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)));
+    const state = api.saveState.save();
+    expect((state as unknown as { scrollTop: number }).scrollTop).toBe(400);
+    // Scroll back to 0, then restore.
+    bodyViewport.scrollTop = 0;
+    api.saveState.restore(state);
+    await new Promise((r) => requestAnimationFrame(() => r(undefined)));
+    expect(bodyViewport.scrollTop).toBe(400);
+  });
+
+  it('saveScroll=true implicitly disables saveFocus', async () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [{ id: 'r1', name: 'Alpha' }] as Row[],
+      columnDefs: [{ name: 'name' }],
+      saveScroll: true,
+    });
+    controller.setCellNavFocus('r1', 'name');
+    const state = controller.getState();
+    expect(state.focusedCell).toBeUndefined();
+  });
+
+  it('setState is a no-op for fields that are undefined', () => {
+    const controller = createVanillaGridController({
+      id: 'save-controller',
+      data: [{ id: 'r1', name: 'Alpha' }] as Row[],
+      columnDefs: [{ name: 'name' }],
+    });
+    controller.setFilter('name', 'Al');
+    const before = controller.getState();
+    // setState({}) should preserve everything.
+    controller.setState({});
+    const after = controller.getState();
+    expect(after.activeFilters).toEqual(before.activeFilters);
+  });
+});

package/src/scss.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  const css: string;
+  export default css;
+}

package/src/templates/index.ts

@@ -0,0 +1,62 @@
+/**
+ * String template helpers for grid markup fragments.
+ *
+ * These are simple functions that return HTML strings for use in innerHTML
+ * concatenation (the hot render path). They are NOT .html template imports —
+ * .html templates should only be used where connect() is called against
+ * a DOM target (shell, components with shadow DOM).
+ *
+ * This avoids the DOM→string→DOM round-trip that toHTML() would cause.
+ */
+
+export function iconMarkup(svgClass: string, viewBox: string, path: string): string {
+  return `<svg class="${svgClass}" viewBox="${viewBox}" aria-hidden="true" focusable="false"><path d="${path}"></path></svg>`;
+}
+
+export function slotRegistryMarkup(cellSlots: string): string {
+  return `<div hidden class="slot-registry">${cellSlots}<slot name="expandable-row"></slot></div>`;
+}
+
+export function filterRowMarkup(templateColumns: string, filterCells: string): string {
+  return `<div class="filter-grid ui-grid-header" style="grid-template-columns:${templateColumns}">${filterCells}</div>`;
+}
+
+export function bodyVirtualMarkup(templateColumns: string, totalVirtualHeight: number, virtualOffset: number, bodyContent: string): string {
+  return `<div class="grid-virtual-spacer" style="height:${totalVirtualHeight}px"><div class="body-grid ui-grid-canvas grid-virtual-body" style="grid-template-columns:${templateColumns};top:${virtualOffset}px">${bodyContent}</div></div>`;
+}
+
+export function bodyStaticMarkup(templateColumns: string, bodyContent: string): string {
+  return `<div class="body-grid ui-grid-canvas" style="grid-template-columns:${templateColumns}">${bodyContent}</div>`;
+}
+
+export function emptyDataMarkup(heading: string, description: string): string {
+  return `<div class="empty-state ui-grid-no-row-overlay"><strong>${heading}</strong><p>${description}</p></div>`;
+}
+
+export function expandableRowMarkup(expandableContent: string): string {
+  return `<div class="expandable-row ui-grid-row ui-grid-expandable-row" style="grid-column:1 / -1">${expandableContent}</div>`;
+}
+
+export function treeToggleMarkup(rowId: string, toggleLabel: string, iconViewBox: string, iconPath: string): string {
+  return `<button type="button" class="row-toggle" data-action="toggle-tree" data-row="${rowId}" aria-label="${toggleLabel}">${iconMarkup('toggle-icon', iconViewBox, iconPath)}<span class="sr-only">${toggleLabel}</span></button>`;
+}
+
+export function expandToggleMarkup(rowId: string, toggleLabel: string, iconViewBox: string, iconPath: string): string {
+  return `<button type="button" class="row-toggle row-toggle-expand" data-action="toggle-expand" data-row="${rowId}" aria-label="${toggleLabel}">${iconMarkup('toggle-icon', iconViewBox, iconPath)}<span class="sr-only">${toggleLabel}</span></button>`;
+}
+
+export function cellEditorMarkup(rowId: string, columnName: string, inputType: string, editingValue: string): string {
+  return `<ui-grid-cell-editor data-row="${rowId}" data-column="${columnName}" data-type="${inputType}" data-value="${editingValue}"></ui-grid-cell-editor>`;
+}
+
+export function cellValueMarkup(displayValue: string): string {
+  return `<span class="cell-value">${displayValue}</span>`;
+}
+
+export function defaultExpandableMarkup(label: string): string {
+  return `<p>${label}</p>`;
+}
+
+export function resizerMarkup(columnName: string, headerValue: string): string {
+  return `<button type="button" class="column-resizer" data-action="resize" data-column="${columnName}" aria-label="Resize ${headerValue} column" title="Drag to resize, double-click to auto fit"></button>`;
+}

package/src/test-setup.ts

@@ -0,0 +1,23 @@
+/**
+ * Vitest setup file — polyfills APIs that jsdom does not fully implement
+ * so that tests exercise the real adoptedStyleSheets code path.
+ */
+
+if (typeof CSSStyleSheet !== 'undefined' && !CSSStyleSheet.prototype.replaceSync) {
+  CSSStyleSheet.prototype.replaceSync = function (text: string) {
+    (this as any).__cssText = text;
+  };
+}
+
+const originalAttachShadow = HTMLElement.prototype.attachShadow;
+HTMLElement.prototype.attachShadow = function (init: ShadowRootInit): ShadowRoot {
+  const shadow = originalAttachShadow.call(this, init);
+  if (!shadow.adoptedStyleSheets) {
+    Object.defineProperty(shadow, 'adoptedStyleSheets', {
+      value: [],
+      writable: true,
+      configurable: true,
+    });
+  }
+  return shadow;
+};

package/src/ui-grid-empty.template.ts

@@ -0,0 +1,23 @@
+import shellCss from './ui-grid-shell.scss';
+import { adoptStyles } from './adopt-styles';
+
+const STYLE_KEY = {};
+
+interface EmptyContext {
+  message: string;
+}
+
+export default function emptyTemplate(ctx: EmptyContext) {
+  return {
+    connect(root?: ShadowRoot): void {
+      if (!root) return;
+      adoptStyles(root, shellCss, STYLE_KEY);
+      root.innerHTML =
+        `<section class="grid-shell ui-grid-shell">` +
+          `<div class="empty-state ui-grid-no-row-overlay">` +
+            `<strong>${ctx.message}</strong>` +
+          `</div>` +
+        `</section>`;
+    },
+  };
+}

package/src/ui-grid-shell.scss

@@ -0,0 +1,25 @@
+// Grid shell — imports all core partials for the main grid layout.
+// Partials with only mixins require an explicit @include to emit rules.
+@use "@ornery/ui-grid-core/src/lib/styles/tokens";
+@use "@ornery/ui-grid-core/src/lib/styles/inherit";
+@use "@ornery/ui-grid-core/src/lib/styles/shell";
+@use "@ornery/ui-grid-core/src/lib/styles/frame";
+@use "@ornery/ui-grid-core/src/lib/styles/grid-table";
+@use "@ornery/ui-grid-core/src/lib/styles/header-cell";
+@use "@ornery/ui-grid-core/src/lib/styles/filter-cell";
+@use "@ornery/ui-grid-core/src/lib/styles/body-cell";
+@use "@ornery/ui-grid-core/src/lib/styles/group-row";
+@use "@ornery/ui-grid-core/src/lib/styles/virtualization";
+@use "@ornery/ui-grid-core/src/lib/styles/alignment";
+@use "@ornery/ui-grid-core/src/lib/styles/empty-state";
+@use "@ornery/ui-grid-core/src/lib/styles/pagination";
+@use "@ornery/ui-grid-core/src/lib/styles/utilities";
+@use "@ornery/ui-grid-core/src/lib/styles/status-pill";
+@use "@ornery/ui-grid-core/src/lib/styles/selection";
+@use "@ornery/ui-grid-core/src/lib/styles/row-edit";
+@use "@ornery/ui-grid-core/src/lib/styles/validate";
+
+// Mixin-only partials: emit class-based rules for the grid shell shadow DOM.
+@include filter-cell.rules;
+@include group-row.rules;
+@include pagination.rules;

package/src/ui-grid-shell.template.ts

@@ -0,0 +1,45 @@
+import shellCss from './ui-grid-shell.scss';
+import { adoptStyles } from './adopt-styles';
+
+const STYLE_KEY = {};
+
+interface ShellContext {
+  shadowRoot?: ShadowRoot | null;
+  slotRegistry: string;
+  gridTitle: string;
+  gridTableStyle: string;
+  templateColumns: string;
+  headerContent: string;
+  filterRowContent: string;
+  bodyViewportStyle: string;
+  bodyContent: string;
+  paginationContent: string;
+}
+
+export default function gridShellTemplate(ctx: ShellContext) {
+  return {
+    connect(root?: ShadowRoot): void {
+      const target = root ?? ctx.shadowRoot;
+      if (!target) return;
+      adoptStyles(target, shellCss, STYLE_KEY);
+      target.innerHTML =
+        `${ctx.slotRegistry}` +
+        `<section class="grid-frame ui-grid" role="grid" aria-label="${ctx.gridTitle}">` +
+          `<div class="grid-table ui-grid-contents-wrapper" style="${ctx.gridTableStyle}">` +
+            `<div class="grid-header-strip">` +
+              `<div class="header-grid ui-grid-header ui-grid-header-canvas" style="grid-template-columns:${ctx.templateColumns}">` +
+                ctx.headerContent +
+              `</div>` +
+            `</div>` +
+            `<div class="grid-filter-strip">` +
+              ctx.filterRowContent +
+            `</div>` +
+            `<div class="grid-body-viewport" style="${ctx.bodyViewportStyle}">` +
+              ctx.bodyContent +
+            `</div>` +
+            ctx.paginationContent +
+          `</div>` +
+        `</section>`;
+    },
+  };
+}