npm - @toolbox-web/grid-angular - Versions diffs - 0.14.2 → 0.15.0 - Mend

@toolbox-web/grid-angular 0.14.2 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

@@ -2310,13 +2310,12 @@ function provideGridIcons(icons) {
  * ## Usage
  *
  * ```typescript
- * import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+ * import { Component } from '@angular/core';
  * import { Grid, injectGrid } from '@toolbox-web/grid-angular';
  *
  * @Component({
  *   selector: 'app-my-grid',
  *   imports: [Grid],
- *   schemas: [CUSTOM_ELEMENTS_SCHEMA],
  *   template: `
  *     <button (click)="handleResize()">Force Layout</button>
  *     <button (click)="handleExport()" [disabled]="!grid.isReady()">Export</button>
@@ -2872,9 +2871,14 @@ class BaseGridEditor {
         const grid = this.elementRef.nativeElement.closest('tbw-grid');
         if (!grid)
             return;
+        const beforeHandler = () => this.onBeforeEditClose();
+        grid.addEventListener('before-edit-close', beforeHandler, { once: true });
         const handler = () => this.onEditClose();
         grid.addEventListener('edit-close', handler, { once: true });
-        this._editCloseCleanup = () => grid.removeEventListener('edit-close', handler);
+        this._editCloseCleanup = () => {
+            grid.removeEventListener('before-edit-close', beforeHandler);
+            grid.removeEventListener('edit-close', handler);
+        };
     }
     // ============================================================================
     // Methods
@@ -2891,6 +2895,18 @@ class BaseGridEditor {
     isCellFocused() {
         return this.elementRef.nativeElement.closest('[part="cell"]')?.classList.contains('cell-focus') ?? false;
     }
+    /**
+     * Called **before** the grid clears editing state and destroys editor DOM.
+     *
+     * At this point the commit callback is still active, so subclasses can
+     * call {@link commitValue} to flush any pending/deferred values.
+     *
+     * This fires only on the **commit** path (not on revert/cancel).
+     * Use {@link onEditClose} for cleanup that should happen on both paths.
+     */
+    onBeforeEditClose() {
+        // Default: no-op. Subclasses override to flush pending values.
+    }
     /**
      * Called when the grid ends the editing session for this cell.
      *
@@ -3191,6 +3207,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
  *
@@ -3313,6 +3330,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), {
@@ -3372,6 +3392,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);
         }
@@ -3484,6 +3508,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.
@@ -3570,24 +3598,54 @@ class BaseOverlayEditor extends BaseGridEditor {
      * `cell-focus` class changes. This handles row-editing mode where
      * all editors exist simultaneously but only the focused cell's
      * editor should have its overlay visible.
+     *
+     * A `justOpened` flash guard suppresses the observer from
+     * immediately closing the overlay when `beginBulkEdit()` moves
+     * focus to the first editable column. Without this guard,
+     * double-click triggers a "flash open then close" effect.
      */
     _setupFocusObserver() {
         const cell = this._getCell();
         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();
+                    // Clear the guard after a macrotask so that an immediate
+                    // focus-away (e.g. beginBulkEdit focus adjustment) does
+                    // not close the overlay in the same event loop tick.
+                    setTimeout(() => {
+                        justOpened = false;
+                    }, 0);
                 }
-                else if (!isFocused && this._isOpen) {
-                    // Cell lost focus — hide overlay silently
-                    this.hideOverlay(true);
+                else if (!isFocused && this._isOpen && !justOpened) {
+                    // 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);
+                        }
+                    });
                 }
             }
         });