@toolbox-web/grid-angular 0.14.3 → 0.16.0

package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs

@@ -181,6 +181,38 @@ function injectGridUndoRedo() {
         },
         getUndoStack: () => getPlugin()?.getUndoStack() ?? [],
         getRedoStack: () => getPlugin()?.getRedoStack() ?? [],
+        recordEdit: (rowIndex, field, oldValue, newValue) => {
+            const plugin = getPlugin();
+            if (!plugin) {
+                console.warn(`[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n` +
+                    `  → Enable undo/redo on the grid:\n` +
+                    `    <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />`);
+                return;
+            }
+            plugin.recordEdit(rowIndex, field, oldValue, newValue);
+            syncSignals();
+        },
+        beginTransaction: () => {
+            const plugin = getPlugin();
+            if (!plugin) {
+                console.warn(`[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n` +
+                    `  → Enable undo/redo on the grid:\n` +
+                    `    <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />`);
+                return;
+            }
+            plugin.beginTransaction();
+        },
+        endTransaction: () => {
+            const plugin = getPlugin();
+            if (!plugin) {
+                console.warn(`[tbw-grid:undoRedo] UndoRedoPlugin not found.\n\n` +
+                    `  → Enable undo/redo on the grid:\n` +
+                    `    <tbw-grid [editing]="'dblclick'" [undoRedo]="true" />`);
+                return;
+            }
+            plugin.endTransaction();
+            syncSignals();
+        },
     };
 }
 

package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toolbox-web-grid-angular-features-undo-redo.mjs","sources":["../../../../libs/grid-angular/features/undo-redo/src/index.ts","../../../../libs/grid-angular/features/undo-redo/src/toolbox-web-grid-angular-features-undo-redo.ts"],"sourcesContent":["/**\n * Undo/Redo feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `undoRedo` input on Grid directive.\n * Also exports `injectGridUndoRedo()` for programmatic undo/redo control.\n * Requires editing feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/editing';\n * import '@toolbox-web/grid-angular/features/undo-redo';\n *\n * <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />\n * ```\n *\n * @example Using injectGridUndoRedo\n * ```typescript\n * import { injectGridUndoRedo } from '@toolbox-web/grid-angular/features/undo-redo';\n *\n * @Component({...})\n * export class MyComponent {\n *   private undoRedo = injectGridUndoRedo();\n *\n *   undo() { this.undoRedo.undo(); }\n *   redo() { this.undoRedo.redo(); }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { UndoRedoPlugin, type EditAction } from '@toolbox-web/grid/plugins/undo-redo';\n\nregisterFeature('undoRedo', (config) => {\n  if (config === true) {\n    return new UndoRedoPlugin();\n  }\n  return new UndoRedoPlugin(config ?? undefined);\n});\n\n/**\n * Undo/Redo methods returned from injectGridUndoRedo.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface UndoRedoMethods {\n  /**\n   * Undo the last edit action.\n   * @returns The undone action, or null if nothing to undo\n   */\n  undo: () => EditAction | null;\n\n  /**\n   * Redo the last undone action.\n   * @returns The redone action, or null if nothing to redo\n   */\n  redo: () => EditAction | null;\n\n  /**\n   * Reactive signal indicating whether undo is available.\n   * Updates automatically when edits are made, undone, redone, or history is cleared.\n   *\n   * @example\n   * ```typescript\n   * // In template:\n   * // <button [disabled]=\"!undoRedo.canUndo()\">Undo</button>\n   *\n   * // In computed:\n   * readonly undoAvailable = computed(() => this.undoRedo.canUndo());\n   * ```\n   */\n  canUndo: Signal<boolean>;\n\n  /**\n   * Reactive signal indicating whether redo is available.\n   * Updates automatically when edits are made, undone, redone, or history is cleared.\n   *\n   * @example\n   * ```typescript\n   * // In template:\n   * // <button [disabled]=\"!undoRedo.canRedo()\">Redo</button>\n   *\n   * // In computed:\n   * readonly redoAvailable = computed(() => this.undoRedo.canRedo());\n   * ```\n   */\n  canRedo: Signal<boolean>;\n\n  /**\n   * Clear all undo/redo history.\n   */\n  clearHistory: () => void;\n\n  /**\n   * Get a copy of the current undo stack.\n   */\n  getUndoStack: () => EditAction[];\n\n  /**\n   * Get a copy of the current redo stack.\n   */\n  getRedoStack: () => EditAction[];\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic undo/redo control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/editing';\n * import '@toolbox-web/grid-angular/features/undo-redo';\n * import { injectGridUndoRedo } from '@toolbox-web/grid-angular/features/undo-redo';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   template: `\n *     <button (click)=\"undoRedo.undo()\" [disabled]=\"!undoRedo.canUndo()\">Undo</button>\n *     <button (click)=\"undoRedo.redo()\" [disabled]=\"!undoRedo.canRedo()\">Redo</button>\n *     <tbw-grid [rows]=\"rows\" [editing]=\"'dblclick'\" [undoRedo]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   undoRedo = injectGridUndoRedo();\n * }\n * ```\n */\nexport function injectGridUndoRedo(): UndoRedoMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive undo/redo availability signals\n  const canUndoSignal = signal(false);\n  const canRedoSignal = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Sync canUndo/canRedo signals with the current plugin state.\n   */\n  const syncSignals = (): void => {\n    const plugin = getPlugin();\n    if (plugin) {\n      canUndoSignal.set(plugin.canUndo());\n      canRedoSignal.set(plugin.canRedo());\n    }\n  };\n\n  /**\n   * Attach event listeners to the grid for undo/redo state changes.\n   * Listens for `undo`, `redo`, and `cell-commit` DOM events.\n   */\n  const attachListeners = (grid: DataGridElement): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('undo', syncSignals);\n    grid.addEventListener('redo', syncSignals);\n    grid.addEventListener('cell-commit', syncSignals);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('undo', syncSignals);\n      grid.removeEventListener('redo', syncSignals);\n      grid.removeEventListener('cell-commit', syncSignals);\n    });\n  };\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListeners(grid);\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): UndoRedoPlugin | undefined => {\n    return getGrid()?.getPlugin(UndoRedoPlugin);\n  };\n\n  // Eagerly discover the grid after the first render so event listeners\n  // are attached and isReady updates without requiring a programmatic\n  // method call. Falls back to MutationObserver for lazy-rendered content.\n  afterNextRender(() => {\n    const grid = getGrid();\n    if (grid) {\n      grid.ready?.().then(syncSignals);\n      return;\n    }\n\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      const discovered = getGrid();\n      if (discovered) {\n        observer.disconnect();\n        discovered.ready?.().then(syncSignals);\n      }\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n    canUndo: canUndoSignal.asReadonly(),\n    canRedo: canRedoSignal.asReadonly(),\n\n    undo: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return null;\n      }\n      const result = plugin.undo();\n      syncSignals();\n      return result;\n    },\n\n    redo: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return null;\n      }\n      const result = plugin.redo();\n      syncSignals();\n      return result;\n    },\n\n    clearHistory: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearHistory();\n      syncSignals();\n    },\n\n    getUndoStack: () => getPlugin()?.getUndoStack() ?? [],\n\n    getRedoStack: () => getPlugin()?.getRedoStack() ?? [],\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"toolbox-web-grid-angular-features-undo-redo.mjs","sources":["../../../../libs/grid-angular/features/undo-redo/src/index.ts","../../../../libs/grid-angular/features/undo-redo/src/toolbox-web-grid-angular-features-undo-redo.ts"],"sourcesContent":["/**\n * Undo/Redo feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `undoRedo` input on Grid directive.\n * Also exports `injectGridUndoRedo()` for programmatic undo/redo control.\n * Requires editing feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/editing';\n * import '@toolbox-web/grid-angular/features/undo-redo';\n *\n * <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />\n * ```\n *\n * @example Using injectGridUndoRedo\n * ```typescript\n * import { injectGridUndoRedo } from '@toolbox-web/grid-angular/features/undo-redo';\n *\n * @Component({...})\n * export class MyComponent {\n *   private undoRedo = injectGridUndoRedo();\n *\n *   undo() { this.undoRedo.undo(); }\n *   redo() { this.undoRedo.redo(); }\n * }\n * ```\n *\n * @packageDocumentation\n */\n\nimport { afterNextRender, DestroyRef, ElementRef, inject, signal, type Signal } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeature } from '@toolbox-web/grid-angular';\nimport { UndoRedoPlugin, type UndoRedoAction } from '@toolbox-web/grid/plugins/undo-redo';\n\nregisterFeature('undoRedo', (config) => {\n  if (config === true) {\n    return new UndoRedoPlugin();\n  }\n  return new UndoRedoPlugin(config ?? undefined);\n});\n\n/**\n * Undo/Redo methods returned from injectGridUndoRedo.\n *\n * Uses lazy discovery - the grid is found on first method call, not during initialization.\n */\nexport interface UndoRedoMethods {\n  /**\n   * Undo the last edit action.\n   * @returns The undone action (or compound action), or null if nothing to undo\n   */\n  undo: () => UndoRedoAction | null;\n\n  /**\n   * Redo the last undone action.\n   * @returns The redone action (or compound action), or null if nothing to redo\n   */\n  redo: () => UndoRedoAction | null;\n\n  /**\n   * Reactive signal indicating whether undo is available.\n   * Updates automatically when edits are made, undone, redone, or history is cleared.\n   *\n   * @example\n   * ```typescript\n   * // In template:\n   * // <button [disabled]=\"!undoRedo.canUndo()\">Undo</button>\n   *\n   * // In computed:\n   * readonly undoAvailable = computed(() => this.undoRedo.canUndo());\n   * ```\n   */\n  canUndo: Signal<boolean>;\n\n  /**\n   * Reactive signal indicating whether redo is available.\n   * Updates automatically when edits are made, undone, redone, or history is cleared.\n   *\n   * @example\n   * ```typescript\n   * // In template:\n   * // <button [disabled]=\"!undoRedo.canRedo()\">Redo</button>\n   *\n   * // In computed:\n   * readonly redoAvailable = computed(() => this.undoRedo.canRedo());\n   * ```\n   */\n  canRedo: Signal<boolean>;\n\n  /**\n   * Clear all undo/redo history.\n   */\n  clearHistory: () => void;\n\n  /**\n   * Get a copy of the current undo stack.\n   */\n  getUndoStack: () => UndoRedoAction[];\n\n  /**\n   * Get a copy of the current redo stack.\n   */\n  getRedoStack: () => UndoRedoAction[];\n\n  /**\n   * Manually record an edit action.\n   * If a transaction is active, the action is buffered; otherwise it's pushed to the undo stack.\n   */\n  recordEdit: (rowIndex: number, field: string, oldValue: unknown, newValue: unknown) => void;\n\n  /**\n   * Begin a transaction. All edits recorded until `endTransaction()` are grouped\n   * into a single compound action for undo/redo.\n   * @throws If a transaction is already active\n   */\n  beginTransaction: () => void;\n\n  /**\n   * End the active transaction and push the compound action to the undo stack.\n   * If only one edit was recorded, it's pushed as a plain EditAction.\n   * If no edits were recorded, the transaction is discarded.\n   * @throws If no transaction is active\n   */\n  endTransaction: () => void;\n\n  /**\n   * Signal indicating if grid is ready.\n   */\n  isReady: Signal<boolean>;\n}\n\n/**\n * Angular inject function for programmatic undo/redo control.\n *\n * Uses **lazy grid discovery** - the grid element is found when methods are called,\n * not during initialization.\n *\n * @example\n * ```typescript\n * import { Component } from '@angular/core';\n * import { Grid } from '@toolbox-web/grid-angular';\n * import '@toolbox-web/grid-angular/features/editing';\n * import '@toolbox-web/grid-angular/features/undo-redo';\n * import { injectGridUndoRedo } from '@toolbox-web/grid-angular/features/undo-redo';\n *\n * @Component({\n *   selector: 'app-my-grid',\n *   imports: [Grid],\n *   template: `\n *     <button (click)=\"undoRedo.undo()\" [disabled]=\"!undoRedo.canUndo()\">Undo</button>\n *     <button (click)=\"undoRedo.redo()\" [disabled]=\"!undoRedo.canRedo()\">Redo</button>\n *     <tbw-grid [rows]=\"rows\" [editing]=\"'dblclick'\" [undoRedo]=\"true\"></tbw-grid>\n *   `\n * })\n * export class MyGridComponent {\n *   undoRedo = injectGridUndoRedo();\n * }\n * ```\n */\nexport function injectGridUndoRedo(): UndoRedoMethods {\n  const elementRef = inject(ElementRef);\n  const destroyRef = inject(DestroyRef);\n  const isReady = signal(false);\n\n  // Reactive undo/redo availability signals\n  const canUndoSignal = signal(false);\n  const canRedoSignal = signal(false);\n\n  let cachedGrid: DataGridElement | null = null;\n  let readyPromiseStarted = false;\n  let listenerAttached = false;\n\n  /**\n   * Sync canUndo/canRedo signals with the current plugin state.\n   */\n  const syncSignals = (): void => {\n    const plugin = getPlugin();\n    if (plugin) {\n      canUndoSignal.set(plugin.canUndo());\n      canRedoSignal.set(plugin.canRedo());\n    }\n  };\n\n  /**\n   * Attach event listeners to the grid for undo/redo state changes.\n   * Listens for `undo`, `redo`, and `cell-commit` DOM events.\n   */\n  const attachListeners = (grid: DataGridElement): void => {\n    if (listenerAttached) return;\n    listenerAttached = true;\n\n    grid.addEventListener('undo', syncSignals);\n    grid.addEventListener('redo', syncSignals);\n    grid.addEventListener('cell-commit', syncSignals);\n\n    destroyRef.onDestroy(() => {\n      grid.removeEventListener('undo', syncSignals);\n      grid.removeEventListener('redo', syncSignals);\n      grid.removeEventListener('cell-commit', syncSignals);\n    });\n  };\n\n  const getGrid = (): DataGridElement | null => {\n    if (cachedGrid) return cachedGrid;\n\n    const grid = elementRef.nativeElement.querySelector('tbw-grid') as DataGridElement | null;\n    if (grid) {\n      cachedGrid = grid;\n      attachListeners(grid);\n      if (!readyPromiseStarted) {\n        readyPromiseStarted = true;\n        grid.ready?.().then(() => isReady.set(true));\n      }\n    }\n    return grid;\n  };\n\n  const getPlugin = (): UndoRedoPlugin | undefined => {\n    return getGrid()?.getPlugin(UndoRedoPlugin);\n  };\n\n  // Eagerly discover the grid after the first render so event listeners\n  // are attached and isReady updates without requiring a programmatic\n  // method call. Falls back to MutationObserver for lazy-rendered content.\n  afterNextRender(() => {\n    const grid = getGrid();\n    if (grid) {\n      grid.ready?.().then(syncSignals);\n      return;\n    }\n\n    const host = elementRef.nativeElement as HTMLElement;\n    const observer = new MutationObserver(() => {\n      const discovered = getGrid();\n      if (discovered) {\n        observer.disconnect();\n        discovered.ready?.().then(syncSignals);\n      }\n    });\n    observer.observe(host, { childList: true, subtree: true });\n\n    destroyRef.onDestroy(() => observer.disconnect());\n  });\n\n  return {\n    isReady: isReady.asReadonly(),\n    canUndo: canUndoSignal.asReadonly(),\n    canRedo: canRedoSignal.asReadonly(),\n\n    undo: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return null;\n      }\n      const result = plugin.undo();\n      syncSignals();\n      return result;\n    },\n\n    redo: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return null;\n      }\n      const result = plugin.redo();\n      syncSignals();\n      return result;\n    },\n\n    clearHistory: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.clearHistory();\n      syncSignals();\n    },\n\n    getUndoStack: () => getPlugin()?.getUndoStack() ?? [],\n\n    getRedoStack: () => getPlugin()?.getRedoStack() ?? [],\n\n    recordEdit: (rowIndex: number, field: string, oldValue: unknown, newValue: unknown) => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.recordEdit(rowIndex, field, oldValue, newValue);\n      syncSignals();\n    },\n\n    beginTransaction: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.beginTransaction();\n    },\n\n    endTransaction: () => {\n      const plugin = getPlugin();\n      if (!plugin) {\n        console.warn(\n          `[tbw-grid:undoRedo] UndoRedoPlugin not found.\\n\\n` +\n            `  → Enable undo/redo on the grid:\\n` +\n            `    <tbw-grid [editing]=\"'dblclick'\" [undoRedo]=\"true\" />`,\n        );\n        return;\n      }\n      plugin.endTransaction();\n      syncSignals();\n    },\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/toolbox-web-grid-angular.mjs

@@ -2026,6 +2026,13 @@ class GridAdapter {
             // This keeps Angular component editors in sync without manual DOM patching.
             ctx.onValueChange?.((newVal) => {
                 try {
+                    // Notify the editor so it can clear stale internal state (e.g., searchText
+                    // in autocomplete editors) before the value input updates. This ensures the
+                    // template reads fresh state during the synchronous detectChanges() below.
+                    const instance = componentRef.instance;
+                    if (typeof instance['onExternalValueChange'] === 'function') {
+                        instance.onExternalValueChange(newVal);
+                    }
                     componentRef.setInput('value', newVal);
                     componentRef.changeDetectorRef.detectChanges();
                 }
@@ -2789,6 +2796,7 @@ class BaseGridEditor {
     // ============================================================================
     /**
      * Emits when the user commits a new value.
+     * Emits `null` when a nullable field is cleared.
      */
     commit = output();
     /**
@@ -2920,6 +2928,22 @@ class BaseGridEditor {
     onEditClose() {
         // Default: no-op. Subclasses override.
     }
+    /**
+     * Called by the grid adapter when the cell value changes externally
+     * (e.g., via `updateRow()` cascade or undo/redo).
+     *
+     * Override in subclasses to reset internal state (search text, selection
+     * flags, etc.) so the editor displays the updated value.
+     *
+     * This runs **synchronously** before the value input is updated, giving
+     * the editor a chance to clear stale state before the next change-detection
+     * pass re-reads the template.
+     *
+     * @param _newVal The new cell value being pushed from the grid
+     */
+    onExternalValueChange(_newVal) {
+        // Default: no-op. Subclasses override as needed.
+    }
     /**
      * Commit a new value. Emits the commit output AND dispatches a DOM event.
      * The DOM event enables the grid's auto-wiring to catch the commit.
@@ -3113,10 +3137,9 @@ class BaseGridEditorCVA extends BaseGridEditor {
         this.cvaValue.set(value);
         this._onChange(value);
         this._onTouched();
-        // Update grid
-        if (value != null) {
-            this.commitValue(value);
-        }
+        // Update grid (null is valid for nullable columns — the grid's cell-commit
+        // handler and EditingPlugin will apply it correctly)
+        this.commitValue(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: BaseGridEditorCVA, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: BaseGridEditorCVA, isStandalone: true, usesInheritance: true, ngImport: i0 });
@@ -3207,6 +3230,7 @@ let anchorCounter = 0;
  * - **Escape handling** — closes the panel and returns focus to the inline input
  * - **Synthetic Tab dispatch** — advances grid focus after overlay close
  * - **Automatic teardown** — removes the panel from `<body>` and cleans up listeners
+ * - **External focus registration** — auto-registers the panel via `grid.registerExternalFocusContainer()` so the grid keeps `data-has-focus` and editors stay open while the overlay has focus
  *
  * ## Usage
  *
@@ -3329,6 +3353,9 @@ class BaseOverlayEditor extends BaseGridEditor {
         }
         // Move panel to body so it escapes grid overflow clipping
         document.body.appendChild(panel);
+        // Register the panel as an external focus container on the grid
+        // so focus moving into the overlay is treated as "still in the grid"
+        this._getGridElement()?.registerExternalFocusContainer?.(panel);
         // Set up click-outside detection
         this._abortCtrl = new AbortController();
         document.addEventListener('pointerdown', (e) => this._onDocumentPointerDown(e), {
@@ -3388,6 +3415,10 @@ class BaseOverlayEditor extends BaseGridEditor {
         this._abortCtrl = null;
         this._focusObserver?.disconnect();
         this._focusObserver = null;
+        // Unregister the panel from the grid's external focus container registry
+        if (this._panel) {
+            this._getGridElement()?.unregisterExternalFocusContainer?.(this._panel);
+        }
         if (this._panel?.parentNode) {
             this._panel.parentNode.removeChild(this._panel);
         }
@@ -3500,6 +3531,10 @@ class BaseOverlayEditor extends BaseGridEditor {
     _getCell() {
         return this._elementRef.nativeElement.closest('[part="cell"]') ?? null;
     }
+    /** Find the parent `<tbw-grid>` element for this editor. */
+    _getGridElement() {
+        return this._elementRef.nativeElement.closest('tbw-grid') ?? null;
+    }
     /**
      * JS fallback positioning for browsers without CSS Anchor Positioning.
      * Uses `getBoundingClientRect()` with viewport overflow detection.
@@ -3597,13 +3632,18 @@ class BaseOverlayEditor extends BaseGridEditor {
         if (!cell)
             return;
         let justOpened = false;
+        let pendingHideRaf = 0;
         this._focusObserver = new MutationObserver((mutations) => {
             for (const mutation of mutations) {
                 if (mutation.type !== 'attributes' || mutation.attributeName !== 'class')
                     continue;
                 const isFocused = cell.classList.contains('cell-focus');
                 if (isFocused && !this._isOpen) {
-                    // Cell just gained focus — open overlay if appropriate
+                    // Cell just gained focus — cancel any pending hide and open overlay.
+                    if (pendingHideRaf) {
+                        cancelAnimationFrame(pendingHideRaf);
+                        pendingHideRaf = 0;
+                    }
                     justOpened = true;
                     this.showOverlay();
                     this.onOverlayOpened();
@@ -3615,8 +3655,20 @@ class BaseOverlayEditor extends BaseGridEditor {
                     }, 0);
                 }
                 else if (!isFocused && this._isOpen && !justOpened) {
-                    // Cell lost focus — hide overlay silently
-                    this.hideOverlay(true);
+                    // Cell lost focus — defer hide to allow render cycles to settle.
+                    // Re-renders (e.g., from ResizeObserver after a footer appears)
+                    // may transiently toggle cell-focus within the same frame.
+                    // Deferring to the next animation frame lets the render pipeline
+                    // finish before we decide whether the overlay should actually close.
+                    if (pendingHideRaf)
+                        cancelAnimationFrame(pendingHideRaf);
+                    pendingHideRaf = requestAnimationFrame(() => {
+                        pendingHideRaf = 0;
+                        // Re-check settled state — cell-focus may have been re-applied
+                        if (!cell.classList.contains('cell-focus') && this._isOpen) {
+                            this.hideOverlay(true);
+                        }
+                    });
                 }
             }
         });