@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/external/spatial-navigation/spatialNavigation.d.ts

@@ -11,6 +11,7 @@ interface FocusableComponent {
     parentFocusKey: string | null;
     onEnterPressHandler?: (details: Details) => void;
     onBackPressHandler?: (details: Details) => void;
+    onClickPressHandler?: (details: Details) => void;
     onEnterReleaseHandler?: () => void;
     onArrowPressHandler?: (direction: Direction, details: Details) => boolean | void;
     onBecameFocusedHandler?: (layout: Layout, details: any) => void;
@@ -47,6 +48,7 @@ interface AddFocusableOptions {
     node: HTMLElement;
     parentFocusKey: string | null;
     onEnterPressHandler?: (details: Details) => void;
+    onClickPressHandler?: (details: Details) => void;
     onEnterReleaseHandler?: () => void;
     onBackPressHandler?: (details: Details) => void;
     onArrowPressHandler?: (direction: Direction, details: Details) => boolean | void;
@@ -78,6 +80,7 @@ declare class SpatialNavigation {
     private pressedKeys;
     paused: boolean;
     private keyDownEventListener;
+    private clickEventListener;
     private keyUpEventListener;
     private keyMap;
     private debug;
@@ -111,23 +114,25 @@ declare class SpatialNavigation {
     getEventType(keyCode: number): KeyType | undefined;
     bindEventHandlers(): void;
     unbindEventHandlers(): void;
+    findFocusKeyForElement(element: HTMLElement): string | null;
+    onClickPress(details: Details): void;
     onEnterPress(details: Details): void;
     onBackPress(details: Details): void;
     onEnterRelease(): void;
     onArrowPress(direction: Direction, details: Details): boolean | void;
-    navigateByDirection(direction: Direction, details?: Record<string, any>): void;
+    navigateByDirection(direction: Direction, details?: Details): void;
     onKeyEvent(event: KeyboardEvent): void;
-    smartNavigate(direction: Direction, fromParentFocusKey: string | null, details: Record<string, any>): void;
+    smartNavigate(direction: Direction, fromParentFocusKey: string | null, details: Details): void;
     saveLastFocusedChildKey(component: FocusableComponent | undefined, focusKey: string): void;
     log(functionName: string, debugString: string, ...rest: any[]): void;
     getNextFocusKey(targetFocusKey: string): string;
-    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, autoRestoreFocus, focusable, blockNavigationOut, }: AddFocusableOptions): void;
+    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, onClickPressHandler, autoRestoreFocus, focusable, blockNavigationOut, }: AddFocusableOptions): void;
     removeFocusable({ focusKey }: {
         focusKey: string;
     }): void;
     getNodeLayoutByFocusKey(focusKey: string): Layout | null;
-    setCurrentFocusedKey(newFocusKey: string, details: Record<string, any>): void;
-    updateParentsHasFocusedChild(focusKey: string, details: Record<string, any>): void;
+    setCurrentFocusedKey(newFocusKey: string, details?: Details): void;
+    updateParentsHasFocusedChild(focusKey: string, details: Details): void;
     updateParentsLastFocusedChild(focusKey: string): void;
     getKeyMap(): KeyMap;
     setKeyMap(keyMap: KeyMap): void;
@@ -137,11 +142,11 @@ declare class SpatialNavigation {
      * 'focusable' focusableComponent). Seems less confusing than calling it isFocusableFocusableComponent()
      */
     isParticipatingFocusableComponent(focusKey: string): boolean;
-    onIntermediateNodeBecameFocused(focusKey: string, details: Record<string, any>): void;
-    onIntermediateNodeBecameBlurred(focusKey: string, details: Record<string, any>): void;
+    onIntermediateNodeBecameFocused(focusKey: string, details: Details): void;
+    onIntermediateNodeBecameBlurred(focusKey: string, details: Details): void;
     pause(): void;
     resume(): void;
-    setFocus(targetFocusKey: string, details?: Record<string, any>): void;
+    setFocus(targetFocusKey: string, details?: Details): void;
     updateAllLayouts(): void;
     updateLayout(focusKey: string): void;
     updateFocusable(focusKey: string, { node, preferredChildFocusKey, focusable, blockNavigationOut, }: UpdateFocusableOptions): void;

package/dist/src/external/spatial-navigation/spatialNavigation.js

@@ -290,6 +290,12 @@ class SpatialNavigation {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "clickEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "keyUpEventListener", {
             enumerable: true,
             configurable: true,
@@ -329,6 +335,7 @@ class SpatialNavigation {
         this.pressedKeys = {};
         this.paused = true;
         this.keyDownEventListener = null;
+        this.clickEventListener = null;
         this.keyUpEventListener = null;
         this.keyMap = DEFAULT_KEY_MAP;
         this.debug = false;
@@ -434,20 +441,75 @@ class SpatialNavigation {
                     this.onEnterRelease();
                 }
             };
+            // Click handler for mouse/touch support
+            this.clickEventListener = (event) => {
+                if (this.paused === true) {
+                    return;
+                }
+                const target = event.target;
+                if (!target) {
+                    return;
+                }
+                // Find the focusable component that contains the clicked element
+                const focusKey = this.findFocusKeyForElement(target);
+                if (!focusKey) {
+                    return;
+                }
+                const details = {
+                    pressedKeys: {},
+                    event,
+                    mouseClick: true,
+                };
+                const layout = this.getNodeLayoutByFocusKey(focusKey);
+                if (layout) {
+                    details.layout = layout;
+                }
+                const isAlreadyFocused = this.focusKey === focusKey;
+                if (!isAlreadyFocused) {
+                    this.setFocus(focusKey, details);
+                }
+                this.onClickPress(details);
+            };
             window.addEventListener('keyup', this.keyUpEventListener);
             window.addEventListener('keydown', this.keyDownEventListener);
+            window.addEventListener('click', this.clickEventListener);
         }
     }
     unbindEventHandlers() {
         if (typeof window !== 'undefined' && window.removeEventListener) {
             window.removeEventListener('keydown', this.keyDownEventListener);
+            window.removeEventListener('click', this.clickEventListener);
             this.keyDownEventListener = null;
+            this.clickEventListener = null;
             if (this.throttle) {
                 window.removeEventListener('keyup', this.keyUpEventListener);
                 this.keyUpEventListener = null;
             }
         }
     }
+    findFocusKeyForElement(element) {
+        for (const focusKey of Object.keys(this.focusableComponents)) {
+            const component = this.focusableComponents[focusKey];
+            if (component && component.node && component.focusable) {
+                if (component.node === element || component.node.contains(element)) {
+                    return focusKey;
+                }
+            }
+        }
+        return null;
+    }
+    onClickPress(details) {
+        const component = this.focusableComponents[this.focusKey];
+        if (!component) {
+            this.log('onClickPress', 'noComponent');
+            return;
+        }
+        if (!component.focusable) {
+            this.log('onClickPress', 'componentNotFocusable');
+            return;
+        }
+        component.onClickPressHandler?.(details);
+    }
     onEnterPress(details) {
         const component = this.focusableComponents[this.focusKey];
         if (!component) {
@@ -492,7 +554,7 @@ class SpatialNavigation {
         }
         return component.onArrowPressHandler?.(direction, details);
     }
-    navigateByDirection(direction, details = {}) {
+    navigateByDirection(direction, details = { pressedKeys: {} }) {
         if (this.paused === true) {
             return;
         }
@@ -514,7 +576,10 @@ class SpatialNavigation {
         this.visualDebugger?.clear();
         const direction = Object.keys(this.getKeyMap()).find((key) => this.getKeyMap()[key].includes(event.keyCode));
         if (direction) {
-            this.smartNavigate(direction, null, { event });
+            this.smartNavigate(direction, null, {
+                pressedKeys: {},
+                event,
+            });
         }
     }
     smartNavigate(direction, fromParentFocusKey, details) {
@@ -620,11 +685,12 @@ class SpatialNavigation {
         this.log('getNextFocusKey', 'childKey will be focused', childKey);
         return this.getNextFocusKey(childKey);
     }
-    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, autoRestoreFocus, focusable = true, blockNavigationOut, }) {
+    addFocusable({ focusKey, node, parentFocusKey, onEnterPressHandler, onEnterReleaseHandler, onBackPressHandler, onArrowPressHandler, onBecameFocusedHandler, onBecameBlurredHandler, forgetLastFocusedChild, trackChildren, onUpdateFocus, onUpdateHasFocusedChild, preferredChildFocusKey, onClickPressHandler, autoRestoreFocus, focusable = true, blockNavigationOut, }) {
         this.focusableComponents[focusKey] = {
             focusKey,
             node,
             parentFocusKey,
+            onClickPressHandler,
             onEnterPressHandler,
             onEnterReleaseHandler,
             onBackPressHandler,
@@ -707,7 +773,7 @@ class SpatialNavigation {
         }
         return null;
     }
-    setCurrentFocusedKey(newFocusKey, details) {
+    setCurrentFocusedKey(newFocusKey, details = { pressedKeys: {} }) {
         if (this.isFocusableComponent(this.focusKey) &&
             newFocusKey !== this.focusKey) {
             const oldComponent = this.focusableComponents[this.focusKey];
@@ -720,6 +786,7 @@ class SpatialNavigation {
         if (this.isFocusableComponent(this.focusKey)) {
             const newComponent = this.focusableComponents[this.focusKey];
             newComponent.onUpdateFocus?.(true);
+            this.updateParentsHasFocusedChild(this.focusKey, details);
             newComponent.onBecameFocusedHandler?.(this.getNodeLayoutByFocusKey(this.focusKey), details);
         }
     }
@@ -806,13 +873,14 @@ class SpatialNavigation {
         this.visualDebugger?.clearLayouts();
         this.getFocusableComponents().forEach((component) => {
             component.onUpdateFocus?.(false);
+            component.onUpdateHasFocusedChild?.(false);
         });
         this.paused = true;
     }
     resume() {
         this.paused = false;
     }
-    setFocus(targetFocusKey, details = {}) {
+    setFocus(targetFocusKey, details = { pressedKeys: {} }) {
         const lastFocusedKey = this.focusKey;
         const newFocusKey = this.getNextFocusKey(targetFocusKey);
         this.log('setFocus', 'newFocusKey', newFocusKey);

package/dist/src/external/spatial-navigation/utils.d.ts

@@ -17,4 +17,6 @@ export interface Layout {
 export interface Details {
     pressedKeys: Record<string, number>;
     layout?: Layout;
+    event?: Event;
+    mouseClick?: boolean;
 }

package/dist/src/external/spatial-navigation/withFocusable.d.ts

@@ -19,6 +19,12 @@ export interface WithFocusableProps {
     hasFocusedChild?: boolean;
     focusable?: boolean;
     onEnterPress?: (props: any, details: Details) => void;
+    /**
+     * @description - Called when "click" action is performed (e.g., mouse click or touch), fired by spatial navigation
+     * @param props - The props of the component
+     * @param details - object containing information about the event, such as the source of the event, layout, etc.
+     */
+    onClickPress?: (props: any, details: Details) => void;
     onEnterRelease?: (props: any) => void;
     onBackPress?: (props: any, details: Details) => void;
     onArrowPress?: (direction: Direction, props: any, details: Details) => boolean | void;
@@ -39,11 +45,12 @@ declare const withFocusable: <P extends object>({ forgetLastFocusedChild: config
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: Details) => void;
         onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
@@ -79,11 +86,12 @@ declare const withFocusable: <P extends object>({ forgetLastFocusedChild: config
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: Details) => void;
         onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;

package/dist/src/external/spatial-navigation/withFocusable.js

@@ -56,9 +56,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         configurable: true,
                         writable: true,
                         value: () => {
-                            this.navigation.setFocus(this.state.realFocusKey, {
-                                focusKey: this.state.realFocusKey,
-                            });
+                            this.navigation.setFocus(this.state.realFocusKey);
                         }
                     });
                     Object.defineProperty(this, "onUpdateFocus", {
@@ -86,6 +84,15 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                             onEnterPress(rest, details);
                         }
                     });
+                    Object.defineProperty(this, "onClickPressHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (details) => {
+                            const { onClickPress = noop, ...rest } = this.props;
+                            onClickPress(rest, details);
+                        }
+                    });
                     Object.defineProperty(this, "onEnterReleaseHandler", {
                         enumerable: true,
                         configurable: true,
@@ -157,6 +164,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         parentFocusKey,
                         preferredChildFocusKey,
                         onEnterPressHandler: this.onEnterPressHandler,
+                        onClickPressHandler: this.onClickPressHandler,
                         onEnterReleaseHandler: this.onEnterReleaseHandler,
                         onBackPressHandler: this.onBackPressHandler,
                         onArrowPressHandler: this.onArrowPressHandler,
@@ -212,6 +220,7 @@ const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild =
                         'onBecameFocusedHandler',
                         'onBecameBlurredHandler',
                         'onEnterPressHandler',
+                        'onClickPressHandler',
                         'onEnterReleaseHandler',
                         'onArrowPressHandler',
                         'onUpdateFocus',

package/dist/src/hooks/useMaxHeightToBottom.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook for functional components.
+ * Returns a ref callback that sets up maxHeight calculation with resize listener.
+ */
+export declare function useMaxHeightToBottom(): (element: HTMLDivElement | null) => void;
+/**
+ * Utility for class components.
+ * Call in componentDidMount, returns cleanup function for componentWillUnmount.
+ */
+export declare function setupMaxHeightToBottom(getElement: () => HTMLElement | null): () => void;
+export default useMaxHeightToBottom;

package/dist/src/hooks/useMaxHeightToBottom.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Calculates and sets maxHeight on an element to fill remaining viewport height.
+ * Updates on window resize.
+ */
+function calculateMaxHeight(element) {
+    if (!element)
+        return;
+    const rect = element.getBoundingClientRect();
+    element.style.maxHeight = `${window.innerHeight - rect.top}px`;
+}
+/**
+ * Hook for functional components.
+ * Returns a ref callback that sets up maxHeight calculation with resize listener.
+ */
+export function useMaxHeightToBottom() {
+    const elementRef = useRef(null);
+    const handleResize = useCallback(() => {
+        calculateMaxHeight(elementRef.current);
+    }, []);
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    const refCallback = useCallback((element) => {
+        elementRef.current = element;
+        calculateMaxHeight(element);
+    }, []);
+    return refCallback;
+}
+/**
+ * Utility for class components.
+ * Call in componentDidMount, returns cleanup function for componentWillUnmount.
+ */
+export function setupMaxHeightToBottom(getElement) {
+    const handleResize = () => {
+        calculateMaxHeight(getElement());
+    };
+    // Initial calculation
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+        window.removeEventListener('resize', handleResize);
+    };
+}
+export default useMaxHeightToBottom;

package/dist/src/index.d.ts

@@ -1,16 +1,12 @@
 import IMaestroEventDelegate, { PanelEvent } from './interfaces/IMaestroEventDelegate';
-import IMaestroManager, { SDKConfigParams } from './interfaces/IMaestroManager';
+import IMaestroManager, { SDKConfigParams, SDKEventConfigParams, SDKStopEventParams } from './interfaces/IMaestroManager';
 import IMaestroEvent from './interfaces/IMaestroEvent';
 import { MaestroEventViewModel } from './view-models/MaestroEventViewModel';
-import IMaestroKeyPlaysResponse from './modules/key-plays/interfaces/IKeyPlaysResponse';
-import { IUserSettings } from './interfaces/IUserSettings';
+import IMaestroKeyPlaysResponse from './modules/espn/key-plays/interfaces/IKeyPlaysResponse';
 import { GlobalConfig, PageConfig } from './services/StaticService/types';
 import { MaestroPanelType } from './models/IPanel';
-export { default as Overlay } from './components/molecules/Overlay/Overlay';
-export { OverlayType, IMaestroOverlayEvent, IOverlaySize, IOverlayPosition, IFantasyPayload, IOverlayAnalyticsEvent, } from './types/OverlayTypes';
-export { IWinningBet } from './models/IWinningBet';
 export { ActionTrackEvent, ImpressionTrackEvent, Metadata, PanelClickAction, PanelViewAction, } from './services/AnalyticsService/types';
-export { PanelEvent, IMaestroEventDelegate, IMaestroEvent, IMaestroKeyPlaysResponse, MaestroPanelType, };
+export { PanelEvent, IMaestroEventDelegate, IMaestroEvent, IMaestroKeyPlaysResponse, MaestroPanelType, SDKEventConfigParams, SDKStopEventParams, };
 export { IUserSettings, DEFAULT_USER_SETTINGS, } from './interfaces/IUserSettings';
 /**
  * Main SDK class that serves as the entry point for the Maestro TV SDK
@@ -24,16 +20,18 @@ declare class MaestroWebSDK implements IMaestroManager {
     private pageConfig;
     private globalConfig;
     private globalConfigPoller;
-    private analyticsService;
-    private staticService;
+    private _analyticsService;
+    private isProdEnv;
+    private activePanelUnmountFn;
     private constructor();
+    private get analyticsService();
     /**
      * @description Returns the MaestroWebSDK instance
      * @returns {MaestroWebSDK} - The MaestroWebSDK instance
      */
     static getInstance(): MaestroWebSDK;
-    userDidStartWatchingEvent(eventID: string, delegate: IMaestroEventDelegate, userSettings?: IUserSettings): Promise<IMaestroEvent>;
-    userDidStopWatchingEvent(_: string): Promise<void>;
+    userDidStartWatchingEvent({ eventId, pageId, userSettings, delegate, useProdEnv, }: SDKEventConfigParams): Promise<IMaestroEvent>;
+    userDidStopWatchingEvent(_config: SDKStopEventParams): Promise<void>;
     configure(configParams: SDKConfigParams): void;
     /**
      * Sets the site ID for the SDK
@@ -41,6 +39,7 @@ declare class MaestroWebSDK implements IMaestroManager {
      */
     setSiteID(siteID: string): void;
     getSiteID(): string;
+    getIsProdEnv(): boolean;
     /**
      * Gets the event view model
      * @returns The current event view model

package/dist/src/index.js

@@ -3,11 +3,7 @@ import { MaestroEventViewModel } from './view-models/MaestroEventViewModel';
 import { UserSettingsManager } from './services/UserSettingsManager';
 import StaticService from './services/StaticService';
 import { MaestroPanelType } from './models/IPanel';
-import initSentry from './sentry';
 import AnalyticsService from './services/AnalyticsService/AnalyticsService';
-// Export overlay components and types for client apps
-export { default as Overlay } from './components/molecules/Overlay/Overlay';
-export { OverlayType, } from './types/OverlayTypes';
 export { MaestroPanelType, };
 export { DEFAULT_USER_SETTINGS, } from './interfaces/IUserSettings';
 /**
@@ -52,20 +48,32 @@ class MaestroWebSDK {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "analyticsService", {
+        Object.defineProperty(this, "_analyticsService", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new AnalyticsService()
+            value: null
         });
-        Object.defineProperty(this, "staticService", {
+        Object.defineProperty(this, "isProdEnv", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new StaticService()
+            value: true
+        });
+        Object.defineProperty(this, "activePanelUnmountFn", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
         });
         this.renderer = renderer;
     }
+    get analyticsService() {
+        if (!this._analyticsService) {
+            this._analyticsService = new AnalyticsService();
+        }
+        return this._analyticsService;
+    }
     /**
      * @description Returns the MaestroWebSDK instance
      * @returns {MaestroWebSDK} - The MaestroWebSDK instance
@@ -77,33 +85,42 @@ class MaestroWebSDK {
         }
         return MaestroWebSDK.instance;
     }
-    async userDidStartWatchingEvent(eventID, delegate, userSettings) {
+    async userDidStartWatchingEvent({ eventId, pageId, userSettings, delegate, useProdEnv = true, }) {
+        this.isProdEnv = useProdEnv;
         // Fetch page config before initializing view models
         const siteId = this.getSiteID();
         if (!siteId || siteId.trim() === '') {
             throw new Error('siteID must be set before calling userDidStartWatchingEvent.');
         }
-        if (!eventID || eventID.trim() === '') {
-            throw new Error('eventID must be provided to watch an event.');
+        if (!eventId && !pageId) {
+            throw new Error('Either eventId or pageId must be provided to load the page configuration.');
         }
-        this.pageConfig = await this.staticService.fetchPageConfig(siteId, eventID);
+        const staticService = new StaticService(siteId);
+        this.pageConfig = await staticService.fetchPageConfig({
+            siteId,
+            metadataValue: eventId,
+            pageId,
+        });
         if (!this.pageConfig) {
-            throw new Error(`Could not determine page configuration for siteId: ${siteId} and eventID: ${eventID}.`);
+            throw new Error(`Could not determine page configuration for siteId: ${siteId}, pageId: ${pageId} and eventId: ${eventId}.`);
         }
-        this.globalConfigPoller = this.staticService.pollGlobalConfig((data) => {
+        this.globalConfigPoller = staticService.pollGlobalConfig((data) => {
             this.globalConfig = data;
         });
         // Initialize user settings if provided
         if (userSettings) {
             UserSettingsManager.getInstance().updateSettings(userSettings);
         }
-        initSentry();
         await this.analyticsService.SDKSessionStart();
-        this.maestroEventViewModel = new MaestroEventViewModel(eventID, delegate);
+        this.maestroEventViewModel = new MaestroEventViewModel(eventId, pageId, delegate, this.analyticsService);
+        await this.maestroEventViewModel.initViewModels();
         await this.analyticsService.pageSessionStart();
         return this.maestroEventViewModel;
     }
-    async userDidStopWatchingEvent(_) {
+    async userDidStopWatchingEvent(_config) {
+        if (this.activePanelUnmountFn) {
+            await this.activePanelUnmountFn();
+        }
         await this.analyticsService.pageSessionEnd();
         if (this.maestroEventViewModel) {
             await this.maestroEventViewModel.deinit();
@@ -136,6 +153,9 @@ class MaestroWebSDK {
     getSiteID() {
         return this.siteID;
     }
+    getIsProdEnv() {
+        return this.isProdEnv;
+    }
     /**
      * Gets the event view model
      * @returns The current event view model
@@ -149,10 +169,22 @@ class MaestroWebSDK {
     async renderPanel(id) {
         await this.analyticsService.pinchBackSessionStart();
         const panelUnmountFn = await this.renderer.renderPanel(id);
-        return async () => {
-            await this.analyticsService.pinchBackSessionEnd();
+        let isCleanedUp = false;
+        const cleanupFn = async () => {
+            if (isCleanedUp) {
+                return;
+            }
+            isCleanedUp = true;
+            // Unmount first so the UI is torn down immediately and any portals/handlers
+            // are cleaned up even if the caller doesn't await this async function.
             panelUnmountFn();
+            await this.analyticsService.pinchBackSessionEnd();
+            if (this.activePanelUnmountFn === cleanupFn) {
+                this.activePanelUnmountFn = null;
+            }
         };
+        this.activePanelUnmountFn = cleanupFn;
+        return cleanupFn;
     }
     getPageConfig() {
         return this.pageConfig;

package/dist/src/interfaces/IMaestroEvent.d.ts

@@ -1,5 +1,5 @@
 import { MaestroPanelType } from '@/models/IPanel';
-import IMaestroKeyPlaysResponse from '../modules/key-plays/interfaces/IKeyPlaysResponse';
+import IMaestroKeyPlaysResponse from '../modules/espn/key-plays/interfaces/IKeyPlaysResponse';
 import { IUserSettings } from './IUserSettings';
 /**
  * This is the public API that the app can use to make calls to the SDK related to the currently-loaded event.
@@ -99,7 +99,6 @@ export default interface IMaestroEvent {
      * })
      */
     setDataToPanel(panelData: Record<string, any>): void;
-    simulateUseCase<T = any>(useCase: TestUseCase, panelType: MaestroPanelType, testData?: T): void;
     /**
      * @description Sets the active panel in the Maestro SDK, if the panel is available and not hidden.
      * @param {MaestroPanelType} panelType - The type of the panel to set as active
@@ -107,20 +106,3 @@ export default interface IMaestroEvent {
      */
     setActivePanel(panelType: MaestroPanelType): void;
 }
-declare const TEST_USE_CASES: {
-    readonly betsTabLoadFailure: "betsTabLoadFailure";
-    readonly betsMockData: "betsMockData";
-    readonly betsLiveData: "betsLiveData";
-    readonly showBasketballPreGameStatsMockData: "showBasketballPreGameStatsMockData";
-    readonly showBasketballInGameStatsMockData: "showBasketballInGameStatsMockData";
-    readonly showFootballPreGameStatsMockData: "showFootballPreGameStatsMockData";
-    readonly showFootballInGameStatsMockData: "showFootballInGameStatsMockData";
-    readonly showHockeyPreGameStatsMockData: "showHockeyPreGameStatsMockData";
-    readonly showHockeyInGameStatsMockData: "showHockeyInGameStatsMockData";
-    readonly shopTabLoadFailure: "shopTabLoadFailure";
-    readonly shopEmptyState: "shopEmptyState";
-    readonly shopMockData: "shopMockData";
-    readonly shopLiveData: "shopLiveData";
-};
-export type TestUseCase = typeof TEST_USE_CASES[keyof typeof TEST_USE_CASES];
-export {};

package/dist/src/interfaces/IMaestroEvent.js

@@ -1,18 +1 @@
-const TEST_USE_CASES = {
-    betsTabLoadFailure: 'betsTabLoadFailure',
-    betsMockData: 'betsMockData',
-    betsLiveData: 'betsLiveData',
-    // Stats use cases
-    showBasketballPreGameStatsMockData: 'showBasketballPreGameStatsMockData',
-    showBasketballInGameStatsMockData: 'showBasketballInGameStatsMockData',
-    showFootballPreGameStatsMockData: 'showFootballPreGameStatsMockData',
-    showFootballInGameStatsMockData: 'showFootballInGameStatsMockData',
-    showHockeyPreGameStatsMockData: 'showHockeyPreGameStatsMockData',
-    showHockeyInGameStatsMockData: 'showHockeyInGameStatsMockData',
-    // Shop use cases
-    shopTabLoadFailure: 'shopTabLoadFailure',
-    shopEmptyState: 'shopEmptyState',
-    shopMockData: 'shopMockData',
-    shopLiveData: 'shopLiveData',
-};
 export {};