@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/bottom-sheet/bottom-sheet.ts

@@ -1,6 +1,7 @@
 // cspell:words WAAPI tweens
 import {
   type ElementRef,
+  type OnDestroy,
   Component,
   ViewEncapsulation,
   computed,
@@ -59,29 +60,44 @@ const BACKDROP_CLEAR_DISTANCE = 500;
  */
 @Component({
   selector: 'ui-bottom-sheet',
-  standalone: true,
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
     <overlay [attr.visible]="overlayVisible()" [style]="overlayStyle()">
+      <!--
+        The mouse drag's move/up listeners sit on the full-screen backdrop,
+        not the handle: a touch keeps targeting the element it started on, but
+        a mouse event targets whatever is under the cursor, so a cursor that
+        outruns the thin handle strip (or drags up off the panel) would stop
+        driving the drag. Mouse events bubble here from anywhere in the sheet,
+        including the handle and the panel. There's no mouseleave: like a
+        touch, the drag carries on until release, and Chrome doesn't deliver
+        mouseleave to Lynx web anyway (see onMouseDragMove for a release
+        outside the view).
+      -->
       <view
         #backdrop
         class="h-full w-full"
         [style]="backdropStyle()"
         (bindtap)="onBackdropTap()"
+        (bindmousedown)="onBackdropMouseDown()"
+        (bindmousemove)="onMouseDragMove($event)"
+        (bindmouseup)="onDragEnd()"
       >
         <view
           #panel
           [class]="panelClass()"
           [style]="panelPositionStyle()"
+          [accessibility-exclusive-focus]="overlayVisible()"
           (catchtap)="onPanelTap()"
         >
           <view
             class="items-center pb-3 pt-2 flex justify-center"
             (catchtouchstart)="onHandleTouchStart($event)"
             (catchtouchmove)="onHandleTouchMove($event)"
-            (catchtouchend)="onHandleTouchEnd()"
-            (catchtouchcancel)="onHandleTouchEnd()"
+            (catchtouchend)="onDragEnd()"
+            (catchtouchcancel)="onDragEnd()"
+            (catchmousedown)="onHandleMouseDown($event)"
           >
             <view class="h-1 w-10 rounded-full bg-muted" />
           </view>
@@ -91,7 +107,7 @@ const BACKDROP_CLEAR_DISTANCE = 500;
     </overlay>
   `,
 })
-export class UiBottomSheet {
+export class UiBottomSheet implements OnDestroy {
   readonly open = model(false);
   readonly userClass = input<string>('', { alias: 'class' });
 
@@ -110,11 +126,16 @@ export class UiBottomSheet {
       : 'position: fixed; overflow: visible; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 999; display: none;',
   );
 
-  readonly backdropRef = viewChild<ElementRef>('backdrop');
-  readonly panelRef = viewChild<ElementRef>('panel');
+  // Required: both are always in the template (the overlay is hidden, never
+  // removed), and nothing reads them before the first render.
+  readonly backdropRef = viewChild.required<ElementRef>('backdrop');
+  readonly panelRef = viewChild.required<ElementRef>('panel');
   #backdropAnim?: AnimationHandle;
   #panelAnim?: AnimationHandle;
   #hasBeenOpen = false;
+  // The open and close sequences' pending timers, so ngOnDestroy can stop
+  // them.
+  readonly #timers = new Set<ReturnType<typeof setTimeout>>();
 
   // --- Drag-to-dismiss state ---
   // Live downward drag distance (px), applied to the panel as a translateY via
@@ -125,22 +146,35 @@ export class UiBottomSheet {
   // True only between touchstart and touchend on the handle, so unrelated move
   // events can't shift the sheet.
   #isDragging = false;
+  // Set when a mouse drag that actually moved is released. The browser follows
+  // that mouseup with a click on the nearest element under both the mousedown
+  // and the mouseup, which is the backdrop whenever the cursor ended up off the
+  // panel, and Lynx web maps that click to the backdrop's tap. Without this, a
+  // drag released above the panel (where the sheet snaps back) would close it.
+  #ignoreNextBackdropTap = false;
+  // Whether the current drag is a mouse drag that has moved: only those are
+  // followed by a click. A moved touch produces no tap.
+  #mouseDragMoved = false;
 
-  constructor() {
-    // `#hasBeenOpen` prevents the close animation from running on the initial
-    // effect evaluation when `open` starts as false. Without this guard, the
-    // first run would call #doClose() and emit `closed` before the sheet
-    // has ever been opened.
-    effect(() => {
-      const isOpen = this.open();
-      if (isOpen) {
-        this.#hasBeenOpen = true;
-        this.#doOpen();
-      } else if (this.#hasBeenOpen) {
-        this.#doClose();
-      }
-    });
-  }
+  /**
+   * Opens or closes the sheet as `open` changes. A field rather than a
+   * constructor: Angular's test build keeps a function for a constructor that
+   * nothing calls, which an app's coverage report would show as uncovered.
+   *
+   * `#hasBeenOpen` prevents the close animation from running on the initial
+   * effect evaluation when `open` starts as false. Without this guard, the
+   * first run would call #doClose() and emit `closed` before the sheet
+   * has ever been opened.
+   */
+  protected readonly openOrClose = effect(() => {
+    const isOpen = this.open();
+    if (isOpen) {
+      this.#hasBeenOpen = true;
+      this.#doOpen();
+    } else if (this.#hasBeenOpen) {
+      this.#doClose();
+    }
+  });
 
   protected readonly panelClass = computed(() =>
     cn(
@@ -184,9 +218,24 @@ export class UiBottomSheet {
   });
 
   protected onBackdropTap(): void {
+    if (this.#ignoreNextBackdropTap) {
+      this.#ignoreNextBackdropTap = false;
+      return;
+    }
     this.open.set(false);
   }
 
+  /**
+   * A fresh press starts a fresh click, so drop any ignore left over from a
+   * drag whose release didn't produce a backdrop click (one released over the
+   * panel, whose `catchtap` swallows it). Otherwise the next real backdrop tap
+   * would be ignored. The handle catches its own mousedown, which is fine: it
+   * starts a new drag that resets the flag on release.
+   */
+  protected onBackdropMouseDown(): void {
+    this.#ignoreNextBackdropTap = false;
+  }
+
   /**
    * No-op tap handler for the panel. `catchtap` (vs `bindtap`) already stops
    * the tap from bubbling to the backdrop — Lynx controls propagation via the
@@ -196,19 +245,14 @@ export class UiBottomSheet {
   protected onPanelTap(): void {}
 
   /**
-   * Begin a drag on the handle strip. The open slideIn holds the panel at
-   * translateY(0%) via fill:'forwards', which would override our inline
-   * transform — cancel it so `dragOffset` (applied through panelPositionStyle)
-   * actually moves the panel from here on.
+   * Begin a drag on the handle strip.
    */
   protected onHandleTouchStart(e: {
     touches?: ReadonlyArray<{ clientY: number }>;
   }): void {
     const y = e.touches?.[0]?.clientY;
     if (y == null) return;
-    this.#panelAnim?.cancel();
-    this.#isDragging = true;
-    this.#dragStartY = y;
+    this.#startDrag(y);
   }
 
   protected onHandleTouchMove(e: {
@@ -217,20 +261,53 @@ export class UiBottomSheet {
     if (!this.#isDragging) return;
     const y = e.touches?.[0]?.clientY;
     if (y == null) return;
-    // Clamp to >= 0: the sheet is already docked at the bottom, so only a
-    // downward (dismiss-direction) drag should move it.
-    this.dragOffset.set(Math.max(0, y - this.#dragStartY));
+    this.#moveDrag(y);
+  }
+
+  /**
+   * The mouse twin of onHandleTouchStart, so the handle drags on web. A
+   * desktop browser fires no touch events for a mouse, and Lynx web passes
+   * DOM events straight through rather than turning mouse input into touches.
+   * On a touch-only device no mouse events fire, so touch keeps driving it.
+   *
+   * Reads `y`, not `clientY`: Lynx PC reports a mouse event's clientY relative
+   * to the element under the cursor, which changes as the cursor moves across
+   * the sheet, while `y` is relative to the Lynx view on PC and web alike.
+   */
+  protected onHandleMouseDown(e: { y: number }): void {
+    this.#startDrag(e.y);
   }
 
   /**
-   * Release the drag. Past the threshold we set `open` to false and let the
+   * Bound on the backdrop (see the template), so it also sees every move the
+   * cursor makes over an open sheet. Only those during a drag count.
+   */
+  protected onMouseDragMove(e: { y: number; buttons: number }): void {
+    if (!this.#isDragging) return;
+    // No button held means the mouseup happened where the sheet couldn't see
+    // it: a release outside the Lynx view (past the edge of a docs preview, or
+    // outside the browser window) goes to the page, and web-core only listens
+    // inside the view. Treat the first move back as the release, or the panel
+    // would stay mid-drag.
+    if (e.buttons === 0) {
+      this.onDragEnd();
+      return;
+    }
+    this.#mouseDragMoved = true;
+    this.#moveDrag(e.y);
+  }
+
+  /**
+   * Release the drag, from a touchend, touchcancel or mouseup, or a mouse
+   * move with no button held. Past the threshold we set `open` to false and let the
    * effect drive teardown (#doClose → drag-aware #animateOut), which keeps the
    * two-way `open` binding in sync and reuses the `closed` emit. Otherwise the
    * sheet springs back to fully open.
    */
-  protected onHandleTouchEnd(): void {
+  protected onDragEnd(): void {
     if (!this.#isDragging) return;
     this.#isDragging = false;
+    this.#ignoreNextBackdropTap = this.#mouseDragMoved;
     if (this.dragOffset() > DISMISS_THRESHOLD) {
       this.open.set(false);
     } else {
@@ -238,15 +315,55 @@ export class UiBottomSheet {
     }
   }
 
+  /**
+   * The open slideIn holds the panel at translateY(0%) via fill:'forwards',
+   * which would override our inline transform — cancel it so `dragOffset`
+   * (applied through panelPositionStyle) actually moves the panel from here on.
+   */
+  #startDrag(y: number): void {
+    this.#panelAnim?.cancel();
+    this.#isDragging = true;
+    this.#mouseDragMoved = false;
+    this.#dragStartY = y;
+  }
+
+  #moveDrag(y: number): void {
+    // Clamp to >= 0: the sheet is already docked at the bottom, so only a
+    // downward (dismiss-direction) drag should move it.
+    this.dragOffset.set(Math.max(0, y - this.#dragStartY));
+  }
+
+  /**
+   * The sheet can be destroyed while its open or close sequence is still
+   * running, for example by an `@if` around it or a route change right after
+   * closing it. The rest of the sequence then ran on the destroyed component:
+   * it animated detached elements and emitted `closed` from a destroyed
+   * output, which Angular warns about in dev builds (NG0953).
+   */
+  ngOnDestroy(): void {
+    for (const timer of this.#timers) clearTimeout(timer);
+  }
+
+  /**
+   * `setTimeout`, tracked so that ngOnDestroy can cancel it.
+   */
+  #later(callback: () => void, ms: number): void {
+    const timer = setTimeout(() => {
+      this.#timers.delete(timer);
+      callback();
+    }, ms);
+    this.#timers.add(timer);
+  }
+
   /**
    * Two-phase open: make the overlay visible first so native elements exist
    * in the tree, then animate on the next frame. Without this, animate()
    * targets elements that haven't been flushed to native yet and silently fails.
    */
   #doOpen(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.overlayVisible.set(true);
-      setTimeout(() => this.#animateIn(), 0);
+      this.#later(() => this.#animateIn(), 0);
     }, 0);
   }
 
@@ -257,9 +374,9 @@ export class UiBottomSheet {
    * before the fade finishes.
    */
   #doClose(): void {
-    setTimeout(() => {
+    this.#later(() => {
       this.#animateOut();
-      setTimeout(() => {
+      this.#later(() => {
         this.overlayVisible.set(false);
         this.closed.emit();
         // Reset for the next open: the sheet returns to its docked position
@@ -270,14 +387,18 @@ export class UiBottomSheet {
   }
 
   #animateIn(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
 
     this.#backdropAnim = fadeIn(backdrop, { duration: DURATION.normal });
+    // Move a screen reader into the panel. It would otherwise stay on whatever
+    // opened it, which is now behind the overlay. With the panel's
+    // accessibility-exclusive-focus (see the template), it then can't leave
+    // the panel until it closes.
+    panel.invoke?.('requestAccessibilityFocus');
     this.#panelAnim = slideIn(panel, 'up', {
       duration: DURATION.slow,
       easing: EASING.sheet,
@@ -285,9 +406,8 @@ export class UiBottomSheet {
   }
 
   #animateOut(): void {
-    const backdrop = this.backdropRef()?.nativeElement;
-    const panel = this.panelRef()?.nativeElement;
-    if (!backdrop || !panel) return;
+    const backdrop = this.backdropRef().nativeElement;
+    const panel = this.panelRef().nativeElement;
 
     this.#backdropAnim?.cancel();
     this.#panelAnim?.cancel();
@@ -321,17 +441,14 @@ export class UiBottomSheet {
    * continuing smoothly from wherever the finger let go (px → 0px).
    */
   #snapBack(fromOffset: number): void {
-    const panel = this.panelRef()?.nativeElement;
     this.#panelAnim?.cancel();
-    if (panel) {
-      this.#panelAnim = panel.animate(
-        [
-          { transform: `translateY(${fromOffset}px)` },
-          { transform: 'translateY(0px)' },
-        ],
-        { duration: DURATION.fast, easing: EASING.spring, fill: 'forwards' },
-      );
-    }
+    this.#panelAnim = this.panelRef().nativeElement.animate(
+      [
+        { transform: `translateY(${fromOffset}px)` },
+        { transform: 'translateY(0px)' },
+      ],
+      { duration: DURATION.fast, easing: EASING.spring, fill: 'forwards' },
+    );
     // Match the inline transform to the animation's resting state so the two
     // agree once fill:'forwards' hands control back to the style binding.
     this.dragOffset.set(0);