@ornery/ui-grid-vanilla 1.0.5 → 1.0.7

package/src/events.ts

@@ -28,6 +28,24 @@ import type { UiGridStandaloneElement } from './ui-grid-standalone.element';
 
 type BoundShadowRoot = ShadowRoot & { __uiGridBound?: boolean };
 
+/**
+ * Find the `.body-cell[data-row][data-column]` ancestor of an event by walking
+ * the composed event path. Plain `closest()` from the click target stops at
+ * shadow boundaries — for clicks on framework-projected light-DOM cell
+ * content (Angular ng-template, React render props), the body cell sits in
+ * the shadow tree on the other side of the slot. composedPath includes both
+ * sides, so we just scan it.
+ */
+function bodyCellFromEvent(event: Event): HTMLElement | null {
+  const path = event.composedPath();
+  for (const node of path) {
+    if (node instanceof HTMLElement && node.classList.contains('body-cell')) {
+      if (node.dataset['row'] && node.dataset['column']) return node;
+    }
+  }
+  return null;
+}
+
 /**
  * Watch the element's light DOM for `<template slot="…">` changes so
  * consumer template edits trigger a re-render. Ports the old grid's
@@ -37,7 +55,23 @@ type BoundShadowRoot = ShadowRoot & { __uiGridBound?: boolean };
 export function observeTemplateSlots(el: UiGridStandaloneElement): void {
   if (el.templateObserver) return;
 
-  el.templateObserver = new MutationObserver(() => {
+  el.templateObserver = new MutationObserver((mutations) => {
+    // We only care about consumer-provided `<template slot="…">` nodes —
+    // their innerHTML feeds the string-interpolation render path. Skip
+    // mutations that only touched non-template slotted nodes (e.g. the
+    // `<span slot="cell-…">` wrappers Angular / React wrappers append to
+    // project framework-rendered content). Otherwise those framework
+    // wrappers would re-trigger ensureController on every slot delta and
+    // loop forever.
+    const involvesTemplate = mutationsTouchTemplateSlot(mutations);
+    if (!involvesTemplate) return;
+
+    // Consumer light-DOM templates (`<template slot="cell-…">`) feed the
+    // string-interpolation render path. When they're added/removed/edited
+    // the per-row visual fingerprint cache becomes stale (the fingerprint
+    // doesn't track template content), so blow it away to force the next
+    // patch pass to re-render every cell shell.
+    el.lastRowStateFingerprints.clear();
     if (el.activeOptions) {
       el.ensureController(el.buildEffectiveOptions(el.activeOptions));
     } else {
@@ -53,6 +87,23 @@ export function observeTemplateSlots(el: UiGridStandaloneElement): void {
   });
 }
 
+function mutationsTouchTemplateSlot(mutations: MutationRecord[]): boolean {
+  for (const m of mutations) {
+    if (m.type === 'attributes' && m.target instanceof HTMLTemplateElement) {
+      return true;
+    }
+    if (m.type === 'childList') {
+      for (const node of m.addedNodes) {
+        if (node instanceof HTMLTemplateElement && node.hasAttribute('slot')) return true;
+      }
+      for (const node of m.removedNodes) {
+        if (node instanceof HTMLTemplateElement && node.hasAttribute('slot')) return true;
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * Mirror horizontal scroll from the body viewport onto the header +
  * filter strips. The strips are real scroll containers (necessary for
@@ -115,7 +166,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // don't reliably focus a div with tabindex="0" on click, so we force it
     // here. This is required for arrow-key nav to work — otherwise focus
     // stays on the grid-table scroll container and arrows just scroll.
-    const clickedCell = realTarget.closest?.<HTMLElement>('.body-cell[data-row][data-column]') ?? null;
+    const clickedCell = bodyCellFromEvent(event);
     if (clickedCell && !realTarget.closest('[data-role="editor"]')) {
       const rowId = clickedCell.dataset['row'];
       const columnName = clickedCell.dataset['column'];
@@ -140,11 +191,8 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // Row-header checkbox column click — mirrors the old
     // selectionRowHeaderButtons directive: even when enableFullRowSelection
     // is off, clicking the header checkbox selects the row.
-    const checkboxNode = realTarget.closest?.<HTMLElement>(
-      '.body-cell[data-row][data-column="selectionRowHeaderCol"]',
-    );
-    if (checkboxNode) {
-      const rowId = checkboxNode.dataset['row'];
+    if (clickedCell?.dataset['column'] === 'selectionRowHeaderCol') {
+      const rowId = clickedCell.dataset['row'];
       if (rowId) {
         event.stopPropagation();
         handleRowHeaderCheckboxClick(el, rowId, event);
@@ -255,9 +303,10 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     }
 
     if (action === 'benchmark') {
-      const result = el.controller.gridApi.core.benchmark();
-      el.benchmarkAverage = result.averageMs.toFixed(2);
-      el.render();
+      void el.controller.gridApi.core.benchmark().then((result) => {
+        el.benchmarkAverage = result.averageMs.toFixed(2);
+        el.render();
+      });
       return;
     }
 
@@ -270,13 +319,16 @@ export function bindEvents(el: UiGridStandaloneElement): void {
   // focusin / focusout: keep `focusedCell` in sync with DOM focus
   // ─────────────────────────────────────────────────────────────────
   root.addEventListener('focusin', (event) => {
-    const target = event.target as HTMLElement | null;
-    if (!target) return;
-    const cell = target.closest<HTMLElement>('.body-cell[data-row][data-column]');
+    const cell = bodyCellFromEvent(event);
     const rowId = cell?.dataset['row'];
     const columnName = cell?.dataset['column'];
     if (rowId && columnName) {
-      el.focusedCell = { rowId, columnName };
+      const previous = el.focusedCell;
+      const next = { rowId, columnName };
+      if (!previous || previous.rowId !== rowId || previous.columnName !== columnName) {
+        el.focusedCell = next;
+        applyFocusedCellClass(el, previous, next);
+      }
     }
   });
 
@@ -325,7 +377,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     if (realTarget.closest('.filter-cell')) return;
     const resolved = el.controller.getResolvedSelectionOptions();
     if (!resolved.enableRowSelection || !resolved.multiSelect) return;
-    const startCell = realTarget.closest<HTMLElement>('.body-cell[data-row][data-column]');
+    const startCell = bodyCellFromEvent(event);
     if (!startCell) return;
     const startRowId = startCell.dataset['row'];
     if (!startRowId) return;
@@ -356,9 +408,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     };
 
     const handleMove = (moveEvent: MouseEvent): void => {
-      const path = moveEvent.composedPath();
-      const firstEl = path[0] as HTMLElement | undefined;
-      const cell = firstEl?.closest?.<HTMLElement>('.body-cell[data-row][data-column]');
+      const cell = bodyCellFromEvent(moveEvent);
       if (!cell) return;
       const rowId = cell.dataset['row'];
       if (!rowId) return;
@@ -455,7 +505,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
       }
     }
 
-    const cell = target.closest<HTMLElement>('.body-cell');
+    const cell = bodyCellFromEvent(event);
     if (!cell) return;
 
     const rowId = cell.dataset['row'];
@@ -473,11 +523,13 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     const target = event.target as HTMLElement | null;
     if (!target || !el.controller) return;
 
+    const onBodyCell = bodyCellFromEvent(event);
+
     // cellNav.keyDownOverrides: declared overrides skip cellnav's default
     // handling and raise viewPortKeyDown so consumers can disable built-in
     // key handling per-key.
     const overrides = el.controller.getOptions().keyDownOverrides ?? [];
-    if (overrides.length && target.closest('.body-cell')) {
+    if (overrides.length && onBodyCell) {
       for (const override of overrides) {
         if (matchesKeyOverride(override, keyboardEvent)) {
           el.controller.raiseCellNavKeyEvent('keydown', keyboardEvent);
@@ -490,7 +542,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     if (
       (keyboardEvent.ctrlKey || keyboardEvent.metaKey) &&
       (keyboardEvent.key === 'a' || keyboardEvent.key === 'A') &&
-      target.closest('.body-cell')
+      onBodyCell
     ) {
       const resolved = el.controller.getResolvedSelectionOptions();
       if (resolved.enableRowSelection && resolved.multiSelect) {
@@ -502,7 +554,7 @@ export function bindEvents(el: UiGridStandaloneElement): void {
 
     // Space toggles the row when on the checkbox column or in full-row-selection mode.
     if (keyboardEvent.key === ' ' || keyboardEvent.key === 'Spacebar') {
-      const cell = target.closest<HTMLElement>('.body-cell[data-row][data-column]');
+      const cell = onBodyCell;
       const rowId = cell?.dataset['row'];
       const columnName = cell?.dataset['column'];
       if (cell && rowId && columnName) {
@@ -567,10 +619,9 @@ export function bindEvents(el: UiGridStandaloneElement): void {
     // cell).
     let rowId: string | undefined;
     let columnName: string | undefined;
-    const cell = target.closest<HTMLElement>('.body-cell');
-    if (cell) {
-      rowId = cell.dataset['row'];
-      columnName = cell.dataset['column'];
+    if (onBodyCell) {
+      rowId = onBodyCell.dataset['row'];
+      columnName = onBodyCell.dataset['column'];
     } else if (el.focusedCell) {
       rowId = el.focusedCell.rowId;
       columnName = el.focusedCell.columnName;

package/src/framework-slots.ts

@@ -261,6 +261,24 @@ export class FrameworkSlotBridge {
     });
   }
 
+  /**
+   * Carry forward every previously-known cell slot for `rowId` into the
+   * current pending set. Used by the structural patch path when a row's
+   * fingerprint matches the previous render's: `stageCell` would normally
+   * re-record the slot during cell rendering, but the fingerprint
+   * short-circuit skips the render pass for unchanged rows. Without this,
+   * `flush()` would diff pending (missing the row's slots) against last
+   * (containing them) and emit a spurious `removed` for every cell of the
+   * unchanged row, destroying the framework wrappers' projected content.
+   */
+  carryRowCells(rowId: string): void {
+    for (const [slotName, slot] of this.lastCellSlots) {
+      if (slot.rowId === rowId) {
+        this.pendingCellSlots.set(slotName, slot);
+      }
+    }
+  }
+
   stageExpandableRow(row: GridRow, rowIndex: number): void {
     const slotName = expandableRowSlotName(row);
     this.pendingExpandableRowSlots.set(slotName, {