@maestro_io/maestro-web-sdk 2.1.2 → 2.1.3

package/dist/modules/stats/mocks.js

@@ -544,3 +544,143 @@ export const MOCK_STATS_API_PRE_GAME_RESPONSE = {
         gameState: 'pre',
     },
 };
+export const mockTeamWithStatistics = {
+    id: '12',
+    uid: 's:20~l:28~t:12',
+    abbreviation: 'KC',
+    displayName: 'Kansas City Chiefs',
+    color: 'e31837',
+    logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/kc.png',
+    homeAway: 'home',
+    statistics: [
+        {
+            $key: 'totalYards',
+            value: 340,
+            displayValue: '340',
+            displayName: 'Total Yards',
+        },
+        {
+            $key: 'turnovers',
+            value: 0,
+            displayValue: '0',
+            displayName: 'Turnovers',
+        },
+        {
+            $key: 'firstDowns',
+            value: 21,
+            displayValue: '21',
+            displayName: '1st Downs',
+        },
+        {
+            $key: 'possession',
+            value: 24.22,
+            displayValue: '24:13',
+            displayName: 'Possession',
+        },
+        {
+            $key: 'thirdDownEfficiency',
+            value: 0.5,
+            displayValue: '4-8',
+            displayName: '3rd Down Efficiency',
+        },
+        {
+            $key: 'fourthDownEfficiency',
+            value: 0,
+            displayValue: '0-0',
+            displayName: '4th Down Efficiency',
+        },
+        {
+            $key: 'redZone',
+            value: 0.8,
+            displayValue: '4-5',
+            displayName: 'Red Zone',
+        },
+        {
+            $key: 'yardsPerPlay',
+            value: 5.8,
+            displayValue: '5.8',
+            displayName: 'Yards Per Play',
+        },
+    ],
+};
+export const mockAwayTeamWithStatistics = {
+    id: '21',
+    uid: 's:20~l:28~t:21',
+    abbreviation: 'PHI',
+    displayName: 'Philadelphia Eagles',
+    color: '004C54',
+    logo: 'https://a.espncdn.com/i/teamlogos/nfl/500/phi.png',
+    homeAway: 'away',
+    statistics: [
+        {
+            $key: 'totalYards',
+            value: 417,
+            displayValue: '417',
+            displayName: 'Total Yards',
+        },
+        {
+            $key: 'turnovers',
+            value: 1,
+            displayValue: '1',
+            displayName: 'Turnovers',
+        },
+        {
+            $key: 'firstDowns',
+            value: 25,
+            displayValue: '25',
+            displayName: '1st Downs',
+        },
+        {
+            $key: 'possession',
+            value: 35.78,
+            displayValue: '35:47',
+            displayName: 'Possession',
+        },
+        {
+            $key: 'thirdDownEfficiency',
+            value: 0.727,
+            displayValue: '8-11',
+            displayName: '3rd Down Efficiency',
+        },
+        {
+            $key: 'fourthDownEfficiency',
+            value: 1.0,
+            displayValue: '2-2',
+            displayName: '4th Down Efficiency',
+        },
+        {
+            $key: 'redZone',
+            value: 0.6,
+            displayValue: '3-5',
+            displayName: 'Red Zone',
+        },
+        {
+            $key: 'yardsPerPlay',
+            value: 6.4,
+            displayValue: '6.4',
+            displayName: 'Yards Per Play',
+        },
+    ],
+};
+export const mockStatsResponseWithTeamStats = {
+    entities: {
+        teams: {
+            '12': mockTeamWithStatistics,
+            '21': mockAwayTeamWithStatistics,
+        },
+        athletes: {},
+    },
+    leaders: [],
+    header: {
+        teams: [],
+        linescoresHeader: [],
+    },
+    predictor: null,
+    winProbability: null,
+    gameState: 'pre',
+    meta: {
+        gp_topic: 'test',
+        picker_topic: 'test',
+        gameState: 'pre',
+    },
+};

package/dist/modules/stats/utils/renderTeamStatistic.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface TeamStatisticProps {
+    statisticName: string;
+    firstDisplayValue: string | number;
+    secondDisplayValue: string | number;
+    awayProgressValue: number;
+    homeProgressValue: number;
+    key?: string | number;
+    classNames?: {
+        container?: string;
+        header?: string;
+        firstValue?: string;
+        secondValue?: string;
+        statisticName?: string;
+    };
+}
+/**
+ * Shared utility to render a team statistic with consistent structure
+ * This eliminates code duplication between Teams and TeamStatsView components
+ */
+export declare const renderTeamStatistic: (props: TeamStatisticProps) => React.JSX.Element;

package/dist/modules/stats/utils/renderTeamStatistic.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import StatsProgressBar from '../view/Teams/StatsProgressBar';
+/**
+ * Shared utility to render a team statistic with consistent structure
+ * This eliminates code duplication between Teams and TeamStatsView components
+ */
+export const renderTeamStatistic = (props) => {
+    const { statisticName, firstDisplayValue, secondDisplayValue, awayProgressValue, homeProgressValue, key, classNames = {}, } = props;
+    const { container = 'team-stat-item', header = 'stat-header', firstValue = 'stat-value away-value', secondValue = 'stat-value home-value', statisticName: statisticNameClass = 'stat-name', } = classNames;
+    return (React.createElement("div", { key: key, className: container },
+        React.createElement("div", { className: header },
+            React.createElement("span", { className: firstValue }, firstDisplayValue),
+            React.createElement("span", { className: statisticNameClass }, statisticName),
+            React.createElement("span", { className: secondValue }, secondDisplayValue)),
+        React.createElement(StatsProgressBar, { awayTeamValue: awayProgressValue, homeTeamValue: homeProgressValue })));
+};

package/dist/modules/stats/view/ActiveAthletes/ActiveAthletes.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './ActiveAthletes.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Direction } from '@/external/spatial-navigation/utils';
+import { AthletesStatisticsItem } from '../components/AthletesStatistics/AthletesStatistics';
+export type ActiveAthletesItem = {
+    displayText: string;
+    awayTeam: {
+        id: string;
+        logo: string;
+        name: string;
+    };
+    homeTeam: {
+        id: string;
+        logo: string;
+        name: string;
+    };
+    athletes: AthletesStatisticsItem[];
+};
+export type ActiveAthletesProps = {
+    item: ActiveAthletesItem;
+};
+declare class ActiveAthletes extends React.Component<WithFocusableProps & ActiveAthletesProps, {
+    expanded: boolean;
+}> {
+    constructor(props: WithFocusableProps & ActiveAthletesProps);
+    onEnterPress(): void;
+    onAthletesStatisticsArrowPress: (index: number) => (d: Direction) => boolean;
+    get cardFocusKey(): string;
+    onAthletesStatisticsBackPress: () => void;
+    renderContent(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ActiveAthletes;

package/dist/modules/stats/view/ActiveAthletes/ActiveAthletes.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import './ActiveAthletes.styles.css';
+import Icon from '@/components/atoms/SvgIcon';
+import { withFocusable, } from '@/external/spatial-navigation';
+import CollapsedAthletes from './CollapsedAthletes/CollapsedAthletes';
+import ExpandedAthletes from './ExpandedAthletes/ExpandedAthletes';
+import SDK from '@/index';
+class ActiveAthletes extends React.Component {
+    constructor(props) {
+        super(props);
+        Object.defineProperty(this, "onAthletesStatisticsArrowPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => (d) => {
+                if (d === 'up' && index === 0) {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                    this.setState({
+                        expanded: false,
+                    });
+                    return false;
+                }
+                return true;
+            }
+        });
+        Object.defineProperty(this, "onAthletesStatisticsBackPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.setState({
+                    expanded: false,
+                }, () => {
+                    SDK.getMaestroEventViewModel().navigation.setFocus(this.cardFocusKey);
+                });
+            }
+        });
+        this.state = {
+            expanded: false,
+        };
+    }
+    onEnterPress() {
+        const newValue = !this.state.expanded;
+        this.setState({
+            expanded: newValue,
+        }, () => {
+            if (newValue) {
+                const firstAthlete = this.props.item.athletes[0];
+                SDK.getMaestroEventViewModel().navigation.setFocus(`${firstAthlete.awayAthlete.id}-${firstAthlete.homeAthlete.id}-${firstAthlete.displayName}-statistics`);
+            }
+        });
+    }
+    get cardFocusKey() {
+        return this.props.item.displayText
+            .trim()
+            .toLowerCase()
+            .replace(/\s+/g, '-');
+    }
+    renderContent() {
+        if (this.state.expanded) {
+            return (React.createElement(ExpandedAthletes, { item: this.props.item, onArrowPress: this.onAthletesStatisticsArrowPress, onBackPress: this.onAthletesStatisticsBackPress }));
+        }
+        return React.createElement(CollapsedAthletes, { item: this.props.item });
+    }
+    render() {
+        return (React.createElement(FocusableWrapper, { displayText: this.props.item.displayText, onEnterPress: this.onEnterPress.bind(this), expanded: this.state.expanded, focusKey: this.cardFocusKey }, this.renderContent()));
+    }
+}
+const Wrapper = (props) => {
+    return (React.createElement("section", { className: "active-athletes focus-ring", "data-focused": props.focused },
+        React.createElement("div", { className: "header" },
+            React.createElement("h5", { className: "T05_ALT" }, props.displayText),
+            React.createElement("div", { className: "icon-container", "data-focused": props.focused },
+                React.createElement(Icon, { iconName: props.expanded ? 'collapse' : 'expand', height: 48, width: 48 }))),
+        props.children));
+};
+const FocusableWrapper = withFocusable()(Wrapper);
+export default ActiveAthletes;

package/dist/modules/stats/view/ActiveAthletes/CollapsedAthletes/CollapsedAthletes.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './CollapsedAthletes.styles.css';
+import { ActiveAthletesProps } from '../ActiveAthletes';
+declare const CollapsedAthletes: (props: ActiveAthletesProps) => React.JSX.Element;
+export default CollapsedAthletes;

package/dist/modules/stats/view/ActiveAthletes/CollapsedAthletes/CollapsedAthletes.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './CollapsedAthletes.styles.css';
+import Image from '@/components/atoms/Image';
+const CollapsedAthletes = (props) => {
+    const { awayTeam, homeTeam, athletes } = props.item;
+    return (React.createElement("div", { className: "minified-content" },
+        React.createElement("div", { className: "teams-header" }, [awayTeam, homeTeam].map((team) => {
+            return (React.createElement("div", { className: "team-header", key: team.id },
+                React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
+                React.createElement("span", { className: "T05_ALT" }, team.name)));
+        })),
+        athletes.map((item, index) => {
+            return (React.createElement("div", { className: "minified-athletes", key: item.awayAthlete.id + item.homeAthlete.id },
+                React.createElement("div", { className: "athletes-jersey-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
+                    return (React.createElement("div", { className: "T05_ALT", key: athlete.id + index + '-jersey' },
+                        React.createElement("span", null,
+                            "#",
+                            athlete.jersey),
+                        " ",
+                        athlete.shortName));
+                })),
+                React.createElement("div", { className: "athletes-statistics-row" }, [item.awayAthlete, item.homeAthlete].map((athlete) => {
+                    return (React.createElement("span", { key: athlete.id + index + '-statistic', className: "T02" }, athlete.minifiedStatistics || ''));
+                }))));
+        })));
+};
+export default CollapsedAthletes;

package/dist/modules/stats/view/ActiveAthletes/ExpandedAthletes/ExpandedAthletes.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './ExpandedAthletes.styles.css';
+import { ActiveAthletesProps } from '../ActiveAthletes';
+import { Direction } from '@/external/spatial-navigation/utils';
+type Props = {
+    onArrowPress: (index: number) => (direction: Direction) => void;
+    onBackPress: () => void;
+} & ActiveAthletesProps;
+declare const ExpandedAthletes: (props: Props) => React.JSX.Element;
+export default ExpandedAthletes;

package/dist/modules/stats/view/ActiveAthletes/ExpandedAthletes/ExpandedAthletes.js

@@ -0,0 +1,15 @@
+import Image from '@/components/atoms/Image';
+import React from 'react';
+import './ExpandedAthletes.styles.css';
+import AthletesStatistics from '../../components/AthletesStatistics';
+const ExpandedAthletes = (props) => {
+    const { awayTeam, homeTeam, athletes } = props.item;
+    const { onArrowPress, onBackPress } = props;
+    return (React.createElement("div", { className: "active-athletes-statistics" },
+        React.createElement("div", { className: "divider" }),
+        React.createElement("div", { className: "active-athletes-statistics-header" }, [awayTeam, homeTeam].map((team) => (React.createElement("div", { className: "team-header", key: team.id },
+            React.createElement(Image, { src: team.logo, crossOrigin: "anonymous", alt: team.name }),
+            React.createElement("span", { className: "T05_ALT" }, team.name))))),
+        athletes.map((item, index) => (React.createElement(AthletesStatistics, { key: item.awayAthlete.id + item.homeAthlete.id + item.displayName, focusKey: `${item.awayAthlete.id}-${item.homeAthlete.id}-${item.displayName}-statistics`, item: item, onArrowPress: onArrowPress(index), onBackPress: onBackPress })))));
+};
+export default ExpandedAthletes;

package/dist/modules/stats/view/ActiveAthletes/index.d.ts

@@ -0,0 +1,2 @@
+import ActiveAthletes from './ActiveAthletes';
+export default ActiveAthletes;

package/dist/modules/stats/view/ActiveAthletes/index.js

@@ -0,0 +1,2 @@
+import ActiveAthletes from './ActiveAthletes';
+export default ActiveAthletes;

package/dist/modules/stats/view/GameLeaders/GameLeaders.d.ts

@@ -1,29 +1,8 @@
 import React from 'react';
 import './GameLeaders.styles.css';
-type Athlete = {
-    id: string;
-    displayName: string;
-    headshot: string;
-    position: string;
-    shortName: string;
-    jersey: string;
-    mainStatistic?: {
-        displayValue: string;
-        abbreviation: string;
-    };
-};
-export type LeaderStatsItem = {
-    displayName: string;
-    awayAthlete: Athlete;
-    homeAthlete: Athlete;
-    statistics?: {
-        homeAthleteValue: string;
-        awayAthleteValue: string;
-        abbreviation: string;
-    }[];
-};
+import { AthletesStatisticsItem } from '../components/AthletesStatistics/AthletesStatistics';
 export type GameLeadersStatsItem = {
-    items: LeaderStatsItem[];
+    items: AthletesStatisticsItem[];
 };
 declare const GameLeaders: (props: GameLeadersStatsItem) => React.JSX.Element;
 export default GameLeaders;

package/dist/modules/stats/view/GameLeaders/GameLeaders.js

@@ -4,6 +4,6 @@ import AthletesStatistics from '../components/AthletesStatistics';
 const GameLeaders = (props) => {
     return (React.createElement("section", { className: "game-leaders" },
         React.createElement("h5", { className: "T05_ALT" }, "Game Leaders"),
-        props.items.map((item, index) => (React.createElement(AthletesStatistics, { key: item.displayName, item: item, focusKey: String(index) })))));
+        props.items.map((item, index) => (React.createElement(AthletesStatistics, { key: `${index}-${item.awayAthlete.id}`, item: item, focusKey: String(index) })))));
 };
 export default GameLeaders;

package/dist/modules/stats/view/MatchPredictor/MatchPredictorView.d.ts

@@ -10,6 +10,7 @@ export interface MatchPredictorProps {
 declare const _default: {
     new (props?: (MatchPredictorProps & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/modules/stats/view/RecentGames/RecentGames.d.ts

@@ -20,6 +20,7 @@ export type RecentGamesStatsItem = {
 declare const _default: {
     new (props?: (RecentGamesStatsItem & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

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

@@ -9,6 +9,7 @@ export interface StatsQRCodeViewProps extends WithFocusableProps {
 declare const _default: {
     new (props?: (StatsQRCodeViewProps & WithFocusableProps) | undefined, context?: any): {
         state: import("../../../../external/spatial-navigation/withFocusable").WithFocusableState;
+        navigation: import("../../../../external/spatial-navigation/spatialNavigation").default;
         getChildContext(): {
             parentFocusKey: string;
         };

package/dist/modules/stats/view/StatsView.d.ts

@@ -14,7 +14,7 @@ declare class StatsView extends Component<{}, StatsViewState> {
     constructor(props: {});
     componentDidMount(): void;
     componentWillUnmount(): void;
-    renderStatsComponents: () => React.JSX.Element | null;
+    renderStatsComponents: () => React.ReactElement[];
     render(): React.JSX.Element;
 }
 export default StatsView;

package/dist/modules/stats/view/StatsView.js

@@ -4,6 +4,8 @@ import ScrollableContainer from '@/components/core/ScrollableContainer';
 import MatchPredictorView from './MatchPredictor';
 import SDK from '@/index';
 import StatsQRCodeView from './StatsQRCode';
+import TeamStatsView from './TeamStats';
+const STICKY_HEADER_HEIGHT = 32; // Match KeyPlaysView
 class StatsView extends Component {
     constructor(props) {
         super(props);
@@ -38,16 +40,30 @@ class StatsView extends Component {
             value: () => {
                 const { statsData } = this.state;
                 if (!statsData) {
-                    return React.createElement("div", { className: "stats-loading T02" }, "Loading...");
+                    return [];
                 }
                 try {
-                    return (React.createElement("div", null,
-                        statsData.predictor && (React.createElement(MatchPredictorView, { predictor: statsData.predictor, teams: statsData.entities.teams })),
-                        statsData.promotion && (React.createElement(StatsQRCodeView, { promotion: statsData.promotion }))));
+                    const teams = statsData.entities.teams;
+                    const homeTeam = Object.values(teams).find((team) => team.homeAway === 'home');
+                    const awayTeam = Object.values(teams).find((team) => team.homeAway === 'away');
+                    const availableStatistics = homeTeam?.statistics || awayTeam?.statistics || [];
+                    const components = [];
+                    if (statsData.predictor) {
+                        components.push(React.createElement(MatchPredictorView, { key: "match-predictor", predictor: statsData.predictor, teams: statsData.entities.teams }));
+                    }
+                    // Add TeamStatsView if available
+                    if (homeTeam && awayTeam && availableStatistics.length > 0) {
+                        components.push(React.createElement(TeamStatsView, { key: "team-stats", homeTeam: homeTeam, awayTeam: awayTeam, statistics: availableStatistics }));
+                    }
+                    // Add StatsQRCodeView if available
+                    if (statsData.promotion) {
+                        components.push(React.createElement(StatsQRCodeView, { key: "stats-qr-code", promotion: statsData.promotion }));
+                    }
+                    return components;
                 }
                 catch (error) {
                     console.error('Error rendering stats components:', error);
-                    return null;
+                    return [];
                 }
             }
         });
@@ -59,15 +75,15 @@ class StatsView extends Component {
         };
     }
     componentDidMount() {
-        this.setState({
-            container: this.container,
-        });
         this.statsDataUnsub = this.vm.statsData.subscribe((value) => {
             this.setState({ statsData: value });
         });
         this.isDataLoadingUnsub = this.vm.isDataLoading.subscribe((value) => {
             this.setState({ isDataLoading: value });
         });
+        this.setState({
+            container: this.container,
+        });
         // Initialize the view model
         this.vm.init();
     }
@@ -78,9 +94,13 @@ class StatsView extends Component {
         this.vm.cleanup();
     }
     render() {
-        return (React.createElement(ScrollableContainer, { scrollableContainerRef: this.state.container, containerTopOffset: 40 },
-            React.createElement("div", { className: "stats-view", ref: (e) => (this.container = e) },
-                this.renderStatsComponents(),
+        const { container, statsData } = this.state;
+        const components = this.renderStatsComponents();
+        return (React.createElement(ScrollableContainer, { scrollableContainerRef: container, containerTopOffset: STICKY_HEADER_HEIGHT },
+            React.createElement("div", { ref: (el) => {
+                    this.container = el;
+                }, className: "stats-view" },
+                !statsData ? (React.createElement("div", { className: "stats-loading T02" }, "Loading...")) : components.length > 0 ? (React.createElement("div", { className: "stats-content" }, components.map((component, index) => (React.createElement("div", { key: component.key || index, className: "stats-component" }, component))))) : (React.createElement("div", { className: "stats-loading T02" }, "No stats available")),
                 React.createElement("div", { className: "stats-bottom-padding" }))));
     }
 }

package/dist/modules/stats/view/TeamStats/TeamStatsView.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="prop-types" />
+import React from 'react';
+import './TeamStatsView.styles.css';
+import { WithFocusableProps } from '@/external/spatial-navigation';
+import { Team, TeamStatistic } from '../../interfaces/IStats';
+export interface TeamStatsViewProps {
+    homeTeam: Team;
+    awayTeam: Team;
+    statistics?: TeamStatistic[];
+}
+declare const _default: {
+    new (props?: (TeamStatsViewProps & WithFocusableProps) | undefined, 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?: Record<string, any>) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (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<TeamStatsViewProps & WithFocusableProps>;
+        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: TeamStatsViewProps & WithFocusableProps) => import("../../../../external/spatial-navigation/withFocusable").WithFocusableState | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>) | Pick<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState, K>, callback?: (() => any) | undefined): void;
+        forceUpdate(callBack?: (() => any) | undefined): void;
+        props: Readonly<{
+            children?: React.ReactNode;
+        }> & Readonly<TeamStatsViewProps & WithFocusableProps>;
+        context: any;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextContext: any): void;
+        shouldComponentUpdate?(nextProps: Readonly<TeamStatsViewProps & WithFocusableProps>, nextState: Readonly<import("../../../../external/spatial-navigation/withFocusable").WithFocusableState>, nextContext: any): boolean;
+        componentWillUpdate?(nextProps: Readonly<TeamStatsViewProps & 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>;
+    };
+};
+export default _default;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import './TeamStatsView.styles.css';
+import Image from '@/components/atoms/Image';
+import { withFocusable, } from '@/external/spatial-navigation';
+import { renderTeamStatistic } from '../../utils/renderTeamStatistic';
+const TeamStatsView = (props) => {
+    const { homeTeam, awayTeam, statistics } = props;
+    // If no statistics available, don't render the component
+    if (!statistics || statistics.length === 0) {
+        return null;
+    }
+    // Get statistics for both teams and match them by displayName
+    const homeStats = homeTeam.statistics || [];
+    const awayStats = awayTeam.statistics || [];
+    // Create a map of statistics by displayName for easier lookup
+    const createStatsMap = (stats) => {
+        return stats.reduce((map, stat) => {
+            map[stat.displayName] = stat;
+            return map;
+        }, {});
+    };
+    const homeStatsMap = createStatsMap(homeStats);
+    const awayStatsMap = createStatsMap(awayStats);
+    // Filter statistics to only include those that exist for both teams
+    const matchedStatistics = statistics.filter((stat) => homeStatsMap[stat.displayName] && awayStatsMap[stat.displayName]);
+    return (React.createElement("section", { className: "team-stats-view focus-ring", "data-focused": props.focused, style: {
+            '--home-team': `#${homeTeam.color}`,
+            '--away-team': `#${awayTeam.color}`,
+        } },
+        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" }, "Team Stats"),
+            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" }, matchedStatistics.map((statistic) => {
+            const homeStat = homeStatsMap[statistic.displayName];
+            const awayStat = awayStatsMap[statistic.displayName];
+            // Parse values, handle different formats (numbers and strings)
+            const homeValue = homeStat
+                ? parseFloat(homeStat.displayValue) || 0
+                : 0;
+            const awayValue = awayStat
+                ? parseFloat(awayStat.displayValue) || 0
+                : 0;
+            return renderTeamStatistic({
+                statisticName: statistic.displayName,
+                firstDisplayValue: awayStat?.displayValue || '0',
+                secondDisplayValue: homeStat?.displayValue || '0',
+                awayProgressValue: awayValue,
+                homeProgressValue: homeValue,
+                key: statistic.displayName,
+                classNames: {
+                    container: 'team-stat-item',
+                    header: 'stat-header',
+                    firstValue: 'stat-value away-value',
+                    secondValue: 'stat-value home-value',
+                    statisticName: 'stat-name',
+                },
+            });
+        }))));
+};
+export default withFocusable()(TeamStatsView);