@maestro_io/maestro-web-sdk 4.0.2 → 5.1.0

package/dist/src/modules/espn/stats/view/StatsItemView.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Teams from './Teams';
+import ActiveAthletes from './ActiveAthletes';
+import GameLeaders from './GameLeaders';
+import RecentGames from './RecentGames';
+import WinProbability from './WinProbability';
+import StatsQRCodeView from './StatsQRCode/StatsQRCodeView';
+import MatchPredictorView from './MatchPredictor';
+import TeamStats from './TeamStats';
+import { useScrollableContainer } from '@/components/core/ScrollableContainer';
+import FocusableItem from '@/components/core/ScrollableContainer/FocusableItem';
+import DriveSummary from './DriveSummary';
+import SDK from '@/index';
+import Penalties from './Penalties';
+import PlayerSeasonStats from './PlayerSeasonStats';
+import CareerMatchup from './CareerMatchup';
+import { ScoringSummary } from './ScoringSummary';
+const StatsItemView = ({ item, onEnterPress: onEnterPressProp, }) => {
+    const { scrollToFocusedElement } = useScrollableContainer();
+    const onBecameFocused = (layout) => {
+        scrollToFocusedElement(layout);
+    };
+    const onArrowPress = (d) => {
+        if (d === 'left') {
+            SDK.getMaestroEventViewModel().deliverFocus();
+        }
+    };
+    const onEnterPress = (item) => () => {
+        onEnterPressProp(item);
+    };
+    const renderItem = () => {
+        switch (item.type) {
+            case 'penalties':
+                return (React.createElement(Penalties, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            case 'scoringSummary':
+                return (React.createElement(ScoringSummary, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), onArrowPress: onArrowPress, item: item }));
+            case 'driveSummary':
+                return (React.createElement(DriveSummary, { onBecameFocused: onBecameFocused, onItemEnterPress: onEnterPress(item), onArrowPress: onArrowPress, focusKey: `drive-summary-${item.id}`, item: item }));
+            case 'headerTeam':
+                return (React.createElement(Teams, { onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            case 'activeAthletes':
+                return (React.createElement(ActiveAthletes, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            case 'gameLeaders':
+                return React.createElement(GameLeaders, { item: item, onEnterPress: onEnterPress(item) });
+            case 'recentGames':
+                return (React.createElement(RecentGames, { onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            case 'winProbability':
+                return (React.createElement(WinProbability, { onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            case 'promotion':
+                return (React.createElement(StatsQRCodeView, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), onArrowPress: onArrowPress, promotion: item }));
+            case 'matchPredictor':
+                return (React.createElement(MatchPredictorView, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), onArrowPress: onArrowPress, item: item }));
+            case 'teamStats':
+                return (React.createElement(TeamStats, { onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), focusKey: "TEAM_STATS", trackChildren: !!item.tabbedStatistics, item: item }));
+            case 'playerSeasonStats':
+                return (React.createElement(PlayerSeasonStats, { onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), onArrowPress: onArrowPress, item: item }));
+            case 'careerMatchup':
+                return (React.createElement(CareerMatchup, { onArrowPress: onArrowPress, onBecameFocused: onBecameFocused, onEnterPress: onEnterPress(item), item: item }));
+            default:
+                console.warn('Unknown stats item type:', JSON.stringify(item));
+                return null;
+        }
+    };
+    return React.createElement(FocusableItem, null, renderItem());
+};
+export default StatsItemView;

package/dist/src/modules/espn/stats/view/StatsQRCode/StatsQRCodeView.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './StatsQRCodeView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { StatsPromotion } from '../../interfaces/IStats';
+export interface StatsQRCodeViewProps extends WithFocusableProps {
+    promotion: StatsPromotion;
+}
+declare const _default: {
+    new (props: (StatsQRCodeViewProps & WithFocusableProps) | Readonly<StatsQRCodeViewProps & WithFocusableProps>): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").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: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: StatsQRCodeViewProps & WithFocusableProps, context: any): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").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: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & 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<StatsQRCodeViewProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<StatsQRCodeViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

package/dist/src/modules/{stats → espn/stats}/view/StatsView.d.ts

@@ -13,6 +13,7 @@ declare class StatsView extends Component<{}, StatsViewState> {
     private statsDataUnsub;
     private isDataLoadingUnsub;
     private errorStateListener;
+    private maxHeightCleanup;
     private vm;
     constructor(props: {});
     get viewModel(): StatsViewModel;
@@ -21,6 +22,7 @@ declare class StatsView extends Component<{}, StatsViewState> {
     clearTabLoadFailure: () => void;
     onArrowPress: (d: Direction) => void;
     renderItems: () => JSX.Element | JSX.Element[] | null;
+    setContainerRef: (e: HTMLDivElement | null) => void;
     onEnterPress: (item: StatsItem) => void;
     render(): JSX.Element;
 }

package/dist/src/modules/{stats → espn/stats}/view/StatsView.js

@@ -5,6 +5,7 @@ import SDK from '@/index';
 import StatsItemView from './StatsItemView';
 import TabLoadErrorView from '@/components/molecules/TabLoadError';
 import { captureException } from '@/sentry';
+import { setupMaxHeightToBottom } from '@/hooks/useMaxHeightToBottom';
 const STICKY_HEADER_HEIGHT = 32; // Match KeyPlaysView
 class StatsView extends Component {
     constructor(props) {
@@ -33,6 +34,12 @@ class StatsView extends Component {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "maxHeightCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "vm", {
             enumerable: true,
             configurable: true,
@@ -76,6 +83,25 @@ class StatsView extends Component {
                 }
             }
         });
+        Object.defineProperty(this, "setContainerRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (e && !this.container) {
+                    this.container = e;
+                }
+                if (this.container !== e) {
+                    this.container = e;
+                    if (this.maxHeightCleanup) {
+                        this.maxHeightCleanup();
+                    }
+                    if (this.container) {
+                        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
+                    }
+                }
+            }
+        });
         Object.defineProperty(this, "onEnterPress", {
             enumerable: true,
             configurable: true,
@@ -84,7 +110,8 @@ class StatsView extends Component {
                 this.viewModel.onEngage(item.type);
             }
         });
-        this.vm = SDK.getMaestroEventViewModel().statsViewModel;
+        this.vm = SDK.getMaestroEventViewModel()
+            .statsViewModel;
         this.state = {
             container: null,
             isDataLoading: this.viewModel.isDataLoading.value,
@@ -102,6 +129,7 @@ class StatsView extends Component {
         this.setState({
             container: this.container,
         });
+        this.maxHeightCleanup = setupMaxHeightToBottom(() => this.container);
         this.statsDataUnsub = this.viewModel.statsItems.subscribe((value) => {
             this.setState({ statsItems: value });
         });
@@ -121,15 +149,14 @@ class StatsView extends Component {
         this.statsDataUnsub && this.statsDataUnsub();
         this.isDataLoadingUnsub && this.isDataLoadingUnsub();
         this.errorStateListener && this.errorStateListener();
+        this.maxHeightCleanup && this.maxHeightCleanup();
         // Clean up the view model
         this.viewModel.cleanup();
     }
     render() {
         const { container } = this.state;
         return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
-            React.createElement("div", { ref: (el) => {
-                    this.container = el;
-                }, className: "stats-view" },
+            React.createElement("div", { ref: this.setContainerRef, className: "stats-view" },
                 this.renderItems(),
                 React.createElement("div", { className: "stats-bottom-padding" }))));
     }

package/dist/src/modules/{stats → espn/stats}/view/TeamStats/TeamStatsView.d.ts

@@ -3,33 +3,35 @@ import React from 'react';
 import './TeamStatsView.styles.css';
 import { WithFocusableProps } from '@/external/spatial-navigation';
 import { TeamStatsItem } from '../../view-model/StatsViewModel';
+import { Details, Direction } from '@/external/spatial-navigation/utils';
 export interface TeamStatsViewProps {
     item: TeamStatsItem;
 }
 declare const _default: {
     new (props: (TeamStatsViewProps & WithFocusableProps) | Readonly<TeamStatsViewProps & 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: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
-        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
         onEnterReleaseHandler: () => void;
-        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
-        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
-        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
-        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBackPressHandler: (details: Details) => void;
+        onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("@/external/spatial-navigation/utils").Layout, details: Details) => void;
+        onBecameBlurredHandler: (layout: import("@/external/spatial-navigation/utils").Layout, details: Details) => void;
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
         render(): React.ReactElement<TeamStatsViewProps & 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<TeamStatsViewProps & 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<TeamStatsViewProps & 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<TeamStatsViewProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -37,39 +39,40 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamStatsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamStatsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     new (props: TeamStatsViewProps & 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: import("../../../../external/spatial-navigation/utils").Direction, details?: Record<string, any>) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
         stealFocus: () => void;
         onUpdateFocus: (focused: boolean) => void;
         onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
-        onEnterPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
         onEnterReleaseHandler: () => void;
-        onBackPressHandler: (details: import("../../../../external/spatial-navigation/utils").Details) => void;
-        onArrowPressHandler: (direction: import("../../../../external/spatial-navigation/utils").Direction, details: import("../../../../external/spatial-navigation/utils").Details) => boolean | void;
-        onBecameFocusedHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
-        onBecameBlurredHandler: (layout: import("../../../../external/spatial-navigation/utils").Layout, details: import("../../../../external/spatial-navigation/utils").Details) => void;
+        onBackPressHandler: (details: Details) => void;
+        onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("@/external/spatial-navigation/utils").Layout, details: Details) => void;
+        onBecameBlurredHandler: (layout: import("@/external/spatial-navigation/utils").Layout, details: Details) => void;
         componentDidMount(): void;
         componentDidUpdate(): void;
         componentWillUnmount(): void;
         render(): React.ReactElement<TeamStatsViewProps & 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<TeamStatsViewProps & 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<TeamStatsViewProps & 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<TeamStatsViewProps & WithFocusableProps> & Readonly<{
             children?: React.ReactNode;
@@ -77,15 +80,15 @@ declare const _default: {
         refs: {
             [key: string]: React.ReactInstance;
         };
-        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamStatsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamStatsViewProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
     };
     contextTypes: {
         parentFocusKey: import("prop-types").Requireable<string>;

package/dist/src/modules/espn/stats/view/TeamStats/TeamStatsView.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import './TeamStatsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import TeamStatistic from '../../components/TeamStatistic';
+import ActionButton from '@/components/molecules/ActionButton';
+const TeamStatsView = (props) => {
+    const { item } = props;
+    const { homeTeam, awayTeam, statistics, title, tabbedStatistics } = item;
+    const [tabbedViewKey, setTabbedViewKey] = React.useState(() => {
+        if (!tabbedStatistics || Object.keys(tabbedStatistics).length === 0) {
+            return null;
+        }
+        return Object.keys(tabbedStatistics)[0];
+    });
+    const [prevTabbedStatistics, setPrevTabbedStatistics] = React.useState(tabbedStatistics);
+    if (tabbedStatistics &&
+        prevTabbedStatistics !== tabbedStatistics &&
+        tabbedViewKey &&
+        !tabbedStatistics[tabbedViewKey]) {
+        // Current tabbedViewKey is no longer valid, switch to first key
+        setTabbedViewKey(Object.keys(tabbedStatistics)[0]);
+        setPrevTabbedStatistics(tabbedStatistics);
+    }
+    const renderStatistic = (statistic, index) => {
+        const key = statistic.displayName?.trim() || `stat-${index}`;
+        return (React.createElement(TeamStatistic, { key: key, statisticName: statistic.displayName, firstDisplayValue: statistic.awayTeamDisplayValue, secondDisplayValue: statistic.homeTeamDisplayValue, awayProgressValue: statistic.awayTeamValue, homeProgressValue: statistic.homeTeamValue, classNames: {
+                container: 'team-stat-item',
+                header: 'stat-header',
+                firstValue: 'stat-value T30 away-value FONT_BOLD_HEADLINE',
+                secondValue: 'stat-value T30 home-value FONT_BOLD_HEADLINE',
+                statisticName: 'stat-name T02 FONT_BOLD',
+            } }));
+    };
+    const renderStatistics = () => {
+        if (statistics) {
+            return statistics?.map(renderStatistic);
+        }
+        if (tabbedViewKey && tabbedStatistics && tabbedStatistics[tabbedViewKey]) {
+            return tabbedStatistics[tabbedViewKey].entries.map(renderStatistic);
+        }
+        return null;
+    };
+    const onTabbedViewButtonArrowPress = (key) => (d, innerProps, details) => {
+        if (d === 'left' && key === Object.keys(tabbedStatistics || {})[0]) {
+            props.onArrowPress?.(d, innerProps, details);
+        }
+    };
+    const renderTabbedView = () => {
+        const tabbedStats = tabbedStatistics || {};
+        if (!tabbedStats || Object.keys(tabbedStats).length === 0) {
+            return null;
+        }
+        return (React.createElement("div", { className: "team-stats-tabs" }, Object.keys(tabbedStats).map((key) => {
+            return (React.createElement(ActionButton, { key: key, onArrowPress: onTabbedViewButtonArrowPress(key), onBecameFocused: () => setTabbedViewKey(key), onEnterPress: props.onEnterPress, "data-focused": props.hasFocusedChild && tabbedViewKey === key, parentFocusKey: "TEAM_STATS", "data-active": tabbedViewKey === key }, tabbedStats[key].title));
+        })));
+    };
+    return (React.createElement("section", { className: "team-stats-view focus-ring", "data-focused": props.focused || props.hasFocusedChild, style: {
+            '--home-team': `#${homeTeam.color}`,
+            '--away-team': `#${awayTeam.color}`,
+        } },
+        renderTabbedView(),
+        React.createElement("div", { className: "team-stats-header" },
+            React.createElement("div", { className: "team-stats-team away-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    awayTeam.logo && (React.createElement(Image, { src: awayTeam.logo, alt: awayTeam.displayName, crossOrigin: "anonymous", className: "team-logo" })),
+                    React.createElement("div", { className: "team-swatch away-swatch" }),
+                    React.createElement("span", { className: "team-abbreviation" }, awayTeam.abbreviation))),
+            React.createElement("h2", { className: "stats-title T05_ALT FONT_BOLD" }, title),
+            React.createElement("div", { className: "team-stats-team home-team" },
+                React.createElement("div", { className: "team-stats-team-inner" },
+                    React.createElement("span", { className: "team-abbreviation" }, homeTeam.abbreviation),
+                    React.createElement("div", { className: "team-swatch home-swatch" }),
+                    homeTeam.logo && (React.createElement(Image, { src: homeTeam.logo, alt: homeTeam.displayName, crossOrigin: "anonymous", className: "team-logo" }))))),
+        React.createElement("div", { className: "team-stats-content" }, renderStatistics())));
+};
+export default withFocusable()(TeamStatsView);

package/dist/src/modules/espn/stats/view/Teams/Teams.d.ts

@@ -0,0 +1,100 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './TeamsView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { HeaderTeamStatItem } from '../../view-model/StatsViewModel';
+type TeamsProps = {
+    item: HeaderTeamStatItem;
+};
+declare const _default: {
+    new (props: (TeamsProps & WithFocusableProps) | Readonly<TeamsProps & WithFocusableProps>): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").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: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<TeamsProps & 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<TeamsProps & 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<TeamsProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamsProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    new (props: TeamsProps & WithFocusableProps, context: any): {
+        state: import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../../external/spatial-navigation/spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: import("../../../../../external/spatial-navigation/utils").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: import("../../../../../external/spatial-navigation/utils").Direction, details: import("../../../../../external/spatial-navigation/utils").Details) => boolean | void;
+        onBecameFocusedHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        onBecameBlurredHandler: (layout: import("../../../../../external/spatial-navigation/utils").Layout, details: import("../../../../../external/spatial-navigation/utils").Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): React.ReactElement<TeamsProps & 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<TeamsProps & 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<TeamsProps & WithFocusableProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<TeamsProps & WithFocusableProps>, prevState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<TeamsProps & WithFocusableProps>, nextState: Readonly<import("../../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: import("prop-types").Requireable<string>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;