Merge branch '20.0.x' into dkamburov/fix-37933

Author: dkamburov

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -456,12 +456,12 @@
 
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
-        $grid-shadow: elevation(var(--grid-elevation));
+        $grid-shadow: elevation($grid-elevation);
     }
 
     @if not($drag-shadow) {
         $drag-elevation: map.get($grid-schema, 'drag-elevation');
-        $drag-shadow: elevation(var(--drag-elevation));
+        $drag-shadow: elevation($drag-elevation);
     }
 
     @if not($drop-area-border-radius) {

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -1928,7 +1928,7 @@
     }
 
     %indigo--box-focused {
-        background: var-get($theme, 'box-background-hover');
+        background: var-get($theme, 'box-background-focus');
     }
 
     %form-group-bundle--indigo--disabled {

projects/igniteui-angular/src/lib/grids/common/strategy.ts

@@ -76,7 +76,7 @@ export class IgxSorting implements IGridSortingStrategy {
         grid: GridType = null,
         groupsRecords: any[] = [],
         fullResult: IGroupByResult = { data: [], metadata: [] }
-    ): any[] {
+    ): IGroupByResult {
         const expressions = state.expressions;
         const expansion = state.expansion;
         let i = 0;
@@ -117,23 +117,24 @@ export class IgxSorting implements IGridSortingStrategy {
             fullResult.metadata.push(null);
             if (level < expressions.length - 1) {
                 recursiveResult = this.groupDataRecursive(group, state, level + 1, groupRow,
-                    expanded ? metadata : [], grid, groupsRecords, fullResult);
+                    [], grid, groupsRecords, fullResult);
                 if (expanded) {
-                    result = result.concat(recursiveResult);
+                    result = result.concat(recursiveResult.data);
+                    metadata = metadata.concat(recursiveResult.metadata);
                 }
             } else {
                 for (const groupItem of group) {
                     fullResult.metadata.push(groupRow);
                     fullResult.data.push(groupItem);
                 }
                 if (expanded) {
-                    metadata.push(...fullResult.metadata.slice(fullResult.metadata.length - group.length));
-                    result.push(...fullResult.data.slice(fullResult.data.length - group.length));
+                    metadata = metadata.concat(fullResult.metadata.slice(fullResult.metadata.length - group.length));
+                    result = result.concat(fullResult.data.slice(fullResult.data.length - group.length));
                 }
             }
             i += group.length;
         }
-        return result;
+        return { data: result, metadata };
     }
 
     /**
@@ -264,8 +265,8 @@ export class IgxGrouping extends IgxSorting implements IGridGroupingStrategy {
         const grouping = this.groupDataRecursive(data, state, 0, null, metadata, grid, groupsRecords, fullResult);
         grid?.groupingPerformedSubject.next();
         return {
-            data: grouping,
-            metadata
+            data: grouping.data,
+            metadata: grouping.metadata
         };
     }
 }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3813,7 +3813,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         // notifier for column autosize requests
         this._autoSizeColumnsNotify.pipe(
-            throttleTime(0, animationFrameScheduler, { leading: false, trailing: true }),
+            throttleTime(0, this.platform.isBrowser ? animationFrameScheduler : undefined, { leading: false, trailing: true }),
             destructor
         )
             .subscribe(() => {

projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts

@@ -3822,6 +3822,32 @@ describe('IgxGrid - GroupBy #grid', () => {
         }
     });
 
+    it('should be able to build groups with 100 000+ records', () => {
+        const fix = TestBed.createComponent(GroupableGridComponent);
+        const grid = fix.componentInstance.instance;
+
+        const data = [];
+        for (let i = 0; i < 1000000; i++) {
+          data.push({
+                Downloads: i,
+                ID: 1,
+                ProductName: 'Test'
+            });
+        }
+
+        fix.componentInstance.data = data;
+        fix.detectChanges();
+
+        grid.groupBy({
+            fieldName: 'ProductName',
+            dir: SortingDirection.Asc
+        });
+        fix.detectChanges();
+
+        let groupRows = grid.groupsRowList.toArray();
+        checkGroups(groupRows, ['Test']);
+    });
+
     describe('GroupBy with state directive', () => {
         let fix: ComponentFixture<GridGroupByStateComponent>;
         let state: IgxGridStateDirective;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -1685,6 +1685,33 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
 
         });
 
+        it('should allow changing row islands runtime in nested child grid.', () => {
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            let childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
+            const childRow = childGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(childRow.expander);
+            fixture.detectChanges();
+
+            let hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(3);
+            expect(childGrid.gridAPI.getChildGrids().length).toBe(1);
+
+            fixture.componentInstance.toggleRINested = true;
+            fixture.detectChanges();
+
+            const nestedChildGrid = childGrid.gridAPI.getChildGrids()[0];
+            const nestedChildRow = nestedChildGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(nestedChildRow.expander);
+            fixture.detectChanges();
+
+            hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(4);
+            expect(nestedChildGrid.gridAPI.getChildGrids().length).toBe(1);
+        });
+
         it(`Should apply template to both parent and child grids`, () => {
             const customFixture = TestBed.createComponent(IgxHierarchicalGridCustomRowEditOverlayComponent);
             customFixture.detectChanges();
@@ -2146,6 +2173,10 @@ export class IgxHierarchicalGridSizingComponent {
             <igx-row-island key="childData" [autoGenerate]="true">
                 @if (toggleChildRI) {
                     <igx-row-island key="childData" [autoGenerate]="true">
+                    @if (toggleRINested) {
+                        <igx-row-island [key]="'childData'" [autoGenerate]="true">
+                        </igx-row-island>
+                    }
                     </igx-row-island>
                 }
             </igx-row-island>
@@ -2156,6 +2187,7 @@ export class IgxHierarchicalGridSizingComponent {
 export class IgxHierarchicalGridToggleRIComponent  extends IgxHierarchicalGridTestBaseComponent {
 public toggleRI = true;
 public toggleChildRI = true;
+public toggleRINested = false;
 }
 
 @Component({

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -438,7 +438,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             .subscribe(() => {
                 this.updateChildren();
                 // update existing grids since their child ri have been changed.
-                this.getGridsForIsland(this.key).forEach(grid => {
+                this.rowIslandAPI.getChildGrids(false).forEach(grid => {
                     (grid as any).onRowIslandChange(this.children);
                 });
             });