refactor(tooltip): Anchor targets as weak refs

* Anchor event listeners as wrapped weak references.
* `show` method now accepts an IDREF in addition to the element reference.
* Some code reorganization.
* Included the tooltip component inside the `defineAllComponents` collection.

Author: rkaraivanov

src/components/common/definitions/defineAllComponents.ts

@@ -63,6 +63,7 @@ import IgcTextareaComponent from '../../textarea/textarea.js';
 import IgcTileManagerComponent from '../../tile-manager/tile-manager.js';
 import IgcTileComponent from '../../tile-manager/tile.js';
 import IgcToastComponent from '../../toast/toast.js';
+import IgcTooltipComponent from '../../tooltip/tooltip.js';
 import IgcTreeItemComponent from '../../tree/tree-item.js';
 import IgcTreeComponent from '../../tree/tree.js';
 import { defineComponents } from './defineComponents.js';
@@ -136,6 +137,7 @@ const allComponents: IgniteComponent[] = [
   IgcTextareaComponent,
   IgcTileComponent,
   IgcTileManagerComponent,
+  IgcTooltipComponent,
 ];
 
 export function defineAllComponents() {

src/components/common/util.ts

@@ -292,6 +292,32 @@ export function isString(value: unknown): value is string {
   return typeof value === 'string';
 }
 
+export function isObject(value: unknown): value is object {
+  return value != null && typeof value === 'object';
+}
+
+export function isEventListenerObject(x: unknown): x is EventListenerObject {
+  return isObject(x) && 'handleEvent' in x;
+}
+
+export function addWeakEventListener(
+  element: Element,
+  event: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: AddEventListenerOptions | boolean
+): void {
+  const weakRef = new WeakRef(listener);
+  const wrapped = (evt: Event) => {
+    const handler = weakRef.deref();
+
+    return isEventListenerObject(handler)
+      ? handler.handleEvent(evt)
+      : handler?.(evt);
+  };
+
+  element.addEventListener(event, wrapped, options);
+}
+
 /**
  * Returns whether a given collection is empty.
  */

…ents/tooltip/tooltip-event-controller.ts src/components/tooltip/controller.tssrc/components/tooltip/tooltip-event-controller.ts renamed to src/components/tooltip/controller.ts src/components/tooltip/tooltip-event-controller.ts renamed to src/components/tooltip/controller.ts

@@ -1,11 +1,20 @@
 import type { ReactiveController } from 'lit';
-import { getElementByIdFromRoot, isString } from '../common/util.js';
-import service from './tooltip-service.js';
+import {
+  addWeakEventListener,
+  getElementByIdFromRoot,
+  isString,
+} from '../common/util.js';
+import service from './service.js';
 import type IgcTooltipComponent from './tooltip.js';
 
 class TooltipController implements ReactiveController {
   //#region Internal properties and state
 
+  private static readonly _listeners = [
+    'pointerenter',
+    'pointerleave',
+  ] as const;
+
   private readonly _host: IgcTooltipComponent;
   private readonly _options: TooltipCallbacks;
 
@@ -15,9 +24,10 @@ class TooltipController implements ReactiveController {
   private _showTriggers = new Set(['pointerenter']);
   private _hideTriggers = new Set(['pointerleave', 'click']);
 
-  private _anchor: TooltipAnchor;
-  private _defaultAnchor: TooltipAnchor;
-  private _isTransientAnchor = false;
+  private _anchor: WeakRef<Element> | null = null;
+  private _initialAnchor: WeakRef<Element> | null = null;
+
+  private _isTransient = false;
   private _open = false;
 
   //#endregion
@@ -37,9 +47,9 @@ class TooltipController implements ReactiveController {
       this._addTooltipListeners();
       service.add(this._host, this._options.onEscape);
     } else {
-      if (this._isTransientAnchor) {
-        this._isTransientAnchor = false;
-        this.setAnchor(this._defaultAnchor);
+      if (this._isTransient) {
+        this._isTransient = false;
+        this.setAnchor(this._initialAnchor?.deref());
       }
 
       this._removeTooltipListeners();
@@ -51,7 +61,9 @@ class TooltipController implements ReactiveController {
    * Returns the current tooltip anchor target if any.
    */
   public get anchor(): TooltipAnchor {
-    return this._anchor;
+    return this._isTransient
+      ? this._anchor?.deref()
+      : this._initialAnchor?.deref();
   }
 
   /**
@@ -105,17 +117,21 @@ class TooltipController implements ReactiveController {
   //#region Internal event listeners state
 
   private _addAnchorListeners(): void {
-    if (!this._anchor) return;
+    const anchor = this.anchor;
+
+    if (!anchor) {
+      return;
+    }
 
     this._anchorAbortController = new AbortController();
     const signal = this._anchorAbortController.signal;
 
     for (const each of this._showTriggers) {
-      this._anchor.addEventListener(each, this, { passive: true, signal });
+      addWeakEventListener(anchor, each, this, { passive: true, signal });
     }
 
     for (const each of this._hideTriggers) {
-      this._anchor.addEventListener(each, this, { passive: true, signal });
+      addWeakEventListener(anchor, each, this, { passive: true, signal });
     }
   }
 
@@ -128,14 +144,9 @@ class TooltipController implements ReactiveController {
     this._hostAbortController = new AbortController();
     const signal = this._hostAbortController.signal;
 
-    this._host.addEventListener('pointerenter', this, {
-      passive: true,
-      signal,
-    });
-    this._host.addEventListener('pointerleave', this, {
-      passive: true,
-      signal,
-    });
+    for (const event of TooltipController._listeners) {
+      this._host.addEventListener(event, this, { passive: true, signal });
+    }
   }
 
   private _removeTooltipListeners(): void {
@@ -147,33 +158,33 @@ class TooltipController implements ReactiveController {
 
   //#region Event handlers
 
-  private _handleTooltipEvent(event: Event): void {
+  private async _handleTooltipEvent(event: Event): Promise<void> {
     switch (event.type) {
       case 'pointerenter':
-        this._options.onShow.call(this._host);
+        await this._options.onShow.call(this._host);
         break;
       case 'pointerleave':
-        this._options.onHide.call(this._host);
+        await this._options.onHide.call(this._host);
     }
   }
 
-  private _handleAnchorEvent(event: Event): void {
+  private async _handleAnchorEvent(event: Event): Promise<void> {
     if (!this._open && this._showTriggers.has(event.type)) {
-      this._options.onShow.call(this._host);
+      await this._options.onShow.call(this._host);
     }
 
     if (this._open && this._hideTriggers.has(event.type)) {
-      this._options.onHide.call(this._host);
+      await this._options.onHide.call(this._host);
     }
   }
 
   /** @internal */
   public handleEvent(event: Event): void {
     if (event.target === this._host) {
       this._handleTooltipEvent(event);
-    } else if (event.target === this._anchor) {
+    } else if (event.target === this._anchor?.deref()) {
       this._handleAnchorEvent(event);
-    } else if (event.target === this._defaultAnchor) {
+    } else if (event.target === this._initialAnchor?.deref()) {
       this.open = false;
       this._handleAnchorEvent(event);
     }
@@ -183,7 +194,10 @@ class TooltipController implements ReactiveController {
 
   private _dispose(): void {
     this._removeAnchorListeners();
+    this._removeTooltipListeners();
+    service.remove(this._host);
     this._anchor = null;
+    this._initialAnchor = null;
   }
 
   //#region Public API
@@ -192,24 +206,35 @@ class TooltipController implements ReactiveController {
    * Removes all triggers from the previous `anchor` target and rebinds the current
    * sets back to the new value if it exists.
    */
-  public setAnchor(value: TooltipAnchor, transient = false): void {
-    if (this._anchor === value) return;
+  public setAnchor(value: TooltipAnchor | string, transient = false): void {
+    const newAnchor = isString(value)
+      ? getElementByIdFromRoot(this._host, value)
+      : value;
+
+    if (this._anchor?.deref() === newAnchor) {
+      return;
+    }
+
+    // Tooltip `show()` method called with a target. Set to hidden state.
+    if (transient && this._open) {
+      this.open = false;
+    }
 
-    if (this._anchor !== this._defaultAnchor) {
+    if (this._anchor?.deref() !== this._initialAnchor?.deref()) {
       this._removeAnchorListeners();
     }
 
-    this._anchor = value;
-    this._isTransientAnchor = transient;
+    this._anchor = newAnchor ? new WeakRef(newAnchor) : null;
+    this._isTransient = transient;
     this._addAnchorListeners();
   }
 
-  public resolveAnchor(value: Element | string | undefined): void {
+  public resolveAnchor(value: TooltipAnchor | string): void {
     const resolvedElement = isString(value)
       ? getElementByIdFromRoot(this._host, value)
       : value;
 
-    this._defaultAnchor = resolvedElement;
+    this._initialAnchor = resolvedElement ? new WeakRef(resolvedElement) : null;
     this.setAnchor(resolvedElement);
   }
 
@@ -225,8 +250,6 @@ class TooltipController implements ReactiveController {
   /** @internal */
   public hostDisconnected(): void {
     this._dispose();
-    this._removeTooltipListeners();
-    service.remove(this._host);
   }
 
   //#endregion

src/components/tooltip/tooltip-service.ts src/components/tooltip/service.tssrc/components/tooltip/tooltip-service.ts renamed to src/components/tooltip/service.ts

@@ -43,13 +43,13 @@ class TooltipEscapeCallbacks {
   }
 
   /** @internal */
-  public handleEvent(event: KeyboardEvent): void {
+  public async handleEvent(event: KeyboardEvent): Promise<void> {
     if (event.key !== escapeKey) {
       return;
     }
 
     const [tooltip, callback] = last(Array.from(this._collection.entries()));
-    callback?.call(tooltip);
+    await callback?.call(tooltip);
   }
 }
 

src/components/tooltip/tooltip.spec.ts

@@ -500,6 +500,51 @@ describe('Tooltip', () => {
       await showComplete();
       expect(tooltip.open).to.be.true;
     });
+
+    it('should be able to pass and IDREF to `show` method', async () => {
+      const eventSpy = spy(tooltip, 'emitEvent');
+
+      const [_, transientAnchor] = Array.from(
+        tooltip.parentElement!.querySelectorAll('button')
+      );
+
+      transientAnchor.id = 'custom-target';
+
+      const result = await tooltip.show('custom-target');
+      expect(result).to.be.true;
+      expect(tooltip.open).to.be.true;
+      expect(eventSpy.callCount).to.equal(0);
+    });
+
+    it('should correctly handle open state and events between default and transient anchors', async () => {
+      const eventSpy = spy(tooltip, 'emitEvent');
+
+      const [defaultAnchor, transientAnchor] = Array.from(
+        tooltip.parentElement!.querySelectorAll('button')
+      );
+
+      const result = await tooltip.show(transientAnchor);
+      expect(result).to.be.true;
+      expect(tooltip.open).to.be.true;
+      expect(eventSpy.callCount).to.equal(0);
+
+      simulatePointerEnter(defaultAnchor);
+      // Trigger on the initial default anchor. Tooltip must be hidden.
+      expect(tooltip.open).to.be.false;
+      await clock.tickAsync(DEFAULT_SHOW_DELAY);
+      await showComplete();
+      expect(tooltip.open).to.be.true;
+
+      expect(eventSpy).calledWith('igcOpening', {
+        cancelable: true,
+        detail: defaultAnchor,
+      });
+
+      expect(eventSpy).calledWith('igcOpened', {
+        cancelable: false,
+        detail: defaultAnchor,
+      });
+    });
   });
 
   describe('Behaviors', () => {

src/components/tooltip/tooltip.ts

@@ -15,10 +15,10 @@ import IgcIconComponent from '../icon/icon.js';
 import IgcPopoverComponent, {
   type PopoverPlacement,
 } from '../popover/popover.js';
+import { addTooltipController } from './controller.js';
 import { styles as shared } from './themes/shared/tooltip.common.css';
 import { all } from './themes/themes.js';
 import { styles } from './themes/tooltip.base.css.js';
-import { addTooltipController } from './tooltip-event-controller.js';
 
 export interface IgcTooltipComponentEventMap {
   igcOpening: CustomEvent<Element | null>;
@@ -258,7 +258,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
     super();
 
     this._internals = this.attachInternals();
-    this._internals.role = this.sticky ? 'status' : 'tooltip';
+    this._internals.role = 'tooltip';
     this._internals.ariaAtomic = 'true';
     this._internals.ariaLive = 'polite';
   }
@@ -273,7 +273,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
   }
 
   @watch('anchor')
-  protected _onAnchorChange() {
+  protected _onAnchorChange(): void {
     this._controller.resolveAnchor(this.anchor);
   }
 
@@ -328,6 +328,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
 
     if (withDelay) {
       clearTimeout(this._timeoutId);
+
       return new Promise(() => {
         this._timeoutId = setTimeout(
           async () => await commitStateChange(),
@@ -343,26 +344,22 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
    *  Shows the tooltip if not already showing.
    *  If a target is provided, sets it as a transient anchor.
    */
-  public show(target?: Element): Promise<boolean> {
+  public async show(target?: Element | string): Promise<boolean> {
     if (target) {
       this._stopTimeoutAndAnimation();
-
-      if (this._controller.anchor !== target) {
-        this.open = false;
-      }
       this._controller.setAnchor(target, true);
     }
 
     return this._applyTooltipState({ show: true });
   }
 
   /** Hides the tooltip if not already hidden. */
-  public hide(): Promise<boolean> {
+  public async hide(): Promise<boolean> {
     return this._applyTooltipState({ show: false });
   }
 
   /** Toggles the tooltip between shown/hidden state */
-  public toggle(): Promise<boolean> {
+  public async toggle(): Promise<boolean> {
     return this.open ? this.hide() : this.show();
   }