fix(material-experimental/column-resize): add null checks for overlay

src/cdk-experimental/column-resize/resizable.ts

@@ -182,28 +182,28 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
 
   private _listenForRowHoverEvents(): void {
     const element = this.elementRef.nativeElement!;
-    const takeUntilDestroyed = takeUntil<boolean>(this.destroyed);
 
     this.eventDispatcher
       .resizeOverlayVisibleForHeaderRow(_closest(element, HEADER_ROW_SELECTOR)!)
-      .pipe(takeUntilDestroyed)
+      .pipe(takeUntil(this.destroyed))
       .subscribe(hoveringRow => {
+        if (this._isDestroyed) {
+          return;
+        }
+
         if (hoveringRow) {
           const tooBigToResize =
             this.maxWidthPxInternal < Number.MAX_SAFE_INTEGER &&
             element.offsetWidth > this.maxWidthPxInternal;
           element.classList.toggle(RESIZE_DISABLED_CLASS, tooBigToResize);
 
           if (!tooBigToResize) {
-            if (!this.overlayRef) {
-              this.overlayRef = this._createOverlayForHandle();
-            }
-
+            this.overlayRef ??= this._createOverlayForHandle();
             this._showHandleOverlay();
           }
-        } else if (this.overlayRef) {
+        } else {
           // todo - can't detach during an active resize - need to work that out
-          this.overlayRef.detach();
+          this.overlayRef?.detach();
         }
       });
   }
@@ -258,7 +258,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   private _cleanUpAfterResize(columnSize: ColumnSizeAction): void {
     this.elementRef.nativeElement!.classList.remove(OVERLAY_ACTIVE_CLASS);
 
-    if (this.overlayRef && this.overlayRef.hasAttached()) {
+    if (this.overlayRef?.hasAttached()) {
       this._updateOverlayHandleHeight();
       this.overlayRef.updatePosition();
 
@@ -293,18 +293,20 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   }
 
   private _showHandleOverlay(): void {
-    this._updateOverlayHandleHeight();
-    this.overlayRef!.attach(this._createHandlePortal());
+    if (!this._isDestroyed) {
+      this._updateOverlayHandleHeight();
+      this.overlayRef?.attach(this._createHandlePortal());
 
-    // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.
-    this.changeDetectorRef.markForCheck();
+      // Needed to ensure that all of the lifecycle hooks inside the overlay run immediately.
+      this.changeDetectorRef.markForCheck();
+    }
   }
 
   private _updateOverlayHandleHeight() {
     runInInjectionContext(this.injector, () => {
       afterNextRender({
         write: () => {
-          this.overlayRef!.updateSize({height: this.elementRef.nativeElement!.offsetHeight});
+          this.overlayRef?.updateSize({height: this.elementRef.nativeElement!.offsetHeight});
         },
       });
     });

src/dev-app/theme-m3.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@use '@angular/material-experimental' as matx;
 
 // Plus imports for other components in your app.
 
@@ -38,7 +39,7 @@ html {
     @include mat.system-level-colors($light-theme);
     @include mat.system-level-typography($light-theme);
     // TODO(mmalerba): Support M3 for experimental components.
-    // @include matx.column-resize-theme($light-theme);
+    @include matx.column-resize-theme($light-theme);
     // @include matx.popover-edit-theme($light-theme);
   }
 

src/material-experimental/column-resize/_column-resize-theme.scss

@@ -2,8 +2,8 @@
 @use 'sass:map';
 
 @mixin color($theme) {
-  $resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
-  $resizable-active-divider: mat.get-theme-color($theme, primary, 600);
+  $resizable-hover-divider: mat.get-theme-color($theme, primary, 60);
+  $resizable-active-divider: mat.get-theme-color($theme, primary, 60);
 
   // TODO: these styles don't really belong in the `color` part of the theme.
   // We should figure out a better place for them.