refactor(cdk/table): change deprecated APIs for v12 (#21877)

Changes the APIs that were marked as deprecated for v12.

BREAKING CHANGES:
* `_viewRepeater`, `_coalescedStyleScheduler` and `_viewportRuler`
parameters of the `CdkTable` constructor are now required.
* `_coalescedStyleScheduler` parameter of the `StickyStyler` constructor is now required.

Author: crisbeto

src/cdk/schematics/ng-update/data/constructor-checks.ts

@@ -17,6 +17,12 @@ export type ConstructorChecksUpgradeData = string;
  * automatically through type checking.
  */
 export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
+  [TargetVersion.V12]: [
+    {
+      pr: 'https://github.com/angular/components/pull/21876',
+      changes: ['CdkTable', 'StickyStyler']
+    }
+  ],
   [TargetVersion.V11]: [
     {
       pr: 'https://github.com/angular/components/pull/20454',

src/cdk/table/sticky-styler.ts

@@ -48,11 +48,7 @@ export class StickyStyler {
   constructor(private _isNativeHtmlTable: boolean,
               private _stickCellCss: string,
               public direction: Direction,
-              /**
-               * @deprecated `_coalescedStyleScheduler` parameter to become required.
-               * @breaking-change 11.0.0
-               */
-              private _coalescedStyleScheduler?: _CoalescedStyleScheduler,
+              private _coalescedStyleScheduler: _CoalescedStyleScheduler,
               private _isBrowser = true,
               private readonly _needsPositionStickyOnElement = true,
               private readonly _positionListener?: StickyPositioningListener) {
@@ -86,7 +82,7 @@ export class StickyStyler {
     }
 
     // Coalesce with sticky row/column updates (and potentially other changes like column resize).
-    this._scheduleStyleChanges(() => {
+    this._coalescedStyleScheduler.schedule(() => {
       for (const element of elementsToClear) {
         this._removeStickyStyle(element, stickyDirections);
       }
@@ -128,7 +124,7 @@ export class StickyStyler {
     const firstStickyEnd = stickyEndStates.indexOf(true);
 
     // Coalesce with sticky row updates (and potentially other changes like column resize).
-    this._scheduleStyleChanges(() => {
+    this._coalescedStyleScheduler.schedule(() => {
       const isRtl = this.direction === 'rtl';
       const start = isRtl ? 'right' : 'left';
       const end = isRtl ? 'left' : 'right';
@@ -213,7 +209,7 @@ export class StickyStyler {
 
     // Coalesce with other sticky row updates (top/bottom), sticky columns updates
     // (and potentially other changes like column resize).
-    this._scheduleStyleChanges(() => {
+    this._coalescedStyleScheduler.schedule(() => {
       for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         if (!states[rowIndex]) {
           continue;
@@ -250,7 +246,7 @@ export class StickyStyler {
     const tfoot = tableElement.querySelector('tfoot')!;
 
     // Coalesce with other sticky updates (and potentially other changes like column resize).
-    this._scheduleStyleChanges(() => {
+    this._coalescedStyleScheduler.schedule(() => {
       if (stickyStates.some(state => !state)) {
         this._removeStickyStyle(tfoot, ['bottom']);
       } else {
@@ -392,17 +388,4 @@ export class StickyStyler {
 
     return positions;
   }
-
-  /**
-   * Schedules styles to be applied when the style scheduler deems appropriate.
-   * @breaking-change 11.0.0 This method can be removed in favor of calling
-   * `CoalescedStyleScheduler.schedule` directly once the scheduler is a required parameter.
-   */
-  private _scheduleStyleChanges(changes: () => void) {
-    if (this._coalescedStyleScheduler) {
-      this._coalescedStyleScheduler.schedule(changes);
-    } else {
-      changes();
-    }
-  }
 }

src/cdk/table/table.ts

@@ -500,22 +500,17 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
       protected readonly _elementRef: ElementRef, @Attribute('role') role: string,
       @Optional() protected readonly _dir: Directionality, @Inject(DOCUMENT) _document: any,
       private _platform: Platform,
-
+      @Inject(_VIEW_REPEATER_STRATEGY)
+        protected readonly _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
+      @Inject(_COALESCED_STYLE_SCHEDULER)
+        protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler,
+      private readonly _viewportRuler: ViewportRuler,
       /**
-       * @deprecated `_coalescedStyleScheduler`, `_viewRepeater` and `_viewportRuler`
-       *    parameters to become required.
-       * @breaking-change 11.0.0
+       * @deprecated `_stickyPositioningListener` parameter to become required.
+       * @breaking-change 13.0.0
        */
-      @Optional() @Inject(_VIEW_REPEATER_STRATEGY)
-        protected readonly _viewRepeater?: _ViewRepeater<T, RenderRow<T>, RowContext<T>>,
-      @Optional() @Inject(_COALESCED_STYLE_SCHEDULER)
-        protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler,
       @Optional() @SkipSelf() @Inject(STICKY_POSITIONING_LISTENER)
-      protected readonly _stickyPositioningListener?: StickyPositioningListener,
-      // Optional for backwards compatibility. The viewport ruler is provided in root. Therefore,
-      // this property will never be null.
-      // tslint:disable-next-line: lightweight-tokens
-      @Optional() private readonly _viewportRuler?: ViewportRuler) {
+        protected readonly _stickyPositioningListener: StickyPositioningListener) {
     if (!role) {
       this._elementRef.nativeElement.setAttribute('role', 'grid');
     }
@@ -538,14 +533,9 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
       return this.trackBy ? this.trackBy(dataRow.dataIndex, dataRow.data) : dataRow;
     });
 
-    // Table cell dimensions may change after resizing the window. Signal the sticky styler to
-    // refresh its cache of cell widths the next time sticky styles are updated.
-    // @breaking-change 11.0.0 Remove null check for _viewportRuler once it's a required parameter.
-    if (this._viewportRuler) {
-      this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => {
-        this._forceRecalculateCellWidths = true;
-      });
-    }
+    this._viewportRuler.change().pipe(takeUntil(this._onDestroy)).subscribe(() => {
+      this._forceRecalculateCellWidths = true;
+    });
   }
 
   ngAfterContentChecked() {
@@ -626,38 +616,16 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     }
     const viewContainer = this._rowOutlet.viewContainer;
 
-    // @breaking-change 11.0.0 Remove null check for `_viewRepeater` and the
-    // `else` clause once `_viewRepeater` is turned into a required parameter.
-    if (this._viewRepeater) {
-      this._viewRepeater.applyChanges(
-          changes,
-          viewContainer,
-          (record: IterableChangeRecord<RenderRow<T>>,
-           _adjustedPreviousIndex: number|null,
-           currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!),
-          (record) => record.item.data,
-          (change: _ViewRepeaterItemChange<RenderRow<T>, RowContext<T>>) => {
-            if (change.operation === _ViewRepeaterOperation.INSERTED && change.context) {
-              this._renderCellTemplateForItem(change.record.item.rowDef, change.context);
-            }
-          });
-    } else {
-      changes.forEachOperation(
-        (record: IterableChangeRecord<RenderRow<T>>, prevIndex: number|null,
-         currentIndex: number|null) => {
-          if (record.previousIndex == null) {
-            const renderRow = record.item;
-            const rowDef = renderRow.rowDef;
-            const context: RowContext<T> = {$implicit: renderRow.data};
-            this._renderRow(this._rowOutlet, rowDef, currentIndex!, context);
-          } else if (currentIndex == null) {
-            viewContainer.remove(prevIndex!);
-          } else {
-            const view = <RowViewRef<T>>viewContainer.get(prevIndex!);
-            viewContainer.move(view!, currentIndex);
-          }
-        });
-    }
+    this._viewRepeater.applyChanges(changes, viewContainer,
+      (record: IterableChangeRecord<RenderRow<T>>,
+        _adjustedPreviousIndex: number|null,
+        currentIndex: number|null) => this._getEmbeddedViewArgs(record.item, currentIndex!),
+      (record) => record.item.data,
+      (change: _ViewRepeaterItemChange<RenderRow<T>, RowContext<T>>) => {
+        if (change.operation === _ViewRepeaterOperation.INSERTED && change.context) {
+          this._renderCellTemplateForItem(change.record.item.rowDef, change.context);
+        }
+      });
 
     // Update the meta context of a row's context data (index, count, first, last, ...)
     this._updateRowIndexContext();

src/material-experimental/mdc-table/table.ts

@@ -18,6 +18,8 @@ import {
   CdkTable,
   _CoalescedStyleScheduler,
   _COALESCED_STYLE_SCHEDULER,
+  CDK_TABLE,
+  STICKY_POSITIONING_LISTENER,
 } from '@angular/cdk/table';
 import {
   _DisposeViewRepeaterStrategy,
@@ -48,10 +50,13 @@ export class MatRecycleRows {}
   },
   providers: [
     {provide: CdkTable, useExisting: MatTable},
+    {provide: CDK_TABLE, useExisting: MatTable},
     {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
     // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code
     //  is only included in the build if used.
     {provide: _VIEW_REPEATER_STRATEGY, useClass: _DisposeViewRepeaterStrategy},
+    // Prevent nested tables from seeing this table's StickyPositioningListener.
+    {provide: STICKY_POSITIONING_LISTENER, useValue: null},
   ],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTable for explanation on why this uses the default change detection strategy.

src/material/table/table.ts

@@ -10,7 +10,7 @@ import {
   CDK_TABLE_TEMPLATE,
   CdkTable,
   CDK_TABLE,
-  _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER
+  _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER, STICKY_POSITIONING_LISTENER
 } from '@angular/cdk/table';
 import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
 import {
@@ -50,6 +50,8 @@ export class MatRecycleRows {}
     {provide: CdkTable, useExisting: MatTable},
     {provide: CDK_TABLE, useExisting: MatTable},
     {provide: _COALESCED_STYLE_SCHEDULER, useClass: _CoalescedStyleScheduler},
+    // Prevent nested tables from seeing this table's StickyPositioningListener.
+    {provide: STICKY_POSITIONING_LISTENER, useValue: null},
   ],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTable for explanation on why this uses the default change detection strategy.

tools/public_api_guard/cdk/table.d.ts

@@ -193,7 +193,7 @@ export declare class CdkRowDef<T> extends BaseRowDef {
 
 export declare class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     protected readonly _changeDetectorRef: ChangeDetectorRef;
-    protected readonly _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined;
+    protected readonly _coalescedStyleScheduler: _CoalescedStyleScheduler;
     _contentColumnDefs: QueryList<CdkColumnDef>;
     _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
     _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
@@ -209,8 +209,8 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     _noDataRow: CdkNoDataRow;
     _noDataRowOutlet: NoDataRowOutlet;
     _rowOutlet: DataRowOutlet;
-    protected readonly _stickyPositioningListener?: StickyPositioningListener | undefined;
-    protected readonly _viewRepeater?: _ViewRepeater<T, RenderRow<T>, RowContext<T>> | undefined;
+    protected readonly _stickyPositioningListener: StickyPositioningListener;
+    protected readonly _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>;
     get dataSource(): CdkTableDataSourceInput<T>;
     set dataSource(dataSource: CdkTableDataSourceInput<T>);
     get fixedLayout(): boolean;
@@ -225,8 +225,8 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
         start: number;
         end: number;
     }>;
-    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform,
-    _viewRepeater?: _ViewRepeater<T, RenderRow<T>, RowContext<T>> | undefined, _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined, _stickyPositioningListener?: StickyPositioningListener | undefined, _viewportRuler?: ViewportRuler | undefined);
+    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform, _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>, _coalescedStyleScheduler: _CoalescedStyleScheduler, _viewportRuler: ViewportRuler,
+    _stickyPositioningListener: StickyPositioningListener);
     _getRenderedRows(rowOutlet: RowOutlet): HTMLElement[];
     _getRowDefs(data: T, dataIndex: number): CdkRowDef<T>[];
     addColumnDef(columnDef: CdkColumnDef): void;
@@ -248,7 +248,7 @@ export declare class CdkTable<T> implements AfterContentChecked, CollectionViewe
     static ngAcceptInputType_fixedLayout: BooleanInput;
     static ngAcceptInputType_multiTemplateDataRows: BooleanInput;
     static ɵcmp: i0.ɵɵComponentDefWithMeta<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; "fixedLayout": "fixedLayout"; }, {}, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>;
-    static ɵfac: i0.ɵɵFactoryDef<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, { optional: true; }, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDef<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
 }
 
 export declare class CdkTableModule {
@@ -344,8 +344,7 @@ export declare type StickySize = number | null | undefined;
 
 export declare class StickyStyler {
     direction: Direction;
-    constructor(_isNativeHtmlTable: boolean, _stickCellCss: string, direction: Direction,
-    _coalescedStyleScheduler?: _CoalescedStyleScheduler | undefined, _isBrowser?: boolean, _needsPositionStickyOnElement?: boolean, _positionListener?: StickyPositioningListener | undefined);
+    constructor(_isNativeHtmlTable: boolean, _stickCellCss: string, direction: Direction, _coalescedStyleScheduler: _CoalescedStyleScheduler, _isBrowser?: boolean, _needsPositionStickyOnElement?: boolean, _positionListener?: StickyPositioningListener | undefined);
     _addStickyStyle(element: HTMLElement, dir: StickyDirection, dirValue: number, isBorderElement: boolean): void;
     _getCalculatedZIndex(element: HTMLElement): string;
     _getCellWidths(row: HTMLElement, recalculateCellWidths?: boolean): number[];