igniteui-angular 22.0.0-beta.1 → 22.0.0-beta.3

package/fesm2022/igniteui-angular-grids-core.mjs

@@ -14637,7 +14637,10 @@ class IgxGridTransactionPipe {
             const result = DataUtil.mergeTransactions(cloneArray(collection), this.grid.transactions.getAggregatedChanges(true), this.grid.primaryKey, this.grid.dataCloneStrategy);
             return result;
         }
-        return collection;
+        // Return a shallow copy so downstream pipes and igxGridForOf always
+        // receive a new array reference when pipeTrigger changes, regardless
+        // of whether the source array was mutated in place.
+        return cloneArray(collection);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: IgxGridTransactionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: IgxGridTransactionPipe, isStandalone: true, name: "gridTransaction" }); }
@@ -23036,6 +23039,58 @@ class RowEditPositionStrategy extends ConnectedPositioningStrategy {
         this.settings.verticalStartPoint = this.settings.verticalDirection = this.isTop ? VerticalAlignment.Top : VerticalAlignment.Bottom;
         this.settings.openAnimation = this.isTop ? scaleInVerBottom : scaleInVerTop;
         super.position(contentElement, { width: targetElement.clientWidth, height: targetElement.clientHeight }, document, initialCall, targetElement);
+        if (this.settings.clipToVisibleArea) {
+            // After positioning in the top layer, keep the overlay clipped to the visible grid body.
+            this.updateContentClip(contentElement);
+        }
+    }
+    updateContentClip(contentElement) {
+        const container = this.settings.container;
+        if (!container) {
+            return;
+        }
+        const clippingRect = this.getClippingRect(container);
+        const contentRect = contentElement.getBoundingClientRect();
+        // Convert the clipped overflow on each side to CSS inset values.
+        const top = Math.round(Math.max(clippingRect.top - contentRect.top, 0));
+        const right = Math.round(Math.max(contentRect.right - clippingRect.right, 0));
+        const bottom = Math.round(Math.max(contentRect.bottom - clippingRect.bottom, 0));
+        const left = Math.round(Math.max(clippingRect.left - contentRect.left, 0));
+        // When the overlay is fully outside the clipping rect, hide it and block its action buttons.
+        const fullyClipped = top >= contentRect.height || bottom >= contentRect.height ||
+            left >= contentRect.width || right >= contentRect.width;
+        // Row-edit overlays are rendered in the top layer, so clip the content explicitly to the grid's visible area.
+        contentElement.style.clipPath = fullyClipped ? 'inset(100%)' :
+            (top || right || bottom || left ? `inset(${top}px ${right}px ${bottom}px ${left}px)` : '');
+        contentElement.style.pointerEvents = fullyClipped ? 'none' : '';
+        contentElement.style.visibility = fullyClipped ? 'hidden' : '';
+    }
+    getClippingRect(element) {
+        const document = element.ownerDocument;
+        const gridBody = element.closest('[igxgridbody]') || element;
+        const rect = gridBody.getBoundingClientRect();
+        // Start with the current grid body, then narrow it by parent grid bodies.
+        const clippingRect = { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left };
+        let parent = gridBody.parentElement?.closest('[igxgridbody]');
+        // Intersect with parent grid bodies so nested grids respect their parent scroll bounds.
+        while (parent) {
+            const parentRect = parent.getBoundingClientRect();
+            clippingRect.top = Math.max(clippingRect.top, parentRect.top);
+            clippingRect.right = Math.min(clippingRect.right, parentRect.right);
+            clippingRect.bottom = Math.min(clippingRect.bottom, parentRect.bottom);
+            clippingRect.left = Math.max(clippingRect.left, parentRect.left);
+            if (clippingRect.top >= clippingRect.bottom || clippingRect.left >= clippingRect.right) {
+                break;
+            }
+            parent = parent.parentElement?.closest('[igxgridbody]');
+        }
+        // Keep the clipping area inside the viewport because popover content is viewport-positioned.
+        return {
+            top: Math.max(clippingRect.top, 0),
+            right: Math.min(clippingRect.right, document.documentElement.clientWidth),
+            bottom: Math.min(clippingRect.bottom, document.documentElement.clientHeight),
+            left: Math.max(clippingRect.left, 0)
+        };
     }
     /**
      * Cleans up the IntersectionObserver and stored references
@@ -24737,8 +24792,8 @@ class GridBaseAPIService {
             grid.transactions.add(transaction);
         }
         else {
-            grid.data.push(rowData);
-            grid.data = cloneArray(grid.data);
+            (grid.data ?? (grid.data = [])).push(rowData);
+            grid.summaryService.clearSummaryCache();
         }
         grid.validation.markAsTouched(rowId);
         grid.validation.update(rowId, rowData);
@@ -24753,8 +24808,8 @@ class GridBaseAPIService {
                 grid.transactions.add(transaction, grid.data[index]);
             }
             else {
-                grid.data.splice(index, 1);
-                grid.data = cloneArray(grid.data);
+                (grid.data ?? (grid.data = [])).splice(index, 1);
+                grid.summaryService.clearSummaryCache();
             }
         }
         else {