@ornery/ui-grid-vanilla 5.0.2 → 5.0.3

package/src/scrollbar-compensation.test.ts

@@ -0,0 +1,52 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { GRID_CORE_CSS } from '@ornery/ui-grid-core';
+import { mountVanillaUiGrid, type UiGridApi } from './index';
+
+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((next) => window.setTimeout(next, 20));
+  }
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('body scrollbar compensation', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('narrows the header and filter strips by the body scrollbar width', async () => {
+    let api: UiGridApi | undefined;
+    const grid = await mountVanillaUiGrid(
+      document.getElementById('app')!,
+      {
+        id: 'scrollbar-compensation',
+        enableFiltering: true,
+        data: [{ id: 'r1', name: 'Alpha' }],
+        columnDefs: [{ name: 'name' }],
+        onRegisterApi: (registered) => {
+          api = registered as UiGridApi;
+        },
+      },
+      undefined,
+      'ui-grid-element-scrollbar-test',
+    );
+    await waitFor(() => api);
+    const root = grid.shadowRoot!;
+    const viewport = await waitFor(() => root.querySelector<HTMLElement>('.grid-body-viewport'));
+    Object.defineProperty(viewport, 'offsetWidth', { configurable: true, value: 1000 });
+    Object.defineProperty(viewport, 'clientWidth', { configurable: true, value: 985 });
+
+    api!.core.refresh();
+
+    const frame = root.querySelector<HTMLElement>('.grid-frame')!;
+    await waitFor(() => frame.style.getPropertyValue('--ui-grid-scrollbar-width') === '15px');
+    expect(GRID_CORE_CSS).toContain('width: calc(100% - var(--ui-grid-scrollbar-width, 0px))');
+  });
+});

package/src/selection-pinning.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import { createVanillaGridController } from './grid-controller';
+
+const make = (pinClient: boolean) =>
+  createVanillaGridController({
+    id: 'selection-pinning',
+    data: [{ id: 'r1', client: 'A', amount: 1 }],
+    columnDefs: [
+      { name: 'client', width: '200px', ...(pinClient ? { pinnedLeft: true } : {}) },
+      { name: 'amount', width: '120px' },
+    ],
+    enablePinning: true,
+    enableRowSelection: true,
+    enableRowHeaderSelection: true,
+    selectionRowHeaderWidth: 30,
+  });
+
+const column = (controller: ReturnType<typeof make>, name: string) =>
+  controller.getSnapshot().visibleColumns.find((candidate) => candidate.name === name)!;
+
+describe('selection column pinning', () => {
+  it('pins the selection column with left-pinned columns and offsets them past it', () => {
+    const controller = make(true);
+    const selection = column(controller, 'selectionRowHeaderCol');
+    const client = column(controller, 'client');
+
+    expect(controller.isPinned(selection)).toBe(true);
+    expect(controller.pinnedOffset(selection)).toEqual({ side: 'left', offset: '0px' });
+    expect(controller.pinnedOffset(client)).toEqual({ side: 'left', offset: 'calc(30px)' });
+    expect(controller.isPinnedLeftLast(client)).toBe(true);
+    expect(controller.getSnapshot().pinnedColumns).toEqual({ client: 'left' });
+  });
+
+  it('leaves the selection column unpinned when nothing is pinned left', () => {
+    const controller = make(false);
+    expect(controller.isPinned(column(controller, 'selectionRowHeaderCol'))).toBe(false);
+  });
+});

package/src/slot-updates.test.ts

@@ -0,0 +1,137 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { createVanillaGridController } from './grid-controller';
+import { mountVanillaUiGrid, type UiGridApi } from './index';
+import type { FrameworkFilterSlot, FrameworkSlotDelta } from './framework-slots';
+
+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((next) => window.setTimeout(next, 20));
+  }
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('framework slot updates', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function mount(id: string) {
+    const tag = 'ui-grid-element-slot-updates-test';
+    let api: UiGridApi | undefined;
+    const grid = await mountVanillaUiGrid(
+      document.getElementById('app')!,
+      {
+        id,
+        enableFiltering: true,
+        data: [
+          { id: 'r1', name: 'Alpha' },
+          { id: 'r2', name: 'Beta' },
+        ],
+        columnDefs: [{ name: 'name' }],
+        onRegisterApi: (registered) => {
+          api = registered as UiGridApi;
+        },
+      },
+      undefined,
+      tag,
+    );
+    await waitFor(() => api);
+    await waitFor(() => grid.shadowRoot?.querySelector('.body-cell'));
+    return { grid, api: api! };
+  }
+
+  it('turns filter slots on after the first render', async () => {
+    const { grid } = await mount('slot-toggle');
+    const root = grid.shadowRoot!;
+    expect(root.querySelector('ui-grid-filter-cell[data-column="name"]')).not.toBeNull();
+
+    const deltas: FrameworkSlotDelta<FrameworkFilterSlot>[] = [];
+    grid.addEventListener('filterSlotsChanged', (event) =>
+      deltas.push((event as CustomEvent<FrameworkSlotDelta<FrameworkFilterSlot>>).detail),
+    );
+    grid.setFrameworkRenderedSlots({ filters: ['name'] });
+
+    await waitFor(() => root.querySelector('slot[name="filter-name"]'));
+    expect(root.querySelector('ui-grid-filter-cell[data-column="name"]')).toBeNull();
+    expect(deltas.at(-1)?.added.map((slot) => slot.slotName)).toEqual(['filter-name']);
+  });
+
+  it('reports a filter slot whose value changed as updated', async () => {
+    const { grid } = await mount('slot-updated');
+    grid.setFrameworkRenderedSlots({ filters: ['name'] });
+    await waitFor(() => grid.shadowRoot!.querySelector('slot[name="filter-name"]'));
+
+    const deltas: FrameworkSlotDelta<FrameworkFilterSlot>[] = [];
+    grid.addEventListener('filterSlotsChanged', (event) =>
+      deltas.push((event as CustomEvent<FrameworkSlotDelta<FrameworkFilterSlot>>).detail),
+    );
+    (grid as unknown as { controller: { setFilter(name: string, value: string): void } }).controller.setFilter('name', 'Al');
+
+    const delta = await waitFor(() => deltas.find((d) => (d.updated ?? []).length > 0));
+    expect(delta.added).toEqual([]);
+    expect(delta.removed).toEqual([]);
+    expect(delta.updated?.map((slot) => [slot.slotName, slot.value])).toEqual([['filter-name', 'Al']]);
+  });
+
+  it.each(['left', 'right'] as const)('keeps %s-pinned filter slots aligned after resizing', async (side) => {
+    const { grid } = await mount(`slot-resize-${side}`);
+    const pinned = side === 'left' ? { pinnedLeft: true } : { pinnedRight: true };
+    grid.options = {
+      ...grid.options,
+      enablePinning: true,
+      columnDefs: [
+        { name: 'name', width: '180px', ...pinned },
+        { name: 'other', width: '120px', ...pinned },
+      ],
+    };
+    const filtered = side === 'left' ? 'other' : 'name';
+    const resized = side === 'left' ? 'name' : 'other';
+    grid.setFrameworkRenderedSlots({ filters: [filtered] });
+    const slot = await waitFor(() => grid.shadowRoot!.querySelector(`slot[name="filter-${filtered}"]`));
+    const wrapper = slot.parentElement!;
+    expect(wrapper.style[side]).toBe(side === 'left' ? 'calc(180px)' : 'calc(120px)');
+    const controller = (grid as unknown as { controller: ReturnType<typeof createVanillaGridController> }).controller;
+    controller.setColumnWidthOverride(resized, 240);
+    await waitFor(() => grid.shadowRoot!.querySelector(`[data-column="${resized}"]`));
+    expect(wrapper.style[side]).toBe('calc(240px)');
+    expect(wrapper.querySelector('slot')).toBe(slot);
+    expect(wrapper.classList.contains('is-pinned')).toBe(true);
+  });
+
+  it('fires emptyStateSlotsChanged and the original singular name', async () => {
+    const { grid } = await mount('empty-event');
+    const seen: string[] = [];
+    grid.addEventListener('emptyStateSlotsChanged', () => seen.push('plural'));
+    grid.addEventListener('emptyStateSlotChanged', () => seen.push('singular'));
+
+    grid.setFrameworkRenderedSlots({ emptyState: true });
+    grid.options = { ...grid.options, data: [] };
+
+    await waitFor(() => seen.length >= 2);
+    expect(seen.slice(0, 2)).toEqual(['plural', 'singular']);
+  });
+});
+
+describe('columnSizeChanged', () => {
+  it('fires with the column and its new width when a column is resized', () => {
+    const controller = createVanillaGridController({
+      id: 'column-size',
+      data: [{ id: 'r1', name: 'Alpha' }],
+      columnDefs: [{ name: 'name' }],
+    });
+    const events: Array<[string, string]> = [];
+    controller.gridApi.core.on.columnSizeChanged((name, width) => events.push([name, width]));
+
+    controller.setColumnWidthOverride('name', 180.4);
+    controller.setColumnWidthOverride('name', 180);
+
+    expect(events).toEqual([['name', '180px']]);
+  });
+});

package/src/templates/index.ts

@@ -21,8 +21,12 @@ export function filterRowMarkup(templateColumns: string, filterCells: string): s
   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 virtualSpacerStyle(totalVirtualHeight: number, rowSize: number): string {
+  return `height:${totalVirtualHeight}px;--ui-grid-row-height:${rowSize}px`;
+}
+
+export function bodyVirtualMarkup(templateColumns: string, totalVirtualHeight: number, virtualOffset: number, bodyContent: string, rowSize: number): string {
+  return `<div class="grid-virtual-spacer" style="${virtualSpacerStyle(totalVirtualHeight, rowSize)}"><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 {
@@ -30,11 +34,11 @@ export function bodyStaticMarkup(templateColumns: string, bodyContent: string):
 }
 
 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>`;
+  return `<div part="empty-state" 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>`;
+  return `<div part="expandable-row" 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 {

package/src/theming-hooks.test.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import { adoptStyles } from './adopt-styles';
+import { mountVanillaUiGrid, type UiGridApi } from './index';
+
+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((next) => window.setTimeout(next, 20));
+  }
+  throw new Error('Timed out waiting for expected element state');
+}
+
+describe('theming hooks', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>';
+  });
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function mount() {
+    let api: UiGridApi | undefined;
+    const grid = await mountVanillaUiGrid(
+      document.getElementById('app')!,
+      {
+        id: 'theming-hooks',
+        enableFiltering: true,
+        enablePinning: true,
+        data: [{ id: 'r1', name: 'Alpha' }],
+        columnDefs: [{ name: 'name' }],
+        onRegisterApi: (registered) => {
+          api = registered as UiGridApi;
+        },
+      },
+      undefined,
+      'ui-grid-element-theming-test',
+    );
+    await waitFor(() => api);
+    await waitFor(() => grid.shadowRoot?.querySelector('.body-cell'));
+    return grid;
+  }
+
+  it('renders the documented part hooks', async () => {
+    const root = (await mount()).shadowRoot!;
+    const parts = new Set([...root.querySelectorAll('[part]')].map((node) => node.getAttribute('part')));
+    for (const part of ['grid-frame', 'header', 'header-cell', 'header-label', 'header-actions', 'pin-menu', 'filter-cell', 'body-cell']) {
+      expect(parts, part).toContain(part);
+    }
+  });
+
+  it('keeps addStyles sheets after the grid sheets, and removes them', async () => {
+    const grid = await mount();
+    const root = grid.shadowRoot!;
+    const remove = grid.addStyles('.body-cell{color:red}');
+    const added = root.adoptedStyleSheets.at(-1)!;
+
+    adoptStyles(root, '.late{color:blue}', {});
+    expect(root.adoptedStyleSheets.at(-1)).toBe(added);
+
+    remove();
+    expect(root.adoptedStyleSheets).not.toContain(added);
+  });
+});

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

@@ -14,7 +14,7 @@ export default function emptyTemplate(ctx: EmptyContext) {
       adoptStyles(root, shellCss, STYLE_KEY);
       root.innerHTML =
         `<section class="grid-shell ui-grid-shell">` +
-          `<div class="empty-state ui-grid-no-row-overlay">` +
+          `<div part="empty-state" class="empty-state ui-grid-no-row-overlay">` +
             `<strong>${ctx.message}</strong>` +
           `</div>` +
         `</section>`;

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

@@ -24,10 +24,10 @@ export default function gridShellTemplate(ctx: ShellContext) {
       adoptStyles(target, shellCss, STYLE_KEY);
       target.innerHTML =
         `${ctx.slotRegistry}` +
-        `<section class="grid-frame ui-grid" role="grid" aria-label="${ctx.gridTitle}">` +
+        `<section class="grid-frame ui-grid" part="grid-frame" 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}">` +
+              `<div class="header-grid ui-grid-header ui-grid-header-canvas" part="header" style="grid-template-columns:${ctx.templateColumns}">` +
                 ctx.headerContent +
               `</div>` +
             `</div>` +

package/src/ui-grid-standalone.element.ts

@@ -85,6 +85,7 @@ import {
   type GridSaveState,
   type VanillaGridController,
 } from './grid-controller';
+import { addUserStyles } from './adopt-styles';
 import emptyTemplate from './ui-grid-empty.template';
 import gridShellTemplate from './ui-grid-shell.template';
 import {
@@ -117,6 +118,11 @@ export type VanillaUiGridElement = HTMLElement & {
    * full contract.
    */
   setFrameworkRenderedSlots(config: FrameworkRenderedSlotsConfig): void;
+  /**
+   * Add CSS to the grid's shadow root, after the grid's own styles so it wins
+   * at equal specificity. Returns a function that removes it.
+   */
+  addStyles(cssText: string): () => void;
 };
 
 type VanillaGridOptions = GridOptions & {
@@ -214,6 +220,11 @@ export class UiGridStandaloneElement extends HTMLElement {
     this.ensureController(this.buildEffectiveOptions(this.activeOptions));
   }
 
+  /** Append application CSS after the grid styles; return a removal callback. */
+  addStyles(cssText: string): () => void {
+    return addUserStyles(this.ensureShadowRoot(), cssText);
+  }
+
   /**
    * Declare which slots are framework-rendered. When a slot is flagged, the
    * element renders a `<slot name="…">` placeholder at the usual site instead
@@ -240,6 +251,9 @@ export class UiGridStandaloneElement extends HTMLElement {
       // hasCell() / hasHeader() / etc. — values not captured by the
       // row-level fingerprint.
       this.lastRowStateFingerprints.clear();
+      // The patch path keeps existing nodes (e.g. a <ui-grid-filter-cell>
+      // that should now be a <slot>), so the next pass must be a full render.
+      this.lastStructureKey = null;
       this.render();
     }
   }
@@ -707,6 +721,9 @@ export class UiGridStandaloneElement extends HTMLElement {
     this.templateObserver?.disconnect();
     this.templateObserver = null;
     this.teardownAutoResize();
+    this.scrollbarObserver?.disconnect();
+    this.scrollbarObserver = null;
+    this.observedBodyViewport = null;
     if (this.scrollFrame !== null) {
       cancelAnimationFrame(this.scrollFrame);
       this.scrollFrame = null;
@@ -1050,9 +1067,30 @@ export class UiGridStandaloneElement extends HTMLElement {
       });
     }
 
+    this.syncScrollbarCompensation(root);
     this.autoAdjustHeight(snapshot);
   }
 
+  private scrollbarObserver: ResizeObserver | null = null;
+  private observedBodyViewport: HTMLElement | null = null;
+
+  // The header and filter strips have no scrollbar, so they are narrowed by the
+  // body viewport's to keep right-pinned cells and scroll range aligned (#7402).
+  private syncScrollbarCompensation(root: ShadowRoot): void {
+    const frame = root.querySelector<HTMLElement>('.grid-frame');
+    const viewport = root.querySelector<HTMLElement>('.grid-body-viewport');
+    if (!frame || !viewport) return;
+    const width = `${Math.max(0, viewport.offsetWidth - viewport.clientWidth)}px`;
+    if (frame.style.getPropertyValue('--ui-grid-scrollbar-width') !== width) {
+      frame.style.setProperty('--ui-grid-scrollbar-width', width);
+    }
+    if (viewport === this.observedBodyViewport || typeof ResizeObserver === 'undefined') return;
+    this.scrollbarObserver ??= new ResizeObserver(() => this.syncScrollbarCompensation(root));
+    if (this.observedBodyViewport) this.scrollbarObserver.unobserve(this.observedBodyViewport);
+    this.scrollbarObserver.observe(viewport);
+    this.observedBodyViewport = viewport;
+  }
+
   /** @internal */
   private inAutoAdjust = false;
   private lastAutoHeight = 0;
@@ -1259,7 +1297,7 @@ export class UiGridStandaloneElement extends HTMLElement {
     const body =
       snapshot.pipeline.displayItems.length > 0
         ? virtualizationEnabled
-          ? bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent)
+          ? bodyVirtualMarkup(templateColumns, totalVirtualHeight, virtualOffset, bodyContent, snapshot.rowSize)
           : bodyStaticMarkup(templateColumns, bodyContent)
         : this.renderEmptyState(
             options.emptyMessage ?? labels.emptyHeading,
@@ -1318,8 +1356,9 @@ export class UiGridStandaloneElement extends HTMLElement {
     templateColumns: string,
     virtualOffset: number,
     totalVirtualHeight: number,
+    rowSize: number,
   ): HTMLElement | null {
-    return reconcileBodyRoot(this, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight);
+    return reconcileBodyRoot(this, root, kind, options, labels, templateColumns, virtualOffset, totalVirtualHeight, rowSize);
   }
 
   private reconcilePagination(