refactor(material/bottom-sheet): use CDK dialog internally (#24951)

Switches the internals of the bottom sheet to use the CDK dialog.

Author: crisbeto

src/material/bottom-sheet/BUILD.bazel

@@ -24,6 +24,7 @@ ng_module(
         "//src/cdk/a11y",
         "//src/cdk/bidi",
         "//src/cdk/coercion",
+        "//src/cdk/dialog",
         "//src/cdk/keycodes",
         "//src/cdk/layout",
         "//src/cdk/overlay",

src/material/bottom-sheet/bottom-sheet-container.ts

@@ -7,38 +7,26 @@
  */
 
 import {AnimationEvent} from '@angular/animations';
-import {FocusTrap, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
-import {coerceArray} from '@angular/cdk/coercion';
+import {CdkDialogContainer, DialogConfig} from '@angular/cdk/dialog';
+import {FocusMonitor, FocusTrapFactory, InteractivityChecker} from '@angular/cdk/a11y';
 import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
+import {OverlayRef} from '@angular/cdk/overlay';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
-import {
-  BasePortalOutlet,
-  CdkPortalOutlet,
-  ComponentPortal,
-  DomPortal,
-  TemplatePortal,
-} from '@angular/cdk/portal';
 import {DOCUMENT} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ComponentRef,
   ElementRef,
-  EmbeddedViewRef,
   EventEmitter,
   Inject,
   NgZone,
   OnDestroy,
   Optional,
-  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {matBottomSheetAnimations} from './bottom-sheet-animations';
-import {MatBottomSheetConfig} from './bottom-sheet-config';
-
-// TODO(crisbeto): consolidate some logic between this, MatDialog and MatSnackBar
 
 /**
  * Internal component that wraps user-provided bottom sheet content.
@@ -58,52 +46,49 @@ import {MatBottomSheetConfig} from './bottom-sheet-config';
   host: {
     'class': 'mat-bottom-sheet-container',
     'tabindex': '-1',
-    'role': 'dialog',
-    'aria-modal': 'true',
-    '[attr.aria-label]': 'bottomSheetConfig?.ariaLabel',
+    '[attr.role]': '_config.role',
+    '[attr.aria-modal]': '_config.isModal',
+    '[attr.aria-label]': '_config.ariaLabel',
     '[@state]': '_animationState',
     '(@state.start)': '_onAnimationStart($event)',
     '(@state.done)': '_onAnimationDone($event)',
   },
 })
-export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestroy {
+export class MatBottomSheetContainer extends CdkDialogContainer implements OnDestroy {
   private _breakpointSubscription: Subscription;
 
-  /** The portal outlet inside of this container into which the content will be loaded. */
-  @ViewChild(CdkPortalOutlet, {static: true}) _portalOutlet: CdkPortalOutlet;
-
   /** The state of the bottom sheet animations. */
   _animationState: 'void' | 'visible' | 'hidden' = 'void';
 
   /** Emits whenever the state of the animation changes. */
   _animationStateChanged = new EventEmitter<AnimationEvent>();
 
-  /** The class that traps and manages focus within the bottom sheet. */
-  private _focusTrap: FocusTrap;
-
-  /** Element that was focused before the bottom sheet was opened. */
-  private _elementFocusedBeforeOpened: HTMLElement | null = null;
-
-  /** Server-side rendering-compatible reference to the global document object. */
-  private _document: Document;
-
   /** Whether the component has been destroyed. */
   private _destroyed: boolean;
 
   constructor(
-    private _elementRef: ElementRef<HTMLElement>,
-    private _changeDetectorRef: ChangeDetectorRef,
-    private _focusTrapFactory: FocusTrapFactory,
-    private readonly _interactivityChecker: InteractivityChecker,
-    private readonly _ngZone: NgZone,
-    breakpointObserver: BreakpointObserver,
+    elementRef: ElementRef,
+    focusTrapFactory: FocusTrapFactory,
     @Optional() @Inject(DOCUMENT) document: any,
-    /** The bottom sheet configuration. */
-    public bottomSheetConfig: MatBottomSheetConfig,
+    config: DialogConfig,
+    checker: InteractivityChecker,
+    ngZone: NgZone,
+    overlayRef: OverlayRef,
+    breakpointObserver: BreakpointObserver,
+    private _changeDetectorRef: ChangeDetectorRef,
+    focusMonitor?: FocusMonitor,
   ) {
-    super();
+    super(
+      elementRef,
+      focusTrapFactory,
+      document,
+      config,
+      checker,
+      ngZone,
+      overlayRef,
+      focusMonitor,
+    );
 
-    this._document = document;
     this._breakpointSubscription = breakpointObserver
       .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
       .subscribe(() => {
@@ -122,34 +107,6 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
       });
   }
 
-  /** Attach a component portal as content to this bottom sheet container. */
-  attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T> {
-    this._validatePortalAttached();
-    this._setPanelClass();
-    this._savePreviouslyFocusedElement();
-    return this._portalOutlet.attachComponentPortal(portal);
-  }
-
-  /** Attach a template portal as content to this bottom sheet container. */
-  attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {
-    this._validatePortalAttached();
-    this._setPanelClass();
-    this._savePreviouslyFocusedElement();
-    return this._portalOutlet.attachTemplatePortal(portal);
-  }
-
-  /**
-   * Attaches a DOM portal to the bottom sheet container.
-   * @deprecated To be turned into a method.
-   * @breaking-change 10.0.0
-   */
-  override attachDomPortal = (portal: DomPortal) => {
-    this._validatePortalAttached();
-    this._setPanelClass();
-    this._savePreviouslyFocusedElement();
-    return this._portalOutlet.attachDomPortal(portal);
-  };
-
   /** Begin animation of bottom sheet entrance into view. */
   enter(): void {
     if (!this._destroyed) {
@@ -166,15 +123,14 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
     }
   }
 
-  ngOnDestroy() {
+  override ngOnDestroy() {
+    super.ngOnDestroy();
     this._breakpointSubscription.unsubscribe();
     this._destroyed = true;
   }
 
   _onAnimationDone(event: AnimationEvent) {
-    if (event.toState === 'hidden') {
-      this._restoreFocus();
-    } else if (event.toState === 'visible') {
+    if (event.toState === 'visible') {
       this._trapFocus();
     }
 
@@ -185,136 +141,9 @@ export class MatBottomSheetContainer extends BasePortalOutlet implements OnDestr
     this._animationStateChanged.emit(event);
   }
 
+  protected override _captureInitialFocus(): void {}
+
   private _toggleClass(cssClass: string, add: boolean) {
     this._elementRef.nativeElement.classList.toggle(cssClass, add);
   }
-
-  private _validatePortalAttached() {
-    if (this._portalOutlet.hasAttached() && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      throw Error('Attempting to attach bottom sheet content after content is already attached');
-    }
-  }
-
-  private _setPanelClass() {
-    const element: HTMLElement = this._elementRef.nativeElement;
-    element.classList.add(...coerceArray(this.bottomSheetConfig.panelClass || []));
-  }
-
-  /**
-   * Focuses the provided element. If the element is not focusable, it will add a tabIndex
-   * attribute to forcefully focus it. The attribute is removed after focus is moved.
-   * @param element The element to focus.
-   */
-  private _forceFocus(element: HTMLElement, options?: FocusOptions) {
-    if (!this._interactivityChecker.isFocusable(element)) {
-      element.tabIndex = -1;
-      // The tabindex attribute should be removed to avoid navigating to that element again
-      this._ngZone.runOutsideAngular(() => {
-        const callback = () => {
-          element.removeEventListener('blur', callback);
-          element.removeEventListener('mousedown', callback);
-          element.removeAttribute('tabindex');
-        };
-
-        element.addEventListener('blur', callback);
-        element.addEventListener('mousedown', callback);
-      });
-    }
-    element.focus(options);
-  }
-
-  /**
-   * Focuses the first element that matches the given selector within the focus trap.
-   * @param selector The CSS selector for the element to set focus to.
-   */
-  private _focusByCssSelector(selector: string, options?: FocusOptions) {
-    let elementToFocus = this._elementRef.nativeElement.querySelector(
-      selector,
-    ) as HTMLElement | null;
-    if (elementToFocus) {
-      this._forceFocus(elementToFocus, options);
-    }
-  }
-
-  /**
-   * Moves the focus inside the focus trap. When autoFocus is not set to 'bottom-sheet',
-   * if focus cannot be moved then focus will go to the bottom sheet container.
-   */
-  private _trapFocus() {
-    const element = this._elementRef.nativeElement;
-
-    if (!this._focusTrap) {
-      this._focusTrap = this._focusTrapFactory.create(element);
-    }
-
-    // If were to attempt to focus immediately, then the content of the bottom sheet would not
-    // yet be ready in instances where change detection has to run first. To deal with this,
-    // we simply wait for the microtask queue to be empty when setting focus when autoFocus
-    // isn't set to bottom sheet. If the element inside the bottom sheet can't be focused,
-    // then the container is focused so the user can't tab into other elements behind it.
-    switch (this.bottomSheetConfig.autoFocus) {
-      case false:
-      case 'dialog':
-        const activeElement = _getFocusedElementPierceShadowDom();
-        // Ensure that focus is on the bottom sheet container. It's possible that a different
-        // component tried to move focus while the open animation was running. See:
-        // https://github.com/angular/components/issues/16215. Note that we only want to do this
-        // if the focus isn't inside the bottom sheet already, because it's possible that the
-        // consumer specified `autoFocus` in order to move focus themselves.
-        if (activeElement !== element && !element.contains(activeElement)) {
-          element.focus();
-        }
-        break;
-      case true:
-      case 'first-tabbable':
-        this._focusTrap.focusInitialElementWhenReady();
-        break;
-      case 'first-heading':
-        this._focusByCssSelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
-        break;
-      default:
-        this._focusByCssSelector(this.bottomSheetConfig.autoFocus!);
-        break;
-    }
-  }
-
-  /** Restores focus to the element that was focused before the bottom sheet was opened. */
-  private _restoreFocus() {
-    const toFocus = this._elementFocusedBeforeOpened;
-
-    // We need the extra check, because IE can set the `activeElement` to null in some cases.
-    if (this.bottomSheetConfig.restoreFocus && toFocus && typeof toFocus.focus === 'function') {
-      const activeElement = _getFocusedElementPierceShadowDom();
-      const element = this._elementRef.nativeElement;
-
-      // Make sure that focus is still inside the bottom sheet or is on the body (usually because a
-      // non-focusable element like the backdrop was clicked) before moving it. It's possible that
-      // the consumer moved it themselves before the animation was done, in which case we shouldn't
-      // do anything.
-      if (
-        !activeElement ||
-        activeElement === this._document.body ||
-        activeElement === element ||
-        element.contains(activeElement)
-      ) {
-        toFocus.focus();
-      }
-    }
-
-    if (this._focusTrap) {
-      this._focusTrap.destroy();
-    }
-  }
-
-  /** Saves a reference to the element that was focused before the bottom sheet was opened. */
-  private _savePreviouslyFocusedElement() {
-    this._elementFocusedBeforeOpened = _getFocusedElementPierceShadowDom();
-
-    // The `focus` method isn't available during server-side rendering.
-    if (this._elementRef.nativeElement.focus) {
-      this._ngZone.runOutsideAngular(() => {
-        Promise.resolve().then(() => this._elementRef.nativeElement.focus());
-      });
-    }
-  }
 }

src/material/bottom-sheet/bottom-sheet-module.ts

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {OverlayModule} from '@angular/cdk/overlay';
+import {DialogModule} from '@angular/cdk/dialog';
 import {PortalModule} from '@angular/cdk/portal';
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material/core';
 import {MatBottomSheetContainer} from './bottom-sheet-container';
 
 @NgModule({
-  imports: [OverlayModule, MatCommonModule, PortalModule],
+  imports: [DialogModule, MatCommonModule, PortalModule],
   exports: [MatBottomSheetContainer, MatCommonModule],
   declarations: [MatBottomSheetContainer],
 })