fix: Context request event timing between slotted consumers/providers

Fixed an issue with fullscreen event handler when
the tile manager and its tiles are in a Shadow DOM
region.

Author: rkaraivanov

src/components/common/context.ts

@@ -1,5 +1,6 @@
 import { createContext } from '@lit/context';
 import type IgcCarouselComponent from '../carousel/carousel.js';
+import type { addFullscreenController } from '../tile-manager/controllers/fullscreen.js';
 import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
 import type IgcTileComponent from '../tile-manager/tile.js';
 
@@ -12,8 +13,8 @@ export type TileManagerContext = {
 export type TileContext = {
   /** The igc-tile component instance. */
   instance: IgcTileComponent;
-  /** Sets the current fullscreen state of the igc-tile element. */
-  setFullscreenState: (fullscreen: boolean) => unknown;
+  /** The fullscreen controller of the igc-tile instance. */
+  fullscreenController: ReturnType<typeof addFullscreenController>;
 };
 
 const carouselContext = createContext<IgcCarouselComponent>(

src/components/common/controllers/async-consumer.ts

@@ -0,0 +1,56 @@
+import { type Context, ContextConsumer, type ContextType } from '@lit/context';
+import type {
+  LitElement,
+  ReactiveController,
+  ReactiveControllerHost,
+} from 'lit';
+
+type AsyncContextOptions<T extends Context<unknown, unknown>> = {
+  context: T;
+  subscribe?: boolean;
+};
+
+/* blazorSuppress */
+export class AsyncContextConsumer<
+  T extends Context<unknown, unknown>,
+  Host extends ReactiveControllerHost & HTMLElement,
+> implements ReactiveController
+{
+  protected _host: Host;
+  protected _options: AsyncContextOptions<T>;
+  protected _consumer?: ContextConsumer<T, Host>;
+
+  constructor(host: Host, options: AsyncContextOptions<T>) {
+    this._host = host;
+    this._options = options;
+
+    this._host.addController(this);
+  }
+
+  public get value(): ContextType<T> | undefined {
+    return this._consumer?.value;
+  }
+
+  public async hostConnected(): Promise<void> {
+    await this._host.updateComplete;
+
+    // If there is already an instance of a consumer (because of an attach/detach cycle),
+    // skip creating a new instance for this host.
+    if (!this._consumer) {
+      this._consumer = new ContextConsumer(this._host, {
+        context: this._options.context,
+        subscribe: this._options.subscribe,
+      });
+    }
+  }
+}
+
+export function createAsyncContext<
+  T extends Context<unknown, unknown>,
+  Host extends ReactiveControllerHost & LitElement,
+>(host: Host, context: T): AsyncContextConsumer<T, Host> {
+  return new AsyncContextConsumer(host, {
+    context,
+    subscribe: true,
+  }) as AsyncContextConsumer<T, Host>;
+}

src/components/tile-manager/controllers/fullscreen.ts

@@ -65,8 +65,7 @@ class FullscreenController implements ReactiveController {
 
   /** @internal */
   public handleEvent(): void {
-    const isFullscreen = document.fullscreenElement === this._host;
-    if (!isFullscreen && this._fullscreen) {
+    if (!document.fullscreenElement && this._fullscreen) {
       this.setState(false);
     }
   }

src/components/tile-manager/tile-header.ts

@@ -1,8 +1,8 @@
-import { consume } from '@lit/context';
 import { LitElement, html, nothing } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
-import { type TileContext, tileContext } from '../common/context.js';
+import { tileContext } from '../common/context.js';
+import { createAsyncContext } from '../common/controllers/async-consumer.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcDividerComponent from '../divider/divider.js';
 import { all } from './themes/header.js';
@@ -33,11 +33,10 @@ export default class IgcTileHeaderComponent extends LitElement {
     );
   }
 
-  @consume({ context: tileContext, subscribe: true })
-  private _tileContext?: TileContext;
+  private _context = createAsyncContext(this, tileContext);
 
   private get _tile() {
-    return this._tileContext?.instance;
+    return this._context?.value?.instance;
   }
 
   private get _isMaximized() {
@@ -55,8 +54,8 @@ export default class IgcTileHeaderComponent extends LitElement {
   }
 
   private handleFullscreen() {
-    if (this._tileContext) {
-      this._tileContext.setFullscreenState(!this._isFullscreen);
+    if (this._context) {
+      this._context.value!.fullscreenController.setState(!this._isFullscreen);
     }
   }
 

src/components/tile-manager/tile.ts

@@ -1,14 +1,14 @@
-import { ContextProvider, consume } from '@lit/context';
+import { ContextProvider } from '@lit/context';
 import { LitElement, type PropertyValues, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import {
   type TileContext,
-  type TileManagerContext,
   tileContext,
   tileManagerContext,
 } from '../common/context.js';
+import { createAsyncContext } from '../common/controllers/async-consumer.js';
 import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
@@ -113,14 +113,16 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   // Tile manager context properties and helpers
 
-  @consume({ context: tileManagerContext, subscribe: true })
-  private _managerContext?: TileManagerContext;
+  private _managerContext = createAsyncContext(this, tileManagerContext);
+
+  private get _tileManager() {
+    return this._managerContext.value;
+  }
 
   private _createContext(): TileContext {
     return {
       instance: this,
-      setFullscreenState: (fullscreen) =>
-        this._fullscreenController.setState(fullscreen),
+      fullscreenController: this._fullscreenController,
     };
   }
 
@@ -134,12 +136,12 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   private get _draggedItem(): IgcTileComponent | null {
-    return this._managerContext?.draggedItem ?? null;
+    return this._tileManager?.draggedItem ?? null;
   }
 
   private get _isSlideMode(): boolean {
-    return this._managerContext
-      ? this._managerContext.instance.dragMode === 'slide'
+    return this._tileManager
+      ? this._tileManager.instance.dragMode === 'slide'
       : true;
   }
 
@@ -227,8 +229,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     this._maximized = value;
     this._setTileContext();
 
-    if (this._managerContext) {
-      this._managerContext.instance.requestUpdate();
+    if (this._tileManager) {
+      this._tileManager.instance.requestUpdate();
     }
   }
 
@@ -274,9 +276,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   protected get gridColumnWidth(): number {
     const tileManager =
-      this._managerContext!.instance!.shadowRoot!.querySelector(
-        "[part~='base']"
-      )!;
+      this._tileManager!.instance!.shadowRoot!.querySelector("[part~='base']")!;
 
     const gridTemplateColumns = getComputedStyle(tileManager).getPropertyValue(
       'grid-template-columns'
@@ -365,26 +365,22 @@ export default class IgcTileComponent extends EventEmitterMixin<
       return;
     }
 
+    const tileManager = this._tileManager!;
+
     if (isSameTile(this, this._draggedItem)) {
       this._tileContent.style.visibility = 'hidden';
       if (this._dragGhost) {
         Object.assign(this._dragGhost.style, {
           visibility: 'visible',
         });
       }
-      if (this._managerContext) {
-        this._managerContext.lastSwapTile = null;
-      }
+      tileManager.lastSwapTile = null;
     } else if (this._isSlideMode) {
       if (
-        this._managerContext &&
-        (!this._managerContext.lastSwapTile ||
-          this.hasPointerLeftLastSwapTile(
-            event,
-            this._managerContext.lastSwapTile
-          ))
+        !tileManager.lastSwapTile ||
+        this.hasPointerLeftLastSwapTile(event, tileManager.lastSwapTile)
       ) {
-        this._managerContext.lastSwapTile = this;
+        tileManager.lastSwapTile = this;
         swapTiles(this, this._draggedItem!);
       }
     }
@@ -435,8 +431,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
       pointerY < rect.top ||
       pointerY > rect.bottom;
 
-    if (outsideBoundaries && this._managerContext) {
-      this._managerContext.lastSwapTile = null;
+    if (outsideBoundaries) {
+      this._tileManager!.lastSwapTile = null;
     }
 
     return outsideBoundaries;