@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

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

@@ -11,6 +11,40 @@ export type SDKConfigParams = {
      */
     userSettings?: IUserSettings;
 };
+export type SDKStopEventParams = {
+    /**
+     * Event ID for the event being stopped.
+     */
+    eventId?: string;
+    /**
+     * Page ID for the event being stopped.
+     */
+    pageId?: string;
+};
+export type SDKEventConfigParams = {
+    /**
+     * The page ID to use to load the page configuration.
+     */
+    pageId?: string;
+    /**
+     * User settings for customizing SDK behavior (panel visibility, feature toggles, etc.)
+     */
+    userSettings?: IUserSettings;
+    /**
+     * Event ID as metadata value to use to load the page configuration.
+     * This is typically used when the page ID is not known, but a metadata value is available.
+     */
+    eventId?: string;
+    /**
+     * The instance of the app's implementation of IMaestroEventDelegate
+     */
+    delegate: IMaestroEventDelegate;
+    /**
+     * @description - Indicates whether to use the production environment for this event.
+     * @default true
+     */
+    useProdEnv?: boolean;
+};
 /**
  This is the MaestroKit top-level API for initializing and configuring the framework.  It encompasses all functionality that is not specific to an event.
  */
@@ -30,12 +64,14 @@ export default interface IMaestroManager {
        - userSettings: Optional user settings to override the configured settings for this event
        The function returns an instance of MaestroEventViewModel, which includes an implementation of IMaestroEvent.  IMaestroEvent represents the app-facing portion of the MaestroKit API related to the currently-loaded event.  So after `userDidStartWatchingEvent` is called, the SDK has access to the API detailed in `MaestroEventDelegate` for making calls to the app, and the app has access to the API detailed in `IMaestroEvent` for making calls to the SDK.
       */
-    userDidStartWatchingEvent(eventID: string, delegate: IMaestroEventDelegate, userSettings?: IUserSettings): Promise<IMaestroEvent>;
+    userDidStartWatchingEvent(config: SDKEventConfigParams): Promise<IMaestroEvent>;
     /**
      * @description Tells the SDK the user has closed an event that was open in the app's player.
-     * @param eventID
+     * @param params - Parameters including eventId or pageId to identify the event being stopped.
+     * @param params.eventId - The Event ID for the event being stopped.
+     * @param params.pageId - The Page ID for the event being stopped.
      */
-    userDidStopWatchingEvent(eventID: string): void;
+    userDidStopWatchingEvent(params: SDKStopEventParams): Promise<void>;
     /**
      * Render the PanelManager with the available panels for the current event in the specified HTML id element.
      * @param id - The ID of the HTML element where the panel will be rendered.

package/dist/src/models/IPanel.d.ts

@@ -1,9 +1,14 @@
 export declare const MaestroPanelType: {
-    readonly KEY_PLAYS: "keyPlays";
-    readonly STATS: "stats";
-    readonly BETS: "bets";
-    readonly FANTASY: "fantasy";
-    readonly SHOP: "shop";
+    readonly ESPN_KEY_PLAYS: "espnKeyPlays";
+    readonly ESPN_STATS: "espnStats";
+    readonly ESPN_BETS: "espnBet";
+    readonly ESPN_FANTASY: "espnFantasy";
+    readonly ESPN_SHOP: "espnShop";
+    readonly HELLO_WORLD: "helloWorld";
+    readonly FOX_KEY_PLAYS: "foxKeyPlays";
+    readonly FOX_MULTI_VIEW: "foxMultiview";
+    readonly FOX_STATS: "foxStats";
+    readonly BUILDER_BLOCK_PANEL: "builderBlockPanel";
 };
 export type MaestroPanelType = typeof MaestroPanelType[keyof typeof MaestroPanelType];
 export interface PanelTypeInfo {
@@ -12,4 +17,3 @@ export interface PanelTypeInfo {
     imageNamePrefix: string;
     iconName: string;
 }
-export declare const PANEL_TYPE_INFO: Record<MaestroPanelType, PanelTypeInfo>;

package/dist/src/models/IPanel.js

@@ -1,40 +1,12 @@
 export const MaestroPanelType = {
-    KEY_PLAYS: 'keyPlays',
-    STATS: 'stats',
-    BETS: 'bets',
-    FANTASY: 'fantasy',
-    SHOP: 'shop',
-};
-// The mapping information for each panel type
-export const PANEL_TYPE_INFO = {
-    [MaestroPanelType.KEY_PLAYS]: {
-        id: MaestroPanelType.KEY_PLAYS,
-        name: 'Key Plays',
-        imageNamePrefix: 'Key-Plays',
-        iconName: 'keyPlays',
-    },
-    [MaestroPanelType.STATS]: {
-        id: MaestroPanelType.STATS,
-        name: 'Stats',
-        imageNamePrefix: 'Stats',
-        iconName: 'stats',
-    },
-    [MaestroPanelType.BETS]: {
-        id: MaestroPanelType.BETS,
-        name: 'Bets',
-        imageNamePrefix: 'Bets',
-        iconName: 'bets',
-    },
-    [MaestroPanelType.FANTASY]: {
-        iconName: 'fantasy',
-        id: MaestroPanelType.FANTASY,
-        imageNamePrefix: 'Fantasy',
-        name: 'Fantasy',
-    },
-    [MaestroPanelType.SHOP]: {
-        iconName: 'shop',
-        id: MaestroPanelType.SHOP,
-        imageNamePrefix: 'Shop',
-        name: 'Shop',
-    },
+    ESPN_KEY_PLAYS: 'espnKeyPlays',
+    ESPN_STATS: 'espnStats',
+    ESPN_BETS: 'espnBet',
+    ESPN_FANTASY: 'espnFantasy',
+    ESPN_SHOP: 'espnShop',
+    HELLO_WORLD: 'helloWorld',
+    FOX_KEY_PLAYS: 'foxKeyPlays',
+    FOX_MULTI_VIEW: 'foxMultiview',
+    FOX_STATS: 'foxStats',
+    BUILDER_BLOCK_PANEL: 'builderBlockPanel',
 };

package/dist/src/modules/espn/bets/interfaces/IBetsViewModel.d.ts

@@ -0,0 +1,5 @@
+import { BetCardType, BetType } from '../types/BetsAnalyticsTypes';
+export interface IBetsViewModel {
+    cleanup(): void;
+    trackCardClick(cardType: BetCardType, betType?: BetType): void;
+}

package/dist/src/{services → modules/espn/bets/services}/BetsService.d.ts

@@ -1,11 +1,11 @@
-import { IBetsNetworkManager } from './NetworkManager/types';
-import { IBetsResponse, IPersonalizedBetsResponse } from '../modules/bets/interfaces/IBets';
+import NetworkManager from '../../../../services/NetworkManager/NetworkManager';
+import { IBetsResponse, IPersonalizedBetsResponse } from '../interfaces/IBets';
 import IMaestroEventDelegate from '@/interfaces/IMaestroEventDelegate';
 /**
  * Service for handling bets-related API calls
  */
 declare class BetsService {
-    networkManager: IBetsNetworkManager;
+    networkManager: NetworkManager;
     constructor(delegate: IMaestroEventDelegate);
     /**
      * Get non-personalized bets for an event

package/dist/src/{services → modules/espn/bets/services}/BetsService.js

@@ -1,5 +1,4 @@
-import { HttpMethod } from './NetworkManager/NetworkManager';
-import NetworkManagerFactory from './NetworkManager/NetworkManagerFactory';
+import NetworkManager, { HttpMethod, } from '../../../../services/NetworkManager/NetworkManager';
 /**
  * Service for handling bets-related API calls
  */
@@ -11,7 +10,9 @@ class BetsService {
             writable: true,
             value: void 0
         });
-        this.networkManager = NetworkManagerFactory.createBetsNetworkManager(delegate.getBettingAPIBaseURL());
+        this.networkManager = new NetworkManager({
+            externalBaseURL: delegate.getBettingAPIBaseURL(),
+        });
     }
     /**
      * Get non-personalized bets for an event

package/dist/src/modules/{bets → espn/bets}/view/BetsView.d.ts

@@ -3,18 +3,19 @@ import './BetsView.styles.css';
 import BetsViewModel, { BetItem, BetsErrorState } from '../view-model/BetsViewModel';
 import { Direction } from '@/external/spatial-navigation/utils';
 interface BetsViewState {
-    container: HTMLDivElement | null;
     betsItems: BetItem[];
     isDataLoading: boolean;
     errorState: BetsErrorState;
     hideWagers: boolean;
+    container: HTMLDivElement | null;
 }
 declare class BetsView extends Component<{}, BetsViewState> {
-    private container;
     private betsItemsUnsub;
     private isDataLoadingUnsub;
     private errorStateUnsub;
     private hideWagersUnsub;
+    private maxHeightCleanup;
+    private containerRef;
     private vm;
     constructor(props: {});
     get viewModel(): BetsViewModel;
@@ -23,6 +24,7 @@ declare class BetsView extends Component<{}, BetsViewState> {
     renderBetItem: (item: BetItem) => JSX.Element | null;
     clearTabLoadFailure: () => void;
     onArrowPress: (d: Direction) => void;
+    setContainerRef: (e: HTMLDivElement | null) => void;
     render(): JSX.Element;
 }
 export default BetsView;

package/dist/src/modules/{bets → espn/bets}/view/BetsView.js

@@ -9,34 +9,41 @@ import GamblingDisclaimer from './components/GamblingDisclaimer/GamblingDisclaim
 import LocationWarning from './components/LocationWarning/LocationWarning';
 import { BetItemPromoCode } from './components/PromoCodeBanner';
 import TabLoadErrorView from '@/components/molecules/TabLoadError';
+import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
 class BetsView extends Component {
     constructor(props) {
         super(props);
-        Object.defineProperty(this, "container", {
+        Object.defineProperty(this, "betsItemsUnsub", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "betsItemsUnsub", {
+        Object.defineProperty(this, "isDataLoadingUnsub", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "isDataLoadingUnsub", {
+        Object.defineProperty(this, "errorStateUnsub", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "errorStateUnsub", {
+        Object.defineProperty(this, "hideWagersUnsub", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "hideWagersUnsub", {
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "containerRef", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -90,13 +97,33 @@ class BetsView extends Component {
                 }
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().betsViewModel;
+        Object.defineProperty(this, "setContainerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (e && !this.state.container) {
+                    this.setState({ container: e });
+                }
+                if (this.containerRef !== e) {
+                    this.containerRef = e;
+                    if (this.maxHeightCleanup) {
+                        this.maxHeightCleanup();
+                    }
+                    if (this.containerRef) {
+                        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.containerRef);
+                    }
+                }
+            }
+        });
+        this.vm = SDK.getMaestroEventViewModel()
+            .betsViewModel;
         this.state = {
-            container: null,
             betsItems: this.viewModel.betsItems.value,
             isDataLoading: this.viewModel.isDataLoading.value,
             errorState: this.viewModel.errorState.value,
             hideWagers: this.viewModel.hideWagers.value,
+            container: null,
         };
     }
     get viewModel() {
@@ -106,9 +133,6 @@ class BetsView extends Component {
         return this.vm;
     }
     componentDidMount() {
-        this.setState({
-            container: this.container,
-        });
         this.betsItemsUnsub = this.viewModel.betsItems.subscribe((value) => {
             this.setState({ betsItems: value });
         });
@@ -129,13 +153,15 @@ class BetsView extends Component {
         this.isDataLoadingUnsub && this.isDataLoadingUnsub();
         this.errorStateUnsub && this.errorStateUnsub();
         this.hideWagersUnsub && this.hideWagersUnsub();
+        this.maxHeightCleanup && this.maxHeightCleanup();
         // Clean up the view model
         this.viewModel.cleanup();
     }
     render() {
-        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40, "data-has-error": this.state.errorState !== 'none' }, this.state.errorState === 'tabLoadFailure' ? (React.createElement("div", null,
+        const isError = this.state.errorState === 'tabLoadFailure';
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40, "data-has-error": this.state.errorState !== 'none' }, isError ? (React.createElement("div", null,
             React.createElement(TabLoadErrorView, { onEnterPress: this.clearTabLoadFailure, onArrowPress: this.onArrowPress }),
-            React.createElement("div", { className: "bets-bottom-padding" }))) : (React.createElement("div", { className: "bets-view", ref: (e) => (this.container = e) },
+            React.createElement("div", { className: "bets-bottom-padding" }))) : (React.createElement("div", { className: "bets-view", ref: this.setContainerRef },
             this.state.betsItems.map(this.renderBetItem),
             React.createElement("div", { className: "bets-bottom-padding" })))));
     }

package/dist/src/modules/{bets → espn/bets}/view/HotProps/HotPropsView.d.ts

@@ -8,19 +8,20 @@ type HotPropsViewProps = {
     item: HotPropsBetItem;
     hasFocusedChild?: boolean;
 };
-declare const _default: {
+export declare const FocusableHotPropsView: {
     new (props: (HotPropsViewProps & WithFocusableProps) | Readonly<HotPropsViewProps & WithFocusableProps>): {
-        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
-        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
@@ -31,7 +32,7 @@ declare const _default: {
         componentWillUnmount(): void;
         render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
-        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -39,28 +40,29 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     new (props: HotPropsViewProps & WithFocusableProps, context: any): {
-        state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
-        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };
         setFocus: (focusKey: string) => void;
-        navigateByDirection: (direction: Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: import("@/external/spatial-navigation/utils").Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
         onEnterPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
+        onClickPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onEnterReleaseHandler: () => void;
         onBackPressHandler: (details: import("@/external/spatial-navigation/utils").Details) => void;
         onArrowPressHandler: (direction: Direction, details: import("@/external/spatial-navigation/utils").Details) => boolean | void;
@@ -71,7 +73,7 @@ declare const _default: {
         componentWillUnmount(): void;
         render(): React.ReactElement<HotPropsViewProps & WithFocusableProps, string | React.JSXElementConstructor<any>>;
         context: any;
-        setState<K extends keyof import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends keyof import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>(state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | ((prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, props: Readonly<HotPropsViewProps & WithFocusableProps>) => import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null) | Pick<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<HotPropsViewProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -79,15 +81,15 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<HotPropsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<HotPropsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;
@@ -97,4 +99,5 @@ declare const _default: {
     };
     contextType?: React.Context<any> | undefined;
 };
-export default _default;
+declare const HotPropsViewWrapper: React.FC<HotPropsViewProps & WithFocusableProps>;
+export default HotPropsViewWrapper;

package/dist/src/modules/{bets → espn/bets}/view/HotProps/HotPropsView.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { withFocusable, } from '@/external/spatial-navigation';
 import Bet from '../components/Bet/Bet';
 import BetsCard from '../components/BetsCard/BetsCard';
 import Icon from '@/components/atoms/SvgIcon/Icon';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
 import './HotPropsView.css';
 import BetsCardHeader from '../components/BetsCard/BetsCardHeader';
 import SDK from '@/index';
@@ -48,28 +48,6 @@ class HotPropsView extends React.Component {
                 SDK.getMaestroEventViewModel().navigation.setFocus(this.getBetFocusKey(0));
             }
         });
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-        Object.defineProperty(this, "onCardBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (layout) => {
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
-        Object.defineProperty(this, "onBetBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (layout) => {
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
         Object.defineProperty(this, "onBetArrowPress", {
             enumerable: true,
             configurable: true,
@@ -106,7 +84,8 @@ class HotPropsView extends React.Component {
         return React.createElement(Icon, { iconName: "flame", width: 20, height: 20 });
     }
     get viewModel() {
-        const vm = SDK.getMaestroEventViewModel().betsViewModel;
+        const vm = SDK.getMaestroEventViewModel()
+            .betsViewModel;
         if (!vm) {
             throw new Error('BetsViewModel is not initialized');
         }
@@ -135,16 +114,20 @@ class HotPropsView extends React.Component {
         const lineItems = item.data.items;
         const remaining = lineItems.length - BETS_MIN_VISIBLE;
         return (React.createElement("div", { className: "hot-props-bet-card" },
-            React.createElement(BetsCard, { focusKey: this.getCardFocusKey(), focused: focused, header: (props) => this.renderHeader(props, remaining), footer: () => this.renderFooter(remaining, !!this.props.hasFocusedChild), onEnterPress: this.handleEnterPress, onBecameFocused: this.onCardBecameFocused, onArrowPress: this.onCardArrowPress },
+            React.createElement(BetsCard, { focusKey: this.getCardFocusKey(), focused: focused, header: (props) => this.renderHeader(props, remaining), footer: () => this.renderFooter(remaining, !!this.props.hasFocusedChild), onEnterPress: this.handleEnterPress, onArrowPress: this.onCardArrowPress },
                 React.createElement("div", { className: "hot-props-list" }, this.lineItems.map((item, idx) => {
-                    return (React.createElement(Bet, { key: item.id, focusKey: this.getBetFocusKey(idx), leg: item, focusable: this.props.hasFocusedChild, onBackPress: this.focusCard, onBecameFocused: this.onBetBecameFocused, onArrowPress: this.onBetArrowPress(idx), parentFocusKey: this.props.focusKey, hideWagers: this.props.item.hideWagers }));
+                    return (React.createElement(Bet, { key: item.id, focusKey: this.getBetFocusKey(idx), leg: item, focusable: this.props.hasFocusedChild, onBackPress: this.focusCard, onArrowPress: this.onBetArrowPress(idx), parentFocusKey: this.props.focusKey, hideWagers: this.props.item.hideWagers }));
                 })))));
     }
 }
-Object.defineProperty(HotPropsView, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
-export default withFocusable({ trackChildren: true })(HotPropsView);
+export const FocusableHotPropsView = withFocusable({
+    trackChildren: true,
+})(HotPropsView);
+const HotPropsViewWrapper = (props) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const onBecameFocused = useCallback((layout) => {
+        scrollToFocusedElement(layout);
+    }, [scrollToFocusedElement]);
+    return React.createElement(FocusableHotPropsView, { ...props, onBecameFocused: onBecameFocused });
+};
+export default HotPropsViewWrapper;

package/dist/src/modules/espn/bets/view/SixPack/SixPackView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './SixPackView.style.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { SixPackBetItem } from '../../view-model/BetsViewModel';
+type Props = WithFocusableProps & {
+    item: SixPackBetItem;
+};
+declare const FocusableSixPackViewWrapper: React.FC<Props>;
+export default FocusableSixPackViewWrapper;

package/dist/src/modules/{bets → espn/bets}/view/SixPack/SixPackView.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import './SixPackView.style.css';
 import { withFocusable, } from '@/external/spatial-navigation';
 import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
-import { DEFAULT_SCROLLABLE_CONTAINER_CONTEXT, SCROLLABLE_CONTEXT_TYPE, } from '@/components/core/ScrollableContainer/ScrollableContainer';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
 import SDK from '@/index';
 class SixPackView extends React.Component {
     renderOrderedLineColumn(line) {
@@ -54,57 +54,24 @@ class SixPackView extends React.Component {
     }
 }
 const FocusableSixPackView = withFocusable()(SixPackView);
-export default class FocusableSixPackViewWrapper extends React.Component {
-    constructor() {
-        super(...arguments);
-        Object.defineProperty(this, "context", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: DEFAULT_SCROLLABLE_CONTAINER_CONTEXT
-        });
-        Object.defineProperty(this, "onBecameFocused", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (layout) => {
-                this.context.scrollToFocusedElement(layout);
-            }
-        });
-        Object.defineProperty(this, "onArrowPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (d, _props) => {
-                if (d === 'left') {
-                    SDK.getMaestroEventViewModel().deliverFocus();
-                }
-            }
-        });
-        Object.defineProperty(this, "onEnterPress", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                // Track card click
-                this.viewModel.trackCardClick('6-pack');
-            }
-        });
-    }
-    get viewModel() {
+const FocusableSixPackViewWrapper = (props) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const onBecameFocused = useCallback((layout) => {
+        scrollToFocusedElement(layout);
+    }, [scrollToFocusedElement]);
+    const onArrowPress = useCallback((d, _props) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    }, []);
+    const onEnterPress = useCallback(() => {
         const vm = SDK.getMaestroEventViewModel().betsViewModel;
         if (!vm) {
             throw new Error('BetsViewModel is not initialized');
         }
-        return vm;
-    }
-    render() {
-        return (React.createElement(FocusableSixPackView, { ...this.props, onBecameFocused: this.onBecameFocused, onArrowPress: this.onArrowPress, onEnterPress: this.onEnterPress }));
-    }
-}
-Object.defineProperty(FocusableSixPackViewWrapper, "contextTypes", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: SCROLLABLE_CONTEXT_TYPE
-});
+        // Track card click
+        vm.trackCardClick('6-pack');
+    }, []);
+    return (React.createElement(FocusableSixPackView, { ...props, onBecameFocused: onBecameFocused, onArrowPress: onArrowPress, onEnterPress: onEnterPress }));
+};
+export default FocusableSixPackViewWrapper;